/****GENERAL****/ *{margin: 0px; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} ul,ol{list-style: none;} img{border: 0; user-drag: none; -moz-user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;} html,body{margin: 0px; height: 100%; width: 100%} body{font-family: 'Lato', serif; font-size: 22px; font-weight: 400; color: #222222; background: #e71d73; position: relative; min-height: 100%;} ::selection{background: #613AA2; color: #fff; position: fixed;} /****FONTS****/ a{text-decoration: none;} a:hover{text-decoration: none;} a:active{text-decoration: none;} a:visited{text-decoration: none;} h1{font-family: 'Roboto', serif; font-size: 80px; font-weight: 400;} h2{font-family: 'Roboto', serif; font-size: 45px; font-weight: 300;} h3{font-family: 'Lato', serif; font-size: 50px; font-weight: 400;} h4{font-family: 'Lato', serif; font-size: 28px; font-weight: 400;} h5{font-family: 'Roboto', serif; font-size: 22px; font-weight: 600;} p{margin-bottom: 15px;} /****GENERAL****/ .page{position: relative; width: 100%; height: 100%; min-height: 100%; text-align: center;} .container{max-width: 800px; margin-right: auto; margin-left: auto; padding: 0 20px; overflow: hidden;} .container-xl{max-width: 1280px; margin-right: auto; margin-left: auto; padding: 0 20px; overflow: hidden;} .fixed {position: fixed; top: 0; left: 0; width: 100%;} .clear{width: 100%; clear: both;} .center-txt{text-align: center !important;} .right-txt{text-align: right !important;} .left-txt{text-align: left !important;} .left{float: left !important;} .right{float: right !important;} .col100, .col75, .col50, .col25, .col1-3, .col2-3{float: left;} .col100{width: 100%;} .col75{width: 75%;} .col50{width: 50%;} .col25{width: 25%;} .col1-3{width: 33.33%;} .col2-3{width: 66.66%;} @media only screen and (max-width: 780px) { .col100, .col75, .col50, .col25, .col1-3, .col2-3{width: 100%;} } .stroke{width: 100%; height: 6px; margin: 60px 0; background: #fff} .separator{width: 100%; height: 1px; margin: 30px 0; background: #fff} .button-more{cursor: pointer;} #fader{width:100%;height:100%; position:fixed;left:0;top:0;background:#fff;z-index: 99999} /**** HEADER ****/ #header{width: 100%; overflow: hidden; background: #474544; height: 100px; position: fixed; z-index: 9999;} @media only screen and (max-width: 780px) { #header{width: 100%; overflow: hidden; height: 80px; position: fixed; z-index: 9999;} } #logos{position: fixed; float: left; padding: 18px 20px; z-index: 9999;} #logos ul li{margin-right: 30px; float: left;} #menu-vertical{width: 380px; font-family: 'Roboto', serif; font-weight: 100; font-size: 20px; float:right;} #menu-vertical ul{background: #2a2a2a; position: fixed; z-index: 9999; top:0; right: -380px; width: 380px; min-height: 100%; float: left; padding: 20px; padding-top: 80px;} #menu-vertical ul li{margin-bottom: 8px; } #menu-vertical ul li a{padding: 4px; font-size: 28px; cursor: pointer; color: #fff; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out;} #menu-vertical ul li a:hover{background: #613AA2; -webkit-transition: all .6s ease-out; -moz-transition: all .6s ease-out; -o-transition: all .6s ease-out;} #menu-vertical ul li a:active{text-decoration: none;} #menu-vertical ul li a:visited{text-decoration: none;} #menu-vertical #menu-vertical-bt{position: fixed; z-index: 99999; top: 0; right: 0; width: 100px; height: 100px; padding:18px 0; cursor: pointer;} #menu-vertical #menu-vertical-bt .bt-line{width: 38px; margin: 9px auto 9px auto; height:4px; background: #ffffff;} #header.gallery-header h1{background: #e71d73; color: #ffffff; font-size:40px; padding: 5px;} @media only screen and (max-width: 780px) { #logos ul li{margin-right: 10px;} #logos ul li img{width:70%} #header.gallery-header h1{font-size:30px; margin-top: 20px;} } #header.gallery-header h1{background: #e71d73; color: #ffffff; font-size:40px; padding: 5px;} @media only screen and (max-width: 480px) { #logos{padding: 30px 20px;} #logos ul li{margin-right: -10px;} #logos ul li img{width:50%} #header.gallery-header h1{font-size:30px; margin-top: 20px;} } /**** SEPARATORS ****/ .page-separator{height: 500px;} .page-separator #page-separator-1-bg{background: url(../images/separator1.jpg) fixed bottom; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; height: 500px;} .page-separator #page-separator-2-bg{background: url(../images/separator2.jpg) fixed bottom; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; height: 500px;} .page-separator #page-separator-3-bg{background: url(../images/separator3.jpg) fixed bottom; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; height: 500px;} .page-separator #page-separator-4-bg{background: url(../images/separator-footer.jpg) fixed bottom; height: 500px;} /**** PAGE - HOME ****/ #home{background: url(../images/home_bg.jpg) fixed bottom; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; height: 100%; min-height: 840px; text-align: left; font-size: 30px; text-align: center;} #home #home-logo{margin-top: 15%; width: 100%; max-width: 650px; padding: 30px 50px; clear: both;} #home .button{max-width: 450px; margin: 0 62px 30px; clear: both;} @media only screen and (max-width: 780px) { #home #home-logo{margin-top: 20%;} } @media only screen and (max-width: 480px) { #home #home-logo{margin-top: 40%;} } /**** PAGE - INTRO ****/ #intro{padding: 150px 0; background: #fff; position: relative; text-align: center;} #intro:before{content: ''; position: absolute; top: -48px; right: 0; border-top: 50px solid transparent; border-right: 2903px solid #fff; z-index:999} #intro:after{content: ''; position: absolute; bottom: -48px; right: 0; border-bottom: 50px solid transparent; border-left: 2903px solid #fff; z-index:999} #intro h2{margin-bottom: 50px;} /**** PAGE - PARTICIPANTES ****/ #participantes{padding: 150px 0; background: #e71d73; position: relative; text-align: center; color: #fff; position: relative; z-index:9} #participantes:before{content: ''; position: absolute; top: -48px; right: 0; border-top: 50px solid transparent; border-left: 2903px solid #e71d73; z-index:999} #participantes:after{content: ''; position: absolute; bottom: -48px; right: 0; border-bottom: 50px solid transparent; border-left: 2903px solid #e71d73; z-index:999} #participantes h2{margin-bottom: 50px;} #participantes a{color: #fff;} #participantes .button{border: 2px solid #fff; color: #fff; background: transparent; cursor: pointer; padding: 8px 20px; width: auto; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; text-align: center; font-family: 'Roboto', serif; margin-top: 50px;} #participantes .button:hover{background: #fff; border: 2px solid #fff; color: #e71d73; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out;} /**** PAGE - GANADORES ****/ #ganadores{position: relative; position: relative; z-index:0; overflow: hidden} #ganadores .award-box{position: relative; position: relative; z-index:0; cursor: pointer;} #ganadores .award-box .title-box{position: absolute; z-index:0; cursor: pointer; background: #613AA2; color: #fff; padding: 5px 5px 10px 5px; margin: 50px;} #ganadores .award-box .ganadores-hover{width: 100%; min-height: 100%; position: absolute; background: rgba(238,194,22,.9); display: none; text-align: center; color: #fff; padding: 60px; padding: 50px 10px;} #ganadores .award-box .ganadores-hover p{position:absolute; margin: 0 auto; top: 32%; bottom: 32%; left: 0; right: 0;} #ganadores #award-box1, #ganadores #award-box2, #ganadores #award-box3{height: 650px} #ganadores #award-box4, #ganadores #award-box5, #ganadores #award-box9, #ganadores #award-box10{height: 550px} #ganadores #award-box6, #ganadores #award-box7, #ganadores #award-box8{height: 750px} #ganadores #award-box1.award-box .title-box, #ganadores #award-box2.award-box .title-box, #ganadores #award-box3.award-box .title-box, #ganadores #award-box4.award-box .title-box, #ganadores #award-box5.award-box .title-box{bottom: 50px;} #ganadores #award-box6 .title-box, #ganadores #award-box7 .title-box, #ganadores #award-box8 .title-box, #ganadores #award-box9.award-box .title-box, #ganadores #award-box10.award-box .title-box{top: 50px;} #ganadores #award-box1{background: url(../images/ganadores_medalla-oro.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box1.award-box .title-box{background: #613AA2;} #ganadores #award-box1.award-box .ganadores-hover{background: rgba(35,90,103,.9);} #ganadores #award-box2{background: url(../images/ganadores_medalla-plata.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box2.award-box .title-box{background: #e71d73;} #ganadores #award-box2.award-box .ganadores-hover{background: rgba(47,55,115,.9);} #ganadores #award-box3{background: url(../images/ganadores_medalla-bronce.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box3.award-box .title-box{background: #613AA2;} #ganadores #award-box3.award-box .ganadores-hover{background: rgba(35,90,103,.9);} #ganadores #award-box4{background: url(../images/ganadores_premio1.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box4.award-box .title-box{background: #613AA2;} #ganadores #award-box4.award-box .ganadores-hover{background: rgba(35,90,103,.9);} #ganadores #award-box5{background: url(../images/ganadores_premio2.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box5.award-box .title-box{background: #e71d73;} #ganadores #award-box5.award-box .ganadores-hover{background: rgba(47,55,115,.9);} #ganadores #award-box6{background: url(../images/ganadores_premio3.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box6.award-box .title-box{background: #e71d73;} #ganadores #award-box6.award-box .ganadores-hover{background: rgba(47,55,115,.9);} #ganadores #award-box7{background: url(../images/ganadores_premio4.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box7.award-box .title-box{background: #613AA2;} #ganadores #award-box7.award-box .ganadores-hover{background: rgba(35,90,103,.9);} #ganadores #award-box8{background: url(../images/ganadores_premio5.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box8.award-box .title-box{background: #e71d73;} #ganadores #award-box8.award-box .ganadores-hover{background: rgba(47,55,115,.9);} #ganadores #award-box9{background: url(../images/ganadores_premio6.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box9.award-box .title-box{background: #e71d73;} #ganadores #award-box9.award-box .ganadores-hover{background: rgba(47,55,115,.9);} #ganadores #award-box10{background: url(../images/ganadores_premio7.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #ganadores #award-box10.award-box .title-box{background: #613AA2;} #ganadores #award-box10.award-box .ganadores-hover{background: rgba(35,90,103,.9); padding: 100px 10px;} @media only screen and (max-width: 1280px) { #ganadores h3{font-family: 'Lato', serif; font-size: 40px; font-weight: 400;} #ganadores h4{font-family: 'Lato', serif; font-size: 28px; font-weight: 400;} #ganadores .award-box .title-box{position: absolute; z-index:0; cursor: pointer; background: #613AA2; color: #fff; padding: 2px 2px 5px 2px;} } /**** PAGE - JURADO INTERNACIONAL ****/ #jurado-internacional{padding: 150px 0; background: #fff; position: relative; text-align: center; font-size: 20px;} #jurado-internacional:before{content: ''; position: absolute; top: -48px; right: 0; border-top: 50px solid transparent; border-right: 2903px solid #fff; z-index:999} #jurado-internacional:after{content: ''; position: absolute; bottom: -48px; right: 0; border-bottom: 50px solid transparent; border-left: 2903px solid #fff; z-index:999} #jurado-internacional h2{margin-bottom: 50px;} #jurado-internacional h5{margin-bottom: 10px;} #jurado-internacional img{margin-bottom: 50px;} #jurado-internacional .col1-3{margin-bottom: 30px; text-align: left; padding: 0 10px;} #jurado-internacional .col1-3 p{font-size: 16px;} /**** PAGE - COMISIÓN PERMANENTE ****/ #comision-permanente{padding: 150px 0; background: #613AA2; position: relative; text-align: center; font-size: 20px; color: #fff;} #comision-permanente:before{content: ''; position: absolute; top: -48px; right: 0; border-top: 50px solid transparent; border-right: 2903px solid #613AA2; z-index:999} #comision-permanente:after{content: ''; position: absolute; bottom: -48px; right: 0; border-bottom: 50px solid transparent; border-left: 2903px solid #613AA2; z-index:999} #comision-permanente h2{margin-bottom: 50px;} #comision-permanente h5{margin-bottom: 10px;} #comision-permanente img{margin-bottom: 50px;} #comision-permanente .col1-3{margin-bottom: 30px; text-align: left; padding: 0 10px;} /**** PAGE - GALERÍA ****/ #galeria{position: relative; position: relative; z-index:0; overflow: hidden} #galeria .gallery-box{position: relative; position: relative; z-index:0; cursor: pointer;} #galeria .gallery-box{position: relative; position: relative; z-index:0; cursor: pointer; -webkit-transition: all .4s linear; -moz-transition: all .4s linear; -o-transition: all .4s linear;} #galeria #gallery-box1:hover, #galeria #gallery-box2:hover, #galeria #gallery-box3:hover{background-color: rgba(0,0,0,.8); font-family: serif; padding-top: 250px; opacity: .7; box-sizing: border-box; -webkit-transition: all .4s linear; -moz-transition: all .4s linear; -o-transition: all .4s linear;} #galeria .gallery-box .title-box{position: absolute; z-index:0; cursor: pointer; background: #613AA2; color: #fff; padding: 5px 5px 10px 5px; margin: 50px; bottom: 90px} #galeria .gallery-box .subtitle-box{position: absolute; z-index:0; cursor: pointer; background: #fff; color: #333; padding: 5px 5px 10px 5px; margin: 50px; bottom: 0} #galeria #gallery-box1, #galeria #gallery-box2{height: 650px} #galeria #gallery-box3{height: 450px} #galeria #gallery-box1{background: url(../images/galeria_concurso_internacional.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } #galeria #gallery-box1.gallery-box .title-box{background: #613AA2;} #galeria #gallery-box1.gallery-box .subtitle-box{color: #613AA2;} #galeria #gallery-box2{background: url(../images/galeria_concurso_popular.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #galeria #gallery-box2.gallery-box .title-box{background: #e71d73;} #galeria #gallery-box2.gallery-box .subtitle-box{color: #e71d73;} #galeria #gallery-box3{background: url(../images/galeria_medalla_panoramica.jpg) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;} #galeria #gallery-box3.gallery-box .title-box{background: #e71d73; right: 0} #galeria #gallery-box3.gallery-box .subtitle-box{color: #e71d73; right: 0} /**** PAGE - COMISIÓN PERMANENTE ****/ #la-rosaleda{padding: 150px 0; background: #fff; position: relative; text-align: center; font-size: 18px;} #la-rosaleda:before{content: ''; position: absolute; top: -48px; right: 0; border-top: 50px solid transparent; border-left: 2903px solid #fff; z-index:999} #la-rosaleda:after{content: ''; position: absolute; bottom: -48px; right: 0; border-bottom: 50px solid transparent; border-left: 2903px solid #fff; z-index:999} #la-rosaleda .container-xl{margin-bottom: 100px;} #la-rosaleda .col50{padding: 10px;} #la-rosaleda .container-xl p{text-align: justify;} #la-rosaleda h2{margin-bottom: 20px;} #la-rosaleda span.left{margin: 20px 20px 20px 0; float: left;} #la-rosaleda span.right{margin: 20px 0 20px 20px; float: right;} #la-rosaleda p{margin: 30px; overflow: hidden;} /**** PAGE - COMISIÓN PERMANENTE ****/ #premio-jardin-merito{padding: 150px 0; background: #e71d73; position: relative; text-align: center; color: #fff; position: relative; z-index:9} #premio-jardin-merito:before{content: ''; position: absolute; top: -48px; right: 0; border-top: 50px solid transparent; border-left: 2903px solid #e71d73; z-index:999} #premio-jardin-merito:after{content: ''; position: absolute; bottom: -48px; right: 0; border-bottom: 50px solid transparent; border-left: 2903px solid #e71d73; z-index:999} #premio-jardin-merito .col50{padding: 10px;} #premio-jardin-merito .container-xl p{text-align: justify;} #premio-jardin-merito h2{margin-bottom: 20px;} /****INPUTS****/ input, select{padding: 5px 5px; font-size: 22px; background: #e6e6e6; color: #6a6861; border: 10px solid #fefcf4; font-family: 'Roboto', serif; font-weight: 200; text-align: center;} textarea{padding: 5px 5px; font-size: 22px; background: #e6e6e6; color: #6a6861; border: 10px solid #fefcf4; font-family: 'Roboto', serif; font-size: 28px; font-weight: 200; text-align: center;} input:focus, select:focus, .select:focus, textarea:focus{background: #fefcf4;} button, input[type="button"], input[type="reset"], input[type="submit"], .button{border: 2px solid #fff; color: #e71d73; background: #fff; cursor: pointer; padding: 8px 20px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; text-align: center; font-family: 'Roboto', serif; overflow: visible; display: inline-block;} button:hover,input:hover[type="button"],input:hover[type="reset"],input:hover[type="submit"], .button:hover{background: #613AA2; border: 2px solid #613AA2; color: #fff; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out;} #slidecaption { font-size: 15px !important; padding: 5px 20px 5px 5px !important; line-height: 16px !important; max-width: 1480px; margin: 0 !important; display: flex; height: 100%; align-items: center; } @media (max-width: 1679px) { #slidecaption { max-width: 1280px; } } @media (max-width: 1479px) { #slidecaption { max-width: 1024px; } } @media (max-width: 1200px) { #slidecaption { max-width: 880px; } }