@font-face {
    font-family: 'camptonbold';
    src: url('../fonts/rene_bieder_-_campton_bold-webfont.eot');
    src: url('../fonts/rene_bieder_-_campton_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/rene_bieder_-_campton_bold-webfont.woff2') format('woff2'), url('../fonts/rene_bieder_-_campton_bold-webfont.woff') format('woff'), url('../fonts/rene_bieder_-_campton_bold-webfont.ttf') format('truetype'), url('../fonts/rene_bieder_-_campton_bold-webfont.svg#camptonbold') format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'camptonlight';
    src: url('../fonts/rene_bieder_-_campton_light-webfont.eot');
    src: url('../fonts/rene_bieder_-_campton_light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/rene_bieder_-_campton_light-webfont.woff2') format('woff2'), url('../fonts/rene_bieder_-_campton_light-webfont.woff') format('woff'), url('../fonts/rene_bieder_-_campton_light-webfont.ttf') format('truetype'), url('../fonts/rene_bieder_-_campton_light-webfont.svg#camptonlight') format('svg');
    font-weight: normal;
    font-style: normal
}

.fullbg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto
}

.fullbg_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (min-aspect-ratio:16/9) {
    .fullbg_video {
        height: 300%;
        top: -100%
    }
}

@media (max-aspect-ratio:16/9) {
    .fullbg_video {
        width: 300%;
        left: -100%
    }
}

@media (max-width:767px) {
    .fullbg {
        background: url('template/images/mobile.jpg') center;
        background-size: cover;
        background-repeat: no-repeat
    }

    .fullbg_video {
        display: none
    }
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999999;
    top: 0;
    right: 0;
    background-color: #aad4f1;
    overflow-x: hidden;
    transition: .5s;
    padding-top: 60px;
    text-align: center
}

.sidenav ul {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-250px)
}

.sidenav img {
    margin-bottom: 50px
}

.sidenav a {
    text-decoration: none;
    font-size: 18px;
    color: #5098d2;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    transition: .2s;
    z-index: 999999999
}

.sidenav .closebtn {
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 0;
    font-size: 100px;
    font-weight: 400;
    margin-bottom: 0
}

.sidenav a:hover {
    color: #fff
}

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.clear-grid {
    clear: both;
    float: inherit
}

.row {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto
}

.column,
.columns {
    position: relative;
    padding-left: .9375em;
    padding-right: .9375em;
    float: left
}

.centered {
    margin-left: auto;
    margin-right: auto;
    float: none
}

.fullrow:after,
.fullrow:before,
.row:after,
.row:before {
    display: table;
    clear: both;
    content: " "
}

.pad {
    padding-top: 60px;
    padding-bottom: 60px
}

.pad2 {
    padding-top: 30px;
    padding-bottom: 30px
}

.padt {
    padding-top: 60px
}

.padb {
    padding-bottom: 60px
}

.padb2 {
    padding-bottom: 40px
}

.side_pad {
    padding-left: 30px;
    padding-right: 30px
}

.mt {
    margin-top: 20px
}

.mt2 {
    margin-top: 40px
}

.mb {
    margin-bottom: 20px
}

.mb2 {
    margin-bottom: 40px
}

.mb3 {
    margin-bottom: 60px
}

.tac {
    text-align: center
}

.active {
    color: #aad4f1 !important
}

.bg {
    background: #fff
}

.bg a {
    color: #5098d2
}

.bg a:hover {
    color: #aad4f1 !important
}

.opc {
    opacity: 1 !important
}

.blue2 {
    color: #aad4f1
}

.abs {
    top: 10px !important;
    right: 10px !important
}

.btn {
    font-family: 'Mitr', sans-serif;
    font-weight: bold;
    letter-spacing: .15em;
    border-radius: 15px;
    border-top-right-radius: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: table;
    margin: 0 auto;
    border: solid 3px #fff;
    color: #fff;
    text-transform: uppercase;
    font-size: 10px
}

.btn:hover {
    background-color: #fff;
    color: #5098d2
}

.btn2 {
    background: #5098d2;
    display: table;
    font-weight: bold;
    width: auto;
    letter-spacing: .15em;
    border-radius: 15px;
    border-top-right-radius: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
    cursor: pointer;
    background: #aad4f1;
    border: solid 4px #fff;
    color: #fff
}

.btn2:hover {
    background: #5098d2;
    border: solid 4px #5098d2;
    color: #fff
}

.trans {
    transition: ease-in-out .2s;
    -moz-transition: ease-in-out .2s;
    -webkit-transition: ease-in-out .2s;
    -ms-transition: ease-in-out .2s;
    -o-transition: ease-in-out .2s
}

.nested {
    padding: 0 !important
}

.gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .7;
    z-index: 0
}

.gradientboy {
    background: #2d92e3;
    background-image: linear-gradient(to bottom left, #2d92e3 10%, #fff 70%);
    background-image: -moz-linear-gradient(to bottom left, #5098d2 10%, #fff 70%);
    background-image: -webkit-linear-gradient(to bottom left, #5098d2 10%, #fff 70%);
    background-image: -o-linear-gradient(to bottom left, #5098d2 10%, #fff 70%);
    background-image: -ms-linear-gradient(to bottom left, #5098d2 10%, #fff 70%)
}

.gradientgirl {
    background: #eb5962;
    background-image: linear-gradient(to bottom left, #eb5962 10%, #fff 70%);
    background-image: -moz-linear-gradient(to bottom left, #eb5962 10%, #fff 70%);
    background-image: -webkit-linear-gradient(to bottom left, #eb5962 10%, #fff 70%);
    background-image: -o-linear-gradient(to bottom left, #eb5962 10%, #fff 70%);
    background-image: -ms-linear-gradient(to bottom left, #eb5962 10%, #fff 70%)
}

.wall1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #5098d2;
    opacity: .8
}

.wall2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eb5962;
    opacity: .9
}

body {
    font-family: 'Mitr', sans-serif, sans-serif;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: 2px
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 14px;
    padding-bottom: 7px;
    z-index: 9999;
    box-shadow: 0 2px 15px 0 rgba(118, 118, 118, 0.2)
}

header img {
    width: 65px
}

header nav {
    display: none;
    background: #fff
}

header nav ul li {
    list-style: none;
    display: table;
    text-transform: uppercase;
    font-weight: bold
}

header nav ul li a {
    color: #fff
}

header .menu_btn img {
    width: 40px;
    right: 30px;
    top: 30px;
    position: absolute
}

footer {
    background-color: #5098d2;
    color: #fff;
    text-align: center;
    text-transform: uppercase
}

footer p {
    font-weight: bold;
    color: #aad4f1;
    font-size: 12px
}

footer p a {
    text-decoration: underline
}

footer p a:hover {
    color: #aad4f1
}

a {
    cursor: pointer;
    text-decoration: none;
    color: #fff
}

h1 {
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3em;
    color: #5098d2;
    font-size: 22px
}

h2 {
    color: #5098d2;
    text-transform: uppercase
}

h3 {
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    margin-top: 5px;
    color: #aad4f1
}

h4 {
    font-size: 13px;
    letter-spacing: 1px
}

p {
    text-align: center;
    font-size: 12px;
    width: 90%;
    margin: 0 auto;
    color: #5098d2
}

input,
textarea {
    font-family: 'Mitr', sans-serif;
    min-height: 30px;
    width: 95%;
    padding: 12px;
    background: #aad4f1;
    border: none;
    color: #fff;
    margin: 0 auto;
    display: table;
    text-align: center;
    -webkit-appearance: none;
    border: solid 3px #5098d2;
    border-radius: 15px
}

input:focus,
textarea:focus {
    background: #fff;
    border: solid 4px #fff;
    color: #5098d2
}

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none
}

input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none
}

#content {
    background: #fff
}

#story {
    background: #eb5962;
    border-radius: 15px;
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 999999;
    padding: 35px;
    height: 400px;
    top: 50%;
    transform: translateY(-200px);
    width: 95%;
    display: none;
    overflow-y: scroll
}

#story h3 {
    margin-bottom: 15px;
    text-align: left;
    font-size: 13px
}

#story p {
    color: #fff;
    text-align: left;
    width: 100%;
    font-size: 12px
}

#story a {
    color: #aad4f1;
    text-decoration: underline;
    margin-bottom: 35px
}

#story a:hover {
    color: #fff
}

#story .btn {
    color: #fff;
    text-decoration: none
}

#story .btn:hover {
    color: #eb5962
}

#bemvindo {
    height: 100vh;
    position: relative
}

#bemvindo #slogan {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-130px);
    width: 80%
}

#bemvindo #slogan h1 {
    margin-top: 20px;
    color: #fff
}

#bemvindo #slogan img {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    display: table
}

#quemsomos {
    background: #fff
}

#quemsomos p {
    line-height: 1.8em
}

#quemsomos .btn {
    border: solid 3px #5098d2;
    color: #5098d2
}

#quemsomos .btn:hover {
    background: #5098d2;
    color: #fff
}

#insuflaveis {
    background-image: url(template/images/selva.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    position: relative
}

#insuflaveis h1 {
    color: #fff
}

#insuflaveis img {
    border: solid 8px #fff
}

#insuflaveis img:hover {
    opacity: .8
}

#insuflaveis span img {
    border: none;
    margin-top: -2px
}

#insuflaveis .inf_cont {
    opacity: .85;
    background: #fff;
    position: relative;
    margin-top: -78px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    cursor: pointer;
    border-radius: 15px;
    border-top-right-radius: 0
}

#insuflaveis .inf_cont:hover {
    opacity: 1
}

#insuflaveis .inf_cont:hover h2 {
    transform: translatex(10px) !important
}

#insuflaveis .inf_cont h2 {
    font-size: 13px;
    letter-spacing: 2px
}

#insuflaveis .inf_cont h4 {
    position: absolute;
    top: 0;
    right: 0;
    background: #eb5962;
    color: #fff;
    padding: 15px;
    font-weight: 400;
    border-radius: 15px;
    border-top-right-radius: 0
}

#insuflaveis .inf_cont p {
    display: none;
    text-align: left;
    width: 100%;
    color: #5098d2;
    padding: 20px;
    margin-top: 20px;
    font-size: 12px
}

#insuflaveis .inf_cont p span {
    color: #eb5962;
    text-transform: uppercase;
    font-size: 9px
}

#insuflaveis .info {
    font-size: 13px;
    color: #fff;
    position: relative
}

#insuflaveis .info2 span {
    text-decoration: underline
}

#servicos_adicionais ul {
    text-align: center
}

#insuflaveis .info2 {
    font-size: 33px;
    color: #ffffff;
    position: relative
}

#insuflaveis .info2 span {
    text-decoration: underline
}

#servicos_adicionais ul {
    text-align: center
}

#servicos_adicionais ul li {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    list-style: none;
    background: #5098d2;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 12px;
    color: #fff;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 15px
}

#promocoes {
    background-image: url(template/images/leao2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    position: relative
}

#promocoes h1 {
    color: #fff
}

#promocoes h2 {
    text-align: center;
    line-height: 1.3em;
    font-size: 11px
}

#promocoes p {
    color: #fff
}

#promocoes a:hover {
    color: #aad4f1
}

#promocoes_detail #promo2,
#promocoes_detail #promo3 {
    display: none
}

#promocoes_detail h2 {
    color: #eb5962;
    line-height: 1.3em;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 22px
}

#promocoes_detail p {
    color: #eb5962;
    text-align: left
}

#reservas {
    background: #fff
}

#reservas h1 {
    color:  #5098d2;
}

#reservas h3 {
    color:  #5098d2;
}

#reservas h4 {
    text-transform: uppercase;
    text-align: center;
    color: #5098d2;
    margin-bottom: 7px
}

#reservas p {
    color:  #5098d2;
}

#reservas #form-messages {
    color:  #5098d2;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 12px;
    width: 95%;
    margin-left: auto;
    margin-right: auto
}

#reservas .error {
    background: #5098d2;
    border-radius: 15px;
    padding: 20px;
    opacity: .5
}

#reservas .success {
    border-radius: 15px;
    padding: 20px;
    background: #fff;
    color: #5098d2 !important
}

#contactos h2 {
    
    color: #5098d2;
    line-height: 1.8em;
    text-align: center;
    font-size: 12px;
    font-weight: 400
}

#contactos h2 a {
    color: #5098d2;
    text-decoration: underline
}

#contactos h2 a:hover {
    color: #aad4f1
}

.m12 {
    width: 100%
}

.m11 {
    width: 91.666663%
}

.m10 {
    width: 83.33%
}

.m9 {
    width: 74.999997%
}

.m8 {
    width: 66.66666664%
}

.m7 {
    width: 58.333%
}

.m6 {
    width: 50%
}

.m5 {
    width: 41.6665%
}

.m4 {
    width: 33.33%
}

.m3 {
    width: 24.99%
}

.m2 {
    width: 16.66666%
}

.m1 {
    width: 8.33%
}

@media (min-width:720px) {
    .pad {
        padding-top: 75px;
        padding-bottom: 75px
    }

    .padt {
        padding-top: 75px
    }

    .padb {
        padding-bottom: 75px
    }

    .pad2 {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .mt {
        margin-top: 40px
    }

    .btn {
        font-size: 12px
    }

    header img {
        width: 100px
    }

    h1 {
        font-size: 28px
    }

    h3 {
        font-size: 18px
    }

    p {
        font-size: 15px
    }

    #slogan {
        transform: translateY(-160px) !important
    }

    #slogan img {
        width: 200px !important
    }

    #slogan h1 {
        font-size: 45px
    }

    #story {
        height: auto;
        width: 80%;
        padding: 45px;
        transform: translateY(-320px)
    }

    #story a {
        margin-bottom: 0
    }

    #promocoes h2 {
        font-size: 24px
    }

    .t12 {
        width: 100%
    }

    .t11 {
        width: 91.666663%
    }

    .t10 {
        width: 83.33%
    }

    .t9 {
        width: 74.999997%
    }

    .t8 {
        width: 66.66666664%
    }

    .t7 {
        width: 58.333%
    }

    .t6 {
        width: 50%
    }

    .t5 {
        width: 41.6665%
    }

    .t4 {
        width: 33.33%
    }

    .t3 {
        width: 24.99%
    }

    .t2 {
        width: 16.66666%
    }

    .t1 {
        width: 8.33%
    }
}

@media only screen and (min-width:1024px) {
    .opc {
        opacity: .85 !important
    }

    .abs {
        top: 0 !important;
        right: 0 !important
    }

    .sidenav {
        display: none
    }

    #menu {
        display: block;
        background: none
    }

    #menu ul {
        text-align: right;
        margin-top: 37px
    }

    #menu ul li {
        display: inline-block;
        margin-left: 15px;
        transition: ease-in-out .1s;
        -moz-transition: ease-in-out .1s;
        -webkit-transition: ease-in-out .1s;
        -ms-transition: ease-in-out .1s;
        -o-transition: ease-in-out .1s
    }

    #menu ul li:hover a {
        color: #5098d2
    }

    .menu_btn {
        display: none
    }

    #story {
        width: 65%;
        padding: 50px;
        height: 550px;
        transform: translateY(-220px)
    }

    #story a {
        margin-bottom: 30px
    }

    #insuflaveis .inf_cont {
        opacity: 1
    }

    #insuflaveis .inf_cont h4 {
        top: 10px;
        right: 10px
    }

    #insuflaveis .inf_cont p {
        display: block
    }

    #contactos h2 {
        font-size: 15px
    }

    .tl12 {
        width: 100%
    }

    .tl11 {
        width: 91.666663%
    }

    .tl10 {
        width: 83.33%
    }

    .tl9 {
        width: 74.999997%
    }

    .tl8 {
        width: 66.66666664%
    }

    .tl7 {
        width: 58.333%
    }

    .tl6 {
        width: 50%
    }

    .tl5 {
        width: 41.6665%
    }

    .tl4 {
        width: 33.33%
    }

    .tl3 {
        width: 24.99%
    }

    .tl2 {
        width: 16.66666%
    }

    .tl1 {
        width: 8.33%
    }
}

@media only screen and (min-width:1200px) {
    .pad {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .padt {
        padding-top: 75px
    }

    .padb {
        padding-bottom: 75px
    }

    .mt {
        margin-top: 40px
    }

    .btn {
        font-size: 14px
    }

    body {
        max-width: 1920px;
        margin: 0 auto
    }

    #slogan {
        transform: translateY(-185px) !important
    }

    #slogan h1 {
        font-size: 60px
    }

    #story {
        width: 900px;
        height: auto;
        transform: translateY(-240px);
        overflow: inherit
    }

    #story a {
        margin-bottom: 0
    }

    .d12 {
        width: 100%
    }

    .d11 {
        width: 91.666663%
    }

    .d10 {
        width: 83.33%
    }

    .d9 {
        width: 74.999997%
    }

    .d8 {
        width: 66.66666664%
    }

    .d7 {
        width: 58.333%
    }

    .d6 {
        width: 50%
    }

    .d5 {
        width: 41.6665%
    }

    .d4 {
        width: 33.33%
    }

    .d3 {
        width: 24.99%
    }

    .d2 {
        width: 16.66666%
    }

    .d1 {
        width: 8.33%
    }
}

@media only screen and (min-width:1440px) {
    #story {
        width: 700px;
        transform: translateY(-290px)
    }
}

img,
img.responsive,
img.scale {
    max-width: 100%;
    height: auto
}