html, body, div, span, applet, object, iframe, img,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font,ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
center, i{font-family: 'Manrope', sans-serif;font-weight: 300; border:0;outline:0;color:rgba(0,22,66,1);text-decoration:none;font-size:14px; line-height: 1.2em; box-sizing: border-box}
*{margin:0;padding:0}
body{line-height:1; background-color: rgba(255,255,255,1)}
:focus{outline:0}
ol, ul{list-style:none}
table{border-collapse:collapse;border-spacing:0;}
blockquote, q{quotes:"" ""}
hr{border:0;color:#FFFFFF;}
blockquote:before, blockquote:after, q:before, q:after{content:""}
strong{color:#444;font-weight:700;}
html,body{width:100%;margin:0;padding:0; overflow-x:hidden;}
::placeholder {color: rgba(100,100,100,1)}
pre{color: white}
.negrita{font-weight: bold!important}
.flotadoderecha{float: right}
.textoizquiera{text-align: left}
.textoderecha{text-align: right}
.flexat{display: inline-flex!important; width: 100%; flex-wrap: wrap;}
.flexat.dalt{align-items: flex-start}
.flexat.abaix{align-items: flex-end}
.flexat.centre{align-items: center}
.flexat.mismaaltura{align-items: stretch;}
.flexat.inici{justify-content: flex-start}
.flexat.final{justify-content: flex-end}
.flexat.centrat{justify-content: center}
.flexat.total{justify-content: space-between}
.flexat250{width: 50%}
.flexat2{width: 45%}
.flexat3{width: 31%}
.flexat4{width: 23.7%; margin-right: 1.6%;}
.flexat4:nth-child(4n+0){margin-right: 0%;}
.flexat5{width: 18%; margin-right: 2%}
.flexat8{width: 11%}
.flexat23070:nth-child(1){width: 30%}
.flexat23070:nth-child(2){width: 70%}
.flexat27030:nth-child(1){width: 70%}
.flexat27030:nth-child(2){width: 30%}
.flexat12:nth-child(1){width: 30%}
.flexat12:nth-child(2){width: 70%}
.flexat5resto{width: 80%}
.flexat1{width: 100%}
.flexat22080:nth-child(1){width: 20%; position: fixed; top: 220px; left: 40px;}
.flexat22080:nth-child(2){margin-left: 25%; width: 75%; padding-top: 200px}
.margintop0{margin-top: 0px!important}
.marginbottom0{margin-bottom: 0px!important}
.margintop20{margin-top: 20px}
.margintop0{margin-top: 0px!important}
.margintop40{margin-top: 40px!important}
.margintop80{margin-top: 80px!important}
.margintop200{margin-top: 200px!important}
.marginbottom20{margin-bottom: 20px}
.marginbottom10{margin-bottom: 10px!important}
.marginbottom40{margin-bottom: 40px!important}
.padding20forzado{padding: 20px!important}
.paddingleft20{padding-left: 20px!important}
.ancho100{width: 100%!important;}
.bloque{display: block}
.flexat2header:nth-child(1){width: 250px}
.flexat2header:nth-child(2){width: calc(100% - 250px)}
a:hover{text-decoration: none!important;}

@keyframes headanim00 { 0% { opacity: 0; top: -100px } 100% { opacity: 1; top: 0px } }
header{position: fixed; top: 0; left: 0; width: calc(100% - 40px)!important; z-index: 14000; padding: 20px; animation: headanim00 2s;}
header .logotipo{width: 250px; height: auto; display: block}
.menu{  display: inline-block; margin-left: 10px}
.menu li{display: inline-block; padding: 10px 20px 10px 20px;margin-left: 10px; border-radius: 10px;}
.menu .apretat{font-weight: bold}
.menulogin > li:nth-child(2), .menulogin > li:nth-child(3), .menulogin > li:nth-child(4){background-color: rgba(255,255,255,0.9)}
.menulogin > li:nth-child(2) a, .menulogin > li:nth-child(3) a, .menulogin > li:nth-child(4) a{color: black}
{color: black!important;}
.menulogin > li:nth-child(1), .menulogin > li:nth-child(5){background-color: rgba(149,31,32,0.9)}
.menuprincipal li a{color: black;}
.menulogin li a{color: white}

.videohome{width: 100%; height: 100vh}
.videohome img{object-fit: cover;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.videohome #myVideo{object-fit: cover;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.maskvideo{object-fit: cover;width: 100%;height: 100%;position: absolute;top: 0;left: 0; z-index: 2; background-color: rgba(0,0,0,0.6)}
@keyframes headanim01 { 0% { opacity: 0; left: -100px } 50% { opacity: 0; left: -100px } 100% { opacity: 1; left: 20px } }
.claim{animation: headanim01 4s; position: absolute; left: 20px; top: 40%; font-size: 30px; color: white; z-index: 3; max-width: 600px; line-height: 1.4em; font-weight: 400;}
.claim span{font-size: 40px; color: white;margin-bottom: 40px; font-weight: bold; display: block;line-height: 1.4em;}

.primero{min-height: 800px; padding: 80px 80px 80px 80px; background: url(images/primero.jpg) center center no-repeat; background-position: top center; background-size: cover}
.primero h2{color: rgba(149,31,32,0.9); font-weight: 400; font-size: 32px; line-height: 1.4em}
.primero h3{font-weight: bold; font-size: 16px}
.segundo{padding: 80px; background: #ecebe9}
.segundo strong{font-weight: bold; font-size: 22px; margin-bottom: 20px; display: block}
.segundo ul{list-style-type: disc; padding-left: 40px}
.segundo li{font-size: 16px; line-height: 1.8em}

.tercero{padding: 0px 80px 0px 80px; height: 100vh; background: rgb(149,31,32); background: linear-gradient(270deg, rgba(149,31,32,0.9038209033613446) 0%, rgba(149,31,32,1) 100%); position: relative}
.tercero .info{top: 30vh; position: absolute; width: 40%; left: 60px}
.tercero .foto{top: 30vh; position: absolute; width: 40%; left: 50%}

.cuarto{padding: 0px 80px 0px 80px; height: 100vh; background: rgb(149,31,32); background: linear-gradient(270deg, rgba(149,31,32,0.9038209033613446) 0%, rgba(149,31,32,1) 100%); position: relative}
.cuarto .info{top: 30vh; position: absolute; width: 40%; left: 50%}
.cuarto .foto{top: 30vh; position: absolute; width: 40%; left: 60px}

.tercero .info h2, .cuarto .info h2{font-weight: bold; color: white; font-size: 50px; line-height: 1.4em; margin-bottom: 60px; display: block}
.tercero .info ul, .cuarto .info ul{list-style-type: "- "; padding-left: 10px }
.tercero .info li, .cuarto .info li{font-size: 20px; color: white; line-height: 1.4em}
.tercero .foto img, .cuarto .foto img{width: 100%; height: auto}

.elgrandia{padding: 80px 80px 80px 80px;}
.elgrandia h2{font-size: 26px; font-weight: 400; line-height: 1.2em;display: block}
.elgrandia h2 span{font-weight: bold;font-size: 60px; line-height: 1.4em;display: block}

.planesyprecios{padding: 80px 80px 80px 80px;}
.planesyprecios h2{font-size: 26px; font-weight: 400; line-height: 1.2em;display: block; max-width: 500px;}
.planesyprecios h2 span{font-weight: bold;font-size: 60px; line-height: 1.2em;display: block; margin-bottom: 20px}

.planes{width: 100%; margin-top: 120px}
.planes .plan{width: 320px; margin-left: 40px; margin-right: 40px; border-radius: 15px; border: 2px solid black; padding: 40px; background: #951f20}
.planes .plan h2{color: white; font-size: 32px; font-weight: bold; text-align: center; display: block; margin-bottom: 40px}
.planes .plan .precio{color: white; font-size: 50px; font-weight: bold; text-align: center; display: block; margin-bottom: 20px}
.planes .plan .gente{color: white; font-size: 22px; text-align: center; display: block; margin-bottom: 60px}
.planes .plan ul{padding-left: 30px; }
.planes .plan ul li{color: white; line-height: 1.8em; font-size: 16px}
.plan span{display: inline-block; margin-right: 10px; width: 15px; text-align: center; color: white; font-size: 16px}
.plan span img{width: 15px; height: 15px;}
.plan a{margin-top: 40px; text-align: center; display: block; background-color: white; border-radius: 10px; padding: 10px; font-weight: bold}

.contactar{padding: 80px 80px 80px 80px;}
.contactar h2{font-size: 26px; font-weight: 400; line-height: 1.2em;display: block; max-width: 500px;}
.contactar h2 span{font-weight: bold;font-size: 60px; line-height: 1.2em;display: block; margin-bottom: 20px}
.detallecontacto{margin-top: 40px;}
.detallecontacto > div:nth-child(1){width: 500px;}
.detallecontacto > div:nth-child(2){width: calc(100% - 600px);}
.detallecontacto iframe{margin-bottom: 20px;}
.detallecontacto a{margin-bottom: 20px; font-size: 16px; display: block; line-height: 1.4em}

.oculto{display: none}
.visible{display: inherit}

.stripe-button-el{width: 100%!important; background-color: white!important; margin-top: 20px; background-image: none!important; }
.stripe-button-el span{width: 100%!important; color: black!important; background: none!important; text-shadow: none!important}

.formulario{ width: 600px;}
.formulario input, .formulario textarea, .formulario select{padding: 10px; box-sizing: border-box; border-radius: 8px; border: 1px solid black; width: 100%; margin-bottom: 20px; font-family: 'Manrope', sans-serif; font-size: 14px}
.formulario input[type = "checkbox"]{width: 30px; display: inline-block; margin-right: 10px}
.formulario input[type = "submit"]{font-weight: bold}

.fonscrear{box-sizing: border-box;width: 100%; height: 100vh; padding: 120px 60px 60px 60px; background: url(images/fonscrear.jpg) center center no-repeat; background-size: cover;display: inline-flex;justify-content: center;align-items: center;}
.contenidoregistro{box-sizing: border-box; background-color: rgba(255,255,255,0.85); width: 100%; border-radius: 20px; padding: 80px 120px 80px 120px; text-align: center}
.contenidoregistro .formulario{margin: 0 auto; width: 100%!important; text-align: left}
.contenidoregistro h2{margin-bottom: 40px; text-align: center}
.contenidoregistro .formulario h3{margin-bottom: 20px; text-align: center; font-size: 18px}
.contenidoregistro .enviar2, .contenidoregistro .enviar {width: 300px; margin: 0 auto; margin-top: 40px;text-align: center;display: block;background-color: white;border-radius: 10px;padding: 10px;font-weight: bold; cursor: pointer;}
.formulario #t1{display: inline-block; width: 50%; margin-right: 2%}
.formulario #t2{display: inline-block; width: 47%;}

footer{background: #951f20; margin-top: 60px}
footer .footerup{padding: 40px 0px 40px 0px; width: 1200px; margin: 0 auto;}
footer .footerup > div{width: 33%; display: inline-block; vertical-align: top}
footer .footerup h2{color: white; margin-bottom: 10px}
footer .footerup li, footer .footerup li a{color: white; line-height: 1.4em}
footer .footerdown{background: white!important; padding: 10px; text-align: center}
footer .footerdown li{display: inline-block; margin-left: 15px; margin-right: 15px}


.menumobil {display: none; cursor: pointer; padding: 0; transition: opacity 0.5s ease-in-out; transition: background 0.1s ease-in-out; position: absolute; top: 20px; right: 20px; z-index: 4;}
.menumobil > .bar1, .menumobil > .bar2 , .menumobil > .bar3 {width: 30px;height: 3px;background-color: #FFF;margin: 6px 0;transition: 0.4s;}
header.actiu .bar1, header.actiu .bar2, header.actiu .bar3{background-color: #000;} 
.menumobil:hover > .bar1, .menumobil:hover > .bar2, .menumobil:hover > .bar3{background-color: #999}
.change.bar1 { -webkit-transform: rotate(-45deg) translate(-4px, 8px) ;transform: rotate(-45deg) translate(-4px, 8px) ;}
.change.bar2 {opacity: 0!important;}
.change.bar3 { -webkit-transform: rotate(45deg) translate(-5px, -9px) ;transform: rotate(45deg) translate(-5px, -9px) ;}

.primerog{width: 37%; padding-right: 5%; margin-right: 5%; margin-top: 40px; border-right: 1px solid rgba(149,31,32,0.9)}
.primerog h3, .segundog h3, .tercerog h3{text-align: left!important; font-size: 16px!important; margin-bottom: 15px!important}
.segundog{width: 37%; padding-right: 5%; margin-right: 5%; margin-top: 40px; border-right: 1px solid rgba(149,31,32,0.9)}
.tercerog{width: 15%; margin-top: 40px}



@media screen 
and (max-width : 1367px) 
and (min-width : 1000px) 
{
   footer .footerup{width: calc(100% - 40px)}
   .contenidoregistro{padding: 60px 30px 40px 30px;}
   .contenidoregistro h2 {margin-bottom: 20px;}
   .planesyprecios h2 span, .contactar h2 span{font-size: 44px}
   .planesyprecios, .contactar{padding: 40px}
   .planes {margin-top: 60px;}
   .planes .plan {width: 280px;margin-left: 20px;margin-right: 20px;padding: 20px;}
   .planes .plan:nth-child(1){margin-left: 0px;}
   .planes .plan:nth-child(3){margin-right: 0px;}
   .detallecontacto > div:nth-child(1){width: 45%;}
   .detallecontacto > div:nth-child(2){width: 50%;}
   .formulario{width: 100%}
   .planes .plan{width: 280px;}
}

@media screen 
and (max-width : 999px) 
{
    .planesyprecios, .contactar{padding: 20px}
    .planes .plan{width: 100%; margin-bottom: 40px; margin-left: 0; margin-right: 0}
    .menumobil {display: block;}
    .contenidomenumovil {display: none;margin-top: 20px;width: 250px;float: right;}
    .menulogin{margin-top: 20px}
    .flexat2header:nth-child(2){width: 100%}
    .menu{margin-left: 0; display: block}
    .menu li {display: block;margin-right: 0px;margin-left: 0px;margin-bottom: 15px; margin-top: 15px}
    .claim{max-width: 90%;font-size: 22px;}
    .claim span {font-size: 28px;}
    .primero{padding: 40px;min-height: auto; background: none!important;}
    .segundo, .elgrandia{padding: 20px}
    .segundo strong {font-size: 16px;}
    .segundo ul {padding-left: 18px;}
    .planes{margin-top: 40px}
    .formulario{width: 100%;}
    li a{font-size: 18px}
    footer {margin-top: 20px;}
    .detallecontacto{margin-top: 40px!important}
    .detallecontacto > div:nth-child(1){width: 100%; margin-bottom: 20px}
    .detallecontacto > div:nth-child(2){width: 100%;}
    .tercero, .cuarto {padding: 20px 20px 20px 20px;height: auto;}
    .tercero .foto{display: none;}
    .cuarto .foto {top: auto;position: relative;width: 100%;left: auto;}
    .cuarto .info {top: auto;position: relative;width: 100%;left: 0;}
    .elgrandia h2 span, .planesyprecios h2 span, .contactar h2 span{font-size: 40px; margin-bottom: 20px}
    .planesyprecios h2, .contactar h2{max-width: auto; font-size: 20px}
    .tercero .info{left: 0px; width: 100%; top: 0px;position: relative;}
    .tercero .info h2, .cuarto .info h2 {font-size: 22px;line-height: 1.4em; margin-bottom: 30px}
    .tercero .info li, .cuarto .info li {font-size: 16px;line-height: 1.8em;}
    footer .footerup{width: calc(100% - 40px)}
    footer .footerup > div {width: 100%; margin-bottom: 20px}
    footer .footerdown {padding: 20px;text-align: left;}
    footer .footerdown li, footer .footerdown li a {display: block;margin-left: 0;margin-right: 0;margin-bottom: 10px;font-size: 14px!important;}
    .flexat{box-sizing: border-box!important;}
    header{width: calc(100%)!important;}
    .fonscrear{height: auto;padding: 100px 20px 60px 20px;}
    .contenidoregistro{padding: 20px}
    .primerog {width: 100%;padding-right: 0;margin-right: 0;margin-top: 40px;border-right: 0px solid rgba(149, 31, 32, 0.9);}
    .segundog {width: 100%;padding-right: 0;margin-right: 0;margin-top: 40px;border-right: 0px solid rgba(149, 31, 32, 0.9);}
    .tercerog {width: 100%;margin-top: 40px;}
}