/* ======================================================================================================================== RESET CSS ======================================================================================================================== Bootstrap Reboot v4.4.1 (https://getbootstrap.com/) */ *,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important} /* ======================================================================================================================== GRID ======================================================================================================================== Grid nativo basado en la terminología Bootstrap */ .row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0 var(--10px); } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { position: relative; width: 100%; min-height: 1px; grid-column: span 12; } .col-1 { grid-column: span 1 } .col-2 { grid-column: span 2 } .col-3 { grid-column: span 3 } .col-4 { grid-column: span 4 } .col-5 { grid-column: span 5 } .col-6 { grid-column: span 6 } .col-7 { grid-column: span 7 } .col-8 { grid-column: span 8 } .col-9 { grid-column: span 9 } .col-10 { grid-column: span 10 } .col-11 { grid-column: span 11 } .col-12 { grid-column: span 12 } @media (min-width: 767px) { .col-sm-1 { grid-column: span 1 } .col-sm-2 { grid-column: span 2 } .col-sm-3 { grid-column: span 3 } .col-sm-4 { grid-column: span 4 } .col-sm-5 { grid-column: span 5 } .col-sm-6 { grid-column: span 6 } .col-sm-7 { grid-column: span 7 } .col-sm-8 { grid-column: span 8 } .col-sm-9 { grid-column: span 9 } .col-sm-10 { grid-column: span 10 } .col-sm-11 { grid-column: span 11 } .col-sm-12 { grid-column: span 12 } } @media (min-width: 1025px) { .col-md-1 { grid-column: span 1 } .col-md-2 { grid-column: span 2 } .col-md-3 { grid-column: span 3 } .col-md-4 { grid-column: span 4 } .col-md-5 { grid-column: span 5 } .col-md-6 { grid-column: span 6 } .col-md-7 { grid-column: span 7 } .col-md-8 { grid-column: span 8 } .col-md-9 { grid-column: span 9 } .col-md-10 { grid-column: span 10 } .col-md-11 { grid-column: span 11 } .col-md-12 { grid-column: span 12 } } @media (min-width: 1920px) { .col-lg-1 { grid-column: span 1 } .col-lg-2 { grid-column: span 2 } .col-lg-3 { grid-column: span 3 } .col-lg-4 { grid-column: span 4 } .col-lg-5 { grid-column: span 5 } .col-lg-6 { grid-column: span 6 } .col-lg-7 { grid-column: span 7 } .col-lg-8 { grid-column: span 8 } .col-lg-9 { grid-column: span 9 } .col-lg-10 { grid-column: span 10 } .col-lg-11 { grid-column: span 11 } .col-lg-12 { grid-column: span 12 } } .column-span-2 { grid-column: span 2; } .column-span-3 { grid-column: span 3; } .column-span-4 { grid-column: span 4; } .column-span-5 { grid-column: span 5; } .column-span-6 { grid-column: span 6; } .column-span-7 { grid-column: span 7; } .column-span-8 { grid-column: span 8; } .column-span-9 { grid-column: span 9; } .column-span-10 { grid-column: span 10; } .column-span-11 { grid-column: span 11; } .column-span-12 { grid-column: span 12; } .row-span-2 { grid-row: span 2; } .row-span-3 { grid-row: span 3; } .row-span-4 { grid-row: span 4; } .row-span-5 { grid-row: span 5; } .row-span-6 { grid-row: span 6; } .row-span-7 { grid-row: span 7; } .row-span-8 { grid-row: span 8; } .row-span-9 { grid-row: span 9; } .row-span-10 { grid-row: span 10; } .row-span-11 { grid-row: span 11; } .row-span-12 { grid-row: span 12; } /* ======================================================================================================================== TIPOGRAFÍA ======================================================================================================================== Definimos todas las fuentes que se han de cargar en el entorno */ /* TIPOGRAFÍA > MONTSERRAT ====================================================================================================================== https://fonts.google.com/specimen/Montserrat (tipografía oficial) https://google-webfonts-helper.herokuapp.com/fonts/montserrat (decargada en todos los formatos el 22/11/2017) */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), url('../fonts/montserrat-v12-latin-regular.woff') format('woff') } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url('../fonts/montserrat-v12-latin-600.woff2') format('woff2'), url('../fonts/montserrat-v12-latin-600.woff') format('woff') } /* TIPOGRAFÍA > FONT AWESOME ====================================================================================================================== Font Awesome Pro 5.11.2 - https://fontawesome.com */ @font-face { font-family: 'Font Awesome 5 Pro'; font-style: normal; font-weight: 400; src: url('../fonts/fa-regular-400.woff2') format('woff2'), url('../fonts/fa-regular-400.woff') format('woff') } .fa,.fab,.fal,.far,.fas, .fad { font-family: 'Font Awesome 5 Pro'; font-weight: 400; } .fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-abacus:before{content:"\f640"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acorn:before{content:"\f6ae"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adobe:before{content:"\f778"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-alarm-clock:before{content:"\f34e"}.fa-alarm-exclamation:before{content:"\f843"}.fa-alarm-plus:before{content:"\f844"}.fa-alarm-snooze:before{content:"\f845"}.fa-album:before{content:"\f89f"}.fa-album-collection:before{content:"\f8a0"}.fa-algolia:before{content:"\f36c"}.fa-alicorn:before{content:"\f6b0"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-align-slash:before{content:"\f846"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-amp-guitar:before{content:"\f8a1"}.fa-analytics:before{content:"\f643"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angel:before{content:"\f779"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-crate:before{content:"\f6b1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-alt-down:before{content:"\f354"}.fa-arrow-alt-from-bottom:before{content:"\f346"}.fa-arrow-alt-from-left:before{content:"\f347"}.fa-arrow-alt-from-right:before{content:"\f348"}.fa-arrow-alt-from-top:before{content:"\f349"}.fa-arrow-alt-left:before{content:"\f355"}.fa-arrow-alt-right:before{content:"\f356"}.fa-arrow-alt-square-down:before{content:"\f350"}.fa-arrow-alt-square-left:before{content:"\f351"}.fa-arrow-alt-square-right:before{content:"\f352"}.fa-arrow-alt-square-up:before{content:"\f353"}.fa-arrow-alt-to-bottom:before{content:"\f34a"}.fa-arrow-alt-to-left:before{content:"\f34b"}.fa-arrow-alt-to-right:before{content:"\f34c"}.fa-arrow-alt-to-top:before{content:"\f34d"}.fa-arrow-alt-up:before{content:"\f357"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-from-bottom:before{content:"\f342"}.fa-arrow-from-left:before{content:"\f343"}.fa-arrow-from-right:before{content:"\f344"}.fa-arrow-from-top:before{content:"\f345"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-square-down:before{content:"\f339"}.fa-arrow-square-left:before{content:"\f33a"}.fa-arrow-square-right:before{content:"\f33b"}.fa-arrow-square-up:before{content:"\f33c"}.fa-arrow-to-bottom:before{content:"\f33d"}.fa-arrow-to-left:before{content:"\f33e"}.fa-arrow-to-right:before{content:"\f340"}.fa-arrow-to-top:before{content:"\f341"}.fa-arrow-up:before{content:"\f062"}.fa-arrows:before{content:"\f047"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-arrows-h:before{content:"\f07e"}.fa-arrows-v:before{content:"\f07d"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-atom-alt:before{content:"\f5d3"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-axe:before{content:"\f6b2"}.fa-axe-battle:before{content:"\f6b3"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backpack:before{content:"\f5d4"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-badge:before{content:"\f335"}.fa-badge-check:before{content:"\f336"}.fa-badge-dollar:before{content:"\f645"}.fa-badge-percent:before{content:"\f646"}.fa-badge-sheriff:before{content:"\f8a2"}.fa-badger-honey:before{content:"\f6b4"}.fa-bags-shopping:before{content:"\f847"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ball-pile:before{content:"\f77e"}.fa-ballot:before{content:"\f732"}.fa-ballot-check:before{content:"\f733"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-banjo:before{content:"\f8a3"}.fa-barcode:before{content:"\f02a"}.fa-barcode-alt:before{content:"\f463"}.fa-barcode-read:before{content:"\f464"}.fa-barcode-scan:before{content:"\f465"}.fa-bars:before{content:"\f0c9"}.fa-baseball:before{content:"\f432"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-basketball-hoop:before{content:"\f435"}.fa-bat:before{content:"\f6b5"}.fa-bath:before{content:"\f2cd"}.fa-battery-bolt:before{content:"\f376"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-slash:before{content:"\f377"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-exclamation:before{content:"\f848"}.fa-bell-plus:before{content:"\f849"}.fa-bell-school:before{content:"\f5d5"}.fa-bell-school-slash:before{content:"\f5d6"}.fa-bell-slash:before{content:"\f1f6"}.fa-bells:before{content:"\f77f"}.fa-betamax:before{content:"\f8a4"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-biking-mountain:before{content:"\f84b"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blanket:before{content:"\f498"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bone-break:before{content:"\f5d8"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-alt:before{content:"\f5d9"}.fa-book-dead:before{content:"\f6b7"}.fa-book-heart:before{content:"\f499"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-book-spells:before{content:"\f6b8"}.fa-book-user:before{content:"\f7e7"}.fa-bookmark:before{content:"\f02e"}.fa-books:before{content:"\f5db"}.fa-books-medical:before{content:"\f7e8"}.fa-boombox:before{content:"\f8a5"}.fa-boot:before{content:"\f782"}.fa-booth-curtain:before{content:"\f734"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-bottom:before{content:"\f84d"}.fa-border-center-h:before{content:"\f89c"}.fa-border-center-v:before{content:"\f89d"}.fa-border-inner:before{content:"\f84e"}.fa-border-left:before{content:"\f84f"}.fa-border-none:before{content:"\f850"}.fa-border-outer:before{content:"\f851"}.fa-border-right:before{content:"\f852"}.fa-border-style:before{content:"\f853"}.fa-border-style-alt:before{content:"\f854"}.fa-border-top:before{content:"\f855"}.fa-bow-arrow:before{content:"\f6b9"}.fa-bowling-ball:before{content:"\f436"}.fa-bowling-pins:before{content:"\f437"}.fa-box:before{content:"\f466"}.fa-box-alt:before{content:"\f49a"}.fa-box-ballot:before{content:"\f735"}.fa-box-check:before{content:"\f467"}.fa-box-fragile:before{content:"\f49b"}.fa-box-full:before{content:"\f49c"}.fa-box-heart:before{content:"\f49d"}.fa-box-open:before{content:"\f49e"}.fa-box-up:before{content:"\f49f"}.fa-box-usd:before{content:"\f4a0"}.fa-boxes:before{content:"\f468"}.fa-boxes-alt:before{content:"\f4a1"}.fa-boxing-glove:before{content:"\f438"}.fa-brackets:before{content:"\f7e9"}.fa-brackets-curly:before{content:"\f7ea"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-loaf:before{content:"\f7eb"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-bring-forward:before{content:"\f856"}.fa-bring-front:before{content:"\f857"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-browser:before{content:"\f37e"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-bullseye-arrow:before{content:"\f648"}.fa-bullseye-pointer:before{content:"\f649"}.fa-burger-soda:before{content:"\f858"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-burrito:before{content:"\f7ed"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-bus-school:before{content:"\f5dd"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-cabinet-filing:before{content:"\f64b"}.fa-cactus:before{content:"\f8a7"}.fa-calculator:before{content:"\f1ec"}.fa-calculator-alt:before{content:"\f64c"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-edit:before{content:"\f333"}.fa-calendar-exclamation:before{content:"\f334"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-star:before{content:"\f736"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camcorder:before{content:"\f8a8"}.fa-camera:before{content:"\f030"}.fa-camera-alt:before{content:"\f332"}.fa-camera-movie:before{content:"\f8a9"}.fa-camera-polaroid:before{content:"\f8aa"}.fa-camera-retro:before{content:"\f083"}.fa-campfire:before{content:"\f6ba"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candle-holder:before{content:"\f6bc"}.fa-candy-cane:before{content:"\f786"}.fa-candy-corn:before{content:"\f6bd"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-building:before{content:"\f859"}.fa-car-bump:before{content:"\f5e0"}.fa-car-bus:before{content:"\f85a"}.fa-car-crash:before{content:"\f5e1"}.fa-car-garage:before{content:"\f5e2"}.fa-car-mechanic:before{content:"\f5e3"}.fa-car-side:before{content:"\f5e4"}.fa-car-tilt:before{content:"\f5e5"}.fa-car-wash:before{content:"\f5e6"}.fa-caret-circle-down:before{content:"\f32d"}.fa-caret-circle-left:before{content:"\f32e"}.fa-caret-circle-right:before{content:"\f330"}.fa-caret-circle-up:before{content:"\f331"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cars:before{content:"\f85b"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cassette-tape:before{content:"\f8ab"}.fa-cat:before{content:"\f6be"}.fa-cauldron:before{content:"\f6bf"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-cctv:before{content:"\f8ac"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chair-office:before{content:"\f6c1"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-line-down:before{content:"\f64d"}.fa-chart-network:before{content:"\f78a"}.fa-chart-pie:before{content:"\f200"}.fa-chart-pie-alt:before{content:"\f64e"}.fa-chart-scatter:before{content:"\f7ee"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-cheese-swiss:before{content:"\f7f0"}.fa-cheeseburger:before{content:"\f7f1"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-bishop-alt:before{content:"\f43b"}.fa-chess-board:before{content:"\f43c"}.fa-chess-clock:before{content:"\f43d"}.fa-chess-clock-alt:before{content:"\f43e"}.fa-chess-king:before{content:"\f43f"}.fa-chess-king-alt:before{content:"\f440"}.fa-chess-knight:before{content:"\f441"}.fa-chess-knight-alt:before{content:"\f442"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-pawn-alt:before{content:"\f444"}.fa-chess-queen:before{content:"\f445"}.fa-chess-queen-alt:before{content:"\f446"}.fa-chess-rook:before{content:"\f447"}.fa-chess-rook-alt:before{content:"\f448"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-double-down:before{content:"\f322"}.fa-chevron-double-left:before{content:"\f323"}.fa-chevron-double-right:before{content:"\f324"}.fa-chevron-double-up:before{content:"\f325"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-square-down:before{content:"\f329"}.fa-chevron-square-left:before{content:"\f32a"}.fa-chevron-square-right:before{content:"\f32b"}.fa-chevron-square-up:before{content:"\f32c"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chimney:before{content:"\f78b"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clarinet:before{content:"\f8ad"}.fa-claw-marks:before{content:"\f6c2"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clipboard-list-check:before{content:"\f737"}.fa-clipboard-prescription:before{content:"\f5e8"}.fa-clipboard-user:before{content:"\f7f3"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-drizzle:before{content:"\f738"}.fa-cloud-hail:before{content:"\f739"}.fa-cloud-hail-mixed:before{content:"\f73a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-music:before{content:"\f8ae"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-rainbow:before{content:"\f73e"}.fa-cloud-showers:before{content:"\f73f"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sleet:before{content:"\f741"}.fa-cloud-snow:before{content:"\f742"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload:before{content:"\f0ee"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-clouds:before{content:"\f744"}.fa-clouds-moon:before{content:"\f745"}.fa-clouds-sun:before{content:"\f746"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-club:before{content:"\f327"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-code-commit:before{content:"\f386"}.fa-code-merge:before{content:"\f387"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-coffee-togo:before{content:"\f6c5"}.fa-coffin:before{content:"\f6c6"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coin:before{content:"\f85c"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-alt-check:before{content:"\f4a2"}.fa-comment-alt-dollar:before{content:"\f650"}.fa-comment-alt-dots:before{content:"\f4a3"}.fa-comment-alt-edit:before{content:"\f4a4"}.fa-comment-alt-exclamation:before{content:"\f4a5"}.fa-comment-alt-lines:before{content:"\f4a6"}.fa-comment-alt-medical:before{content:"\f7f4"}.fa-comment-alt-minus:before{content:"\f4a7"}.fa-comment-alt-music:before{content:"\f8af"}.fa-comment-alt-plus:before{content:"\f4a8"}.fa-comment-alt-slash:before{content:"\f4a9"}.fa-comment-alt-smile:before{content:"\f4aa"}.fa-comment-alt-times:before{content:"\f4ab"}.fa-comment-check:before{content:"\f4ac"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-edit:before{content:"\f4ae"}.fa-comment-exclamation:before{content:"\f4af"}.fa-comment-lines:before{content:"\f4b0"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-minus:before{content:"\f4b1"}.fa-comment-music:before{content:"\f8b0"}.fa-comment-plus:before{content:"\f4b2"}.fa-comment-slash:before{content:"\f4b3"}.fa-comment-smile:before{content:"\f4b4"}.fa-comment-times:before{content:"\f4b5"}.fa-comments:before{content:"\f086"}.fa-comments-alt:before{content:"\f4b6"}.fa-comments-alt-dollar:before{content:"\f652"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compass-slash:before{content:"\f5e9"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-compress-wide:before{content:"\f326"}.fa-computer-classic:before{content:"\f8b1"}.fa-computer-speaker:before{content:"\f8b2"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-construction:before{content:"\f85d"}.fa-container-storage:before{content:"\f4b7"}.fa-contao:before{content:"\f26d"}.fa-conveyor-belt:before{content:"\f46e"}.fa-conveyor-belt-alt:before{content:"\f46f"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-corn:before{content:"\f6c7"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cow:before{content:"\f6c8"}.fa-cowbell:before{content:"\f8b3"}.fa-cowbell-more:before{content:"\f8b4"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-credit-card-blank:before{content:"\f389"}.fa-credit-card-front:before{content:"\f38a"}.fa-cricket:before{content:"\f449"}.fa-critical-role:before{content:"\f6c9"}.fa-croissant:before{content:"\f7f6"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-crutches:before{content:"\f7f8"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-curling:before{content:"\f44a"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dagger:before{content:"\f6cb"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-debug:before{content:"\f7f9"}.fa-deer:before{content:"\f78e"}.fa-deer-rudolph:before{content:"\f78f"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-desktop-alt:before{content:"\f390"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dewpoint:before{content:"\f748"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diamond:before{content:"\f219"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d10:before{content:"\f6cd"}.fa-dice-d12:before{content:"\f6ce"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d4:before{content:"\f6d0"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-d8:before{content:"\f6d2"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digging:before{content:"\f85e"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-diploma:before{content:"\f5ea"}.fa-directions:before{content:"\f5eb"}.fa-disc-drive:before{content:"\f8b5"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-do-not-enter:before{content:"\f5ec"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dog-leashed:before{content:"\f6d4"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-empty:before{content:"\f473"}.fa-dolly-flatbed:before{content:"\f474"}.fa-dolly-flatbed-alt:before{content:"\f475"}.fa-dolly-flatbed-empty:before{content:"\f476"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-circle:before{content:"\f5ed"}.fa-draw-polygon:before{content:"\f5ee"}.fa-draw-square:before{content:"\f5ef"}.fa-dreidel:before{content:"\f792"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-drone:before{content:"\f85f"}.fa-drone-alt:before{content:"\f860"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick:before{content:"\f6d6"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dryer:before{content:"\f861"}.fa-dryer-alt:before{content:"\f862"}.fa-duck:before{content:"\f6d8"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-ear:before{content:"\f5f0"}.fa-ear-muffs:before{content:"\f795"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-eclipse:before{content:"\f749"}.fa-eclipse-alt:before{content:"\f74a"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-egg-fried:before{content:"\f7fc"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-elephant:before{content:"\f6da"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-h-alt:before{content:"\f39b"}.fa-ellipsis-v:before{content:"\f142"}.fa-ellipsis-v-alt:before{content:"\f39c"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-empty-set:before{content:"\f656"}.fa-engine-warning:before{content:"\f5f2"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-dollar:before{content:"\f657"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange:before{content:"\f0ec"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-square:before{content:"\f321"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows:before{content:"\f31d"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expand-wide:before{content:"\f320"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link:before{content:"\f08e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square:before{content:"\f14c"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-evil:before{content:"\f6db"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-farm:before{content:"\f864"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-field-hockey:before{content:"\f44c"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-certificate:before{content:"\f5f3"}.fa-file-chart-line:before{content:"\f659"}.fa-file-chart-pie:before{content:"\f65a"}.fa-file-check:before{content:"\f316"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-edit:before{content:"\f31c"}.fa-file-excel:before{content:"\f1c3"}.fa-file-exclamation:before{content:"\f31a"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-minus:before{content:"\f318"}.fa-file-music:before{content:"\f8b6"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-plus:before{content:"\f319"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-search:before{content:"\f865"}.fa-file-signature:before{content:"\f573"}.fa-file-spreadsheet:before{content:"\f65b"}.fa-file-times:before{content:"\f317"}.fa-file-upload:before{content:"\f574"}.fa-file-user:before{content:"\f65c"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-files-medical:before{content:"\f7fd"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-film-alt:before{content:"\f3a0"}.fa-film-canister:before{content:"\f8b7"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-fire-smoke:before{content:"\f74b"}.fa-firefox:before{content:"\f269"}.fa-fireplace:before{content:"\f79a"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fish-cooked:before{content:"\f7fe"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-alt:before{content:"\f74c"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flame:before{content:"\f6df"}.fa-flashlight:before{content:"\f8b8"}.fa-flask:before{content:"\f0c3"}.fa-flask-poison:before{content:"\f6e0"}.fa-flask-potion:before{content:"\f6e1"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flower:before{content:"\f7ff"}.fa-flower-daffodil:before{content:"\f800"}.fa-flower-tulip:before{content:"\f801"}.fa-flushed:before{content:"\f579"}.fa-flute:before{content:"\f8b9"}.fa-flux-capacitor:before{content:"\f8ba"}.fa-fly:before{content:"\f417"}.fa-fog:before{content:"\f74e"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-folder-times:before{content:"\f65f"}.fa-folder-tree:before{content:"\f802"}.fa-folders:before{content:"\f660"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-font-case:before{content:"\f866"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-football-helmet:before{content:"\f44f"}.fa-forklift:before{content:"\f47a"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-fragile:before{content:"\f4bb"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-french-fries:before{content:"\f803"}.fa-frog:before{content:"\f52e"}.fa-frosty-head:before{content:"\f79b"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-function:before{content:"\f661"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-game-board:before{content:"\f867"}.fa-game-board-alt:before{content:"\f868"}.fa-game-console-handheld:before{content:"\f8bb"}.fa-gamepad:before{content:"\f11b"}.fa-gamepad-alt:before{content:"\f8bc"}.fa-gas-pump:before{content:"\f52f"}.fa-gas-pump-slash:before{content:"\f5f4"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gift-card:before{content:"\f663"}.fa-gifts:before{content:"\f79c"}.fa-gingerbread-man:before{content:"\f79d"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass:before{content:"\f804"}.fa-glass-champagne:before{content:"\f79e"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-citrus:before{content:"\f869"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glass-whiskey-rocks:before{content:"\f7a1"}.fa-glasses:before{content:"\f530"}.fa-glasses-alt:before{content:"\f5f5"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-globe-snow:before{content:"\f7a3"}.fa-globe-stand:before{content:"\f5f6"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-golf-club:before{content:"\f451"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gramophone:before{content:"\f8bd"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guitar:before{content:"\f7a6"}.fa-guitar-electric:before{content:"\f8be"}.fa-guitars:before{content:"\f8bf"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-h1:before{content:"\f313"}.fa-h2:before{content:"\f314"}.fa-h3:before{content:"\f315"}.fa-h4:before{content:"\f86a"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hammer-war:before{content:"\f6e4"}.fa-hamsa:before{content:"\f665"}.fa-hand-heart:before{content:"\f4bc"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-box:before{content:"\f47b"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-magic:before{content:"\f6e5"}.fa-hand-holding-seedling:before{content:"\f4bf"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-receiving:before{content:"\f47c"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-heart:before{content:"\f4c3"}.fa-hands-helping:before{content:"\f4c4"}.fa-hands-usd:before{content:"\f4c5"}.fa-handshake:before{content:"\f2b5"}.fa-handshake-alt:before{content:"\f4c6"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-chef:before{content:"\f86b"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-santa:before{content:"\f7a7"}.fa-hat-winter:before{content:"\f7a8"}.fa-hat-witch:before{content:"\f6e7"}.fa-hat-wizard:before{content:"\f6e8"}.fa-haykal:before{content:"\f666"}.fa-hdd:before{content:"\f0a0"}.fa-head-side:before{content:"\f6e9"}.fa-head-side-brain:before{content:"\f808"}.fa-head-side-headphones:before{content:"\f8c2"}.fa-head-side-medical:before{content:"\f809"}.fa-head-vr:before{content:"\f6ea"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heart-circle:before{content:"\f4c7"}.fa-heart-rate:before{content:"\f5f8"}.fa-heart-square:before{content:"\f4c8"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-helmet-battle:before{content:"\f6eb"}.fa-hexagon:before{content:"\f312"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-mask:before{content:"\f6ee"}.fa-hockey-puck:before{content:"\f453"}.fa-hockey-sticks:before{content:"\f454"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-home-alt:before{content:"\f80a"}.fa-home-heart:before{content:"\f4c9"}.fa-home-lg:before{content:"\f80b"}.fa-home-lg-alt:before{content:"\f80c"}.fa-hood-cloak:before{content:"\f6ef"}.fa-hooli:before{content:"\f427"}.fa-horizontal-rule:before{content:"\f86c"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-horse-saddle:before{content:"\f8c3"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hospital-user:before{content:"\f80d"}.fa-hospitals:before{content:"\f80e"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-house-flood:before{content:"\f74f"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-humidity:before{content:"\f750"}.fa-hurricane:before{content:"\f751"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-ice-skate:before{content:"\f7ac"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-icons-alt:before{content:"\f86e"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-image-polaroid:before{content:"\f8c4"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-inbox-in:before{content:"\f310"}.fa-inbox-out:before{content:"\f311"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-industry-alt:before{content:"\f3b3"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-info-square:before{content:"\f30f"}.fa-inhaler:before{content:"\f5f9"}.fa-instagram:before{content:"\f16d"}.fa-integral:before{content:"\f667"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-intersection:before{content:"\f668"}.fa-inventory:before{content:"\f480"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-island-tropical:before{content:"\f811"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-jack-o-lantern:before{content:"\f30e"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-joystick:before{content:"\f8c5"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-jug:before{content:"\f8c6"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-kazoo:before{content:"\f8c7"}.fa-kerning:before{content:"\f86f"}.fa-key:before{content:"\f084"}.fa-key-skeleton:before{content:"\f6f3"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-keynote:before{content:"\f66c"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kidneys:before{content:"\f5fb"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kite:before{content:"\f6f4"}.fa-kiwi-bird:before{content:"\f535"}.fa-knife-kitchen:before{content:"\f6f5"}.fa-korvue:before{content:"\f42f"}.fa-lambda:before{content:"\f66e"}.fa-lamp:before{content:"\f4ca"}.fa-landmark:before{content:"\f66f"}.fa-landmark-alt:before{content:"\f752"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lasso:before{content:"\f8c8"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-layer-minus:before{content:"\f5fe"}.fa-layer-plus:before{content:"\f5ff"}.fa-leaf:before{content:"\f06c"}.fa-leaf-heart:before{content:"\f4cb"}.fa-leaf-maple:before{content:"\f6f6"}.fa-leaf-oak:before{content:"\f6f7"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down:before{content:"\f149"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up:before{content:"\f148"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-lightbulb-dollar:before{content:"\f670"}.fa-lightbulb-exclamation:before{content:"\f671"}.fa-lightbulb-on:before{content:"\f672"}.fa-lightbulb-slash:before{content:"\f673"}.fa-lights-holiday:before{content:"\f7b2"}.fa-line:before{content:"\f3c0"}.fa-line-columns:before{content:"\f870"}.fa-line-height:before{content:"\f871"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lips:before{content:"\f600"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-music:before{content:"\f8c9"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location:before{content:"\f601"}.fa-location-arrow:before{content:"\f124"}.fa-location-circle:before{content:"\f602"}.fa-location-slash:before{content:"\f603"}.fa-lock:before{content:"\f023"}.fa-lock-alt:before{content:"\f30d"}.fa-lock-open:before{content:"\f3c1"}.fa-lock-open-alt:before{content:"\f3c2"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-long-arrow-up:before{content:"\f176"}.fa-loveseat:before{content:"\f4cc"}.fa-low-vision:before{content:"\f2a8"}.fa-luchador:before{content:"\f455"}.fa-luggage-cart:before{content:"\f59d"}.fa-lungs:before{content:"\f604"}.fa-lyft:before{content:"\f3c3"}.fa-mace:before{content:"\f6f8"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailbox:before{content:"\f813"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-mandolin:before{content:"\f6f9"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-marker-alt-slash:before{content:"\f605"}.fa-map-marker-check:before{content:"\f606"}.fa-map-marker-edit:before{content:"\f607"}.fa-map-marker-exclamation:before{content:"\f608"}.fa-map-marker-minus:before{content:"\f609"}.fa-map-marker-plus:before{content:"\f60a"}.fa-map-marker-question:before{content:"\f60b"}.fa-map-marker-slash:before{content:"\f60c"}.fa-map-marker-smile:before{content:"\f60d"}.fa-map-marker-times:before{content:"\f60e"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-meat:before{content:"\f814"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaphone:before{content:"\f675"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microphone-stand:before{content:"\f8cb"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-mind-share:before{content:"\f677"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-hexagon:before{content:"\f307"}.fa-minus-octagon:before{content:"\f308"}.fa-minus-square:before{content:"\f146"}.fa-mistletoe:before{content:"\f7b4"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-mobile-android:before{content:"\f3ce"}.fa-mobile-android-alt:before{content:"\f3cf"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-money-check-edit:before{content:"\f872"}.fa-money-check-edit-alt:before{content:"\f873"}.fa-monitor-heart-rate:before{content:"\f611"}.fa-monkey:before{content:"\f6fb"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-moon-cloud:before{content:"\f754"}.fa-moon-stars:before{content:"\f755"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mountains:before{content:"\f6fd"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-alt:before{content:"\f8cd"}.fa-mouse-pointer:before{content:"\f245"}.fa-mp3-player:before{content:"\f8ce"}.fa-mug:before{content:"\f874"}.fa-mug-hot:before{content:"\f7b6"}.fa-mug-marshmallows:before{content:"\f7b7"}.fa-mug-tea:before{content:"\f875"}.fa-music:before{content:"\f001"}.fa-music-alt:before{content:"\f8cf"}.fa-music-alt-slash:before{content:"\f8d0"}.fa-music-slash:before{content:"\f8d1"}.fa-napster:before{content:"\f3d2"}.fa-narwhal:before{content:"\f6fe"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-octagon:before{content:"\f306"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-oil-temp:before{content:"\f614"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-omega:before{content:"\f67a"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-ornament:before{content:"\f7b8"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-overline:before{content:"\f876"}.fa-page-break:before{content:"\f877"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-brush-alt:before{content:"\f5a9"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-pallet-alt:before{content:"\f483"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-paragraph-rtl:before{content:"\f878"}.fa-parking:before{content:"\f540"}.fa-parking-circle:before{content:"\f615"}.fa-parking-circle-slash:before{content:"\f616"}.fa-parking-slash:before{content:"\f617"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paw-alt:before{content:"\f701"}.fa-paw-claws:before{content:"\f702"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pegasus:before{content:"\f703"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil:before{content:"\f040"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-paintbrush:before{content:"\f618"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-pennant:before{content:"\f456"}.fa-penny-arcade:before{content:"\f704"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-person-carry:before{content:"\f4cf"}.fa-person-dolly:before{content:"\f4d0"}.fa-person-dolly-empty:before{content:"\f4d1"}.fa-person-sign:before{content:"\f757"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-laptop:before{content:"\f87a"}.fa-phone-office:before{content:"\f67d"}.fa-phone-plus:before{content:"\f4d2"}.fa-phone-rotary:before{content:"\f8d3"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pi:before{content:"\f67e"}.fa-piano:before{content:"\f8d4"}.fa-piano-keyboard:before{content:"\f8d5"}.fa-pie:before{content:"\f705"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pig:before{content:"\f706"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza:before{content:"\f817"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-alt:before{content:"\f3de"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-hexagon:before{content:"\f300"}.fa-plus-octagon:before{content:"\f301"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-podium:before{content:"\f680"}.fa-podium-star:before{content:"\f758"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poll-people:before{content:"\f759"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-popcorn:before{content:"\f819"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-presentation:before{content:"\f685"}.fa-print:before{content:"\f02f"}.fa-print-search:before{content:"\f81a"}.fa-print-slash:before{content:"\f686"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-projector:before{content:"\f8d6"}.fa-pumpkin:before{content:"\f707"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-question-square:before{content:"\f2fd"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-rabbit:before{content:"\f708"}.fa-rabbit-fast:before{content:"\f709"}.fa-racquet:before{content:"\f45a"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-radio:before{content:"\f8d7"}.fa-radio-alt:before{content:"\f8d8"}.fa-rainbow:before{content:"\f75b"}.fa-raindrops:before{content:"\f75c"}.fa-ram:before{content:"\f70a"}.fa-ramp-loading:before{content:"\f4d4"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-rectangle-landscape:before{content:"\f2fa"}.fa-rectangle-portrait:before{content:"\f2fb"}.fa-rectangle-wide:before{content:"\f2fc"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-repeat:before{content:"\f363"}.fa-repeat-1:before{content:"\f365"}.fa-repeat-1-alt:before{content:"\f366"}.fa-repeat-alt:before{content:"\f364"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-retweet-alt:before{content:"\f361"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-rings-wedding:before{content:"\f81b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-route-highway:before{content:"\f61a"}.fa-route-interstate:before{content:"\f61b"}.fa-router:before{content:"\f8da"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-triangle:before{content:"\f61c"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-rv:before{content:"\f7be"}.fa-sack:before{content:"\f81c"}.fa-sack-dollar:before{content:"\f81d"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salad:before{content:"\f81e"}.fa-salesforce:before{content:"\f83b"}.fa-sandwich:before{content:"\f81f"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-sausage:before{content:"\f820"}.fa-save:before{content:"\f0c7"}.fa-sax-hot:before{content:"\f8db"}.fa-saxophone:before{content:"\f8dc"}.fa-scalpel:before{content:"\f61d"}.fa-scalpel-path:before{content:"\f61e"}.fa-scanner:before{content:"\f488"}.fa-scanner-image:before{content:"\f8f3"}.fa-scanner-keyboard:before{content:"\f489"}.fa-scanner-touchscreen:before{content:"\f48a"}.fa-scarecrow:before{content:"\f70d"}.fa-scarf:before{content:"\f7c1"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-scroll-old:before{content:"\f70f"}.fa-scrubber:before{content:"\f2f8"}.fa-scythe:before{content:"\f710"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-send-back:before{content:"\f87e"}.fa-send-backward:before{content:"\f87f"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-all:before{content:"\f367"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-sheep:before{content:"\f711"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield:before{content:"\f132"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-check:before{content:"\f2f7"}.fa-shield-cross:before{content:"\f712"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shipping-timed:before{content:"\f48c"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shish-kebab:before{content:"\f821"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shovel:before{content:"\f713"}.fa-shovel-snow:before{content:"\f7c3"}.fa-shower:before{content:"\f2cc"}.fa-shredder:before{content:"\f68a"}.fa-shuttle-van:before{content:"\f5b6"}.fa-shuttlecock:before{content:"\f45b"}.fa-sickle:before{content:"\f822"}.fa-sigma:before{content:"\f68b"}.fa-sign:before{content:"\f4d9"}.fa-sign-in:before{content:"\f090"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out:before{content:"\f08b"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signal-1:before{content:"\f68c"}.fa-signal-2:before{content:"\f68d"}.fa-signal-3:before{content:"\f68e"}.fa-signal-4:before{content:"\f68f"}.fa-signal-alt:before{content:"\f690"}.fa-signal-alt-1:before{content:"\f691"}.fa-signal-alt-2:before{content:"\f692"}.fa-signal-alt-3:before{content:"\f693"}.fa-signal-alt-slash:before{content:"\f694"}.fa-signal-slash:before{content:"\f695"}.fa-signal-stream:before{content:"\f8dd"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-skeleton:before{content:"\f620"}.fa-sketch:before{content:"\f7c6"}.fa-ski-jump:before{content:"\f7c7"}.fa-ski-lift:before{content:"\f7c8"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-cow:before{content:"\f8de"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sledding:before{content:"\f7cb"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-sliders-h-square:before{content:"\f3f0"}.fa-sliders-v:before{content:"\f3f1"}.fa-sliders-v-square:before{content:"\f3f2"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-plus:before{content:"\f5b9"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoke:before{content:"\f760"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snake:before{content:"\f716"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snooze:before{content:"\f880"}.fa-snow-blowing:before{content:"\f761"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowflakes:before{content:"\f7cf"}.fa-snowman:before{content:"\f7d0"}.fa-snowmobile:before{content:"\f7d1"}.fa-snowplow:before{content:"\f7d2"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-alt:before{content:"\f883"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-shapes-down:before{content:"\f888"}.fa-sort-shapes-down-alt:before{content:"\f889"}.fa-sort-shapes-up:before{content:"\f88a"}.fa-sort-shapes-up-alt:before{content:"\f88b"}.fa-sort-size-down:before{content:"\f88c"}.fa-sort-size-down-alt:before{content:"\f88d"}.fa-sort-size-up:before{content:"\f88e"}.fa-sort-size-up-alt:before{content:"\f88f"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-soup:before{content:"\f823"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-spade:before{content:"\f2f4"}.fa-sparkles:before{content:"\f890"}.fa-speakap:before{content:"\f3f3"}.fa-speaker:before{content:"\f8df"}.fa-speaker-deck:before{content:"\f83c"}.fa-speakers:before{content:"\f8e0"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spider-black-widow:before{content:"\f718"}.fa-spider-web:before{content:"\f719"}.fa-spinner:before{content:"\f110"}.fa-spinner-third:before{content:"\f3f4"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root:before{content:"\f697"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-squirrel:before{content:"\f71a"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-staff:before{content:"\f71b"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-christmas:before{content:"\f7d4"}.fa-star-exclamation:before{content:"\f2f3"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-stars:before{content:"\f762"}.fa-staylinked:before{content:"\f3f5"}.fa-steak:before{content:"\f824"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-steering-wheel:before{content:"\f622"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stocking:before{content:"\f7d5"}.fa-stomach:before{content:"\f623"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-stretcher:before{content:"\f825"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-sun-cloud:before{content:"\f763"}.fa-sun-dust:before{content:"\f764"}.fa-sun-haze:before{content:"\f765"}.fa-sunglasses:before{content:"\f892"}.fa-sunrise:before{content:"\f766"}.fa-sunset:before{content:"\f767"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-sword:before{content:"\f71c"}.fa-swords:before{content:"\f71d"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablet-android:before{content:"\f3fb"}.fa-tablet-android-alt:before{content:"\f3fc"}.fa-tablet-rugged:before{content:"\f48f"}.fa-tablets:before{content:"\f490"}.fa-tachometer:before{content:"\f0e4"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tachometer-alt-average:before{content:"\f624"}.fa-tachometer-alt-fast:before{content:"\f625"}.fa-tachometer-alt-fastest:before{content:"\f626"}.fa-tachometer-alt-slow:before{content:"\f627"}.fa-tachometer-alt-slowest:before{content:"\f628"}.fa-tachometer-average:before{content:"\f629"}.fa-tachometer-fast:before{content:"\f62a"}.fa-tachometer-fastest:before{content:"\f62b"}.fa-tachometer-slow:before{content:"\f62c"}.fa-tachometer-slowest:before{content:"\f62d"}.fa-taco:before{content:"\f826"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tally:before{content:"\f69c"}.fa-tanakh:before{content:"\f827"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-tasks-alt:before{content:"\f828"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-frigid:before{content:"\f768"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-hot:before{content:"\f76a"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-tennis-ball:before{content:"\f45e"}.fa-terminal:before{content:"\f120"}.fa-text:before{content:"\f893"}.fa-text-height:before{content:"\f034"}.fa-text-size:before{content:"\f894"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-theta:before{content:"\f69e"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-thunderstorm:before{content:"\f76c"}.fa-thunderstorm-moon:before{content:"\f76d"}.fa-thunderstorm-sun:before{content:"\f76e"}.fa-ticket:before{content:"\f145"}.fa-ticket-alt:before{content:"\f3ff"}.fa-tilde:before{content:"\f69f"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-times-hexagon:before{content:"\f2ee"}.fa-times-octagon:before{content:"\f2f0"}.fa-times-square:before{content:"\f2d3"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tire:before{content:"\f631"}.fa-tire-flat:before{content:"\f632"}.fa-tire-pressure-warning:before{content:"\f633"}.fa-tire-rugged:before{content:"\f634"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-alt:before{content:"\f71f"}.fa-tombstone:before{content:"\f720"}.fa-tombstone-alt:before{content:"\f721"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-toothbrush:before{content:"\f635"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tornado:before{content:"\f76f"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-cone:before{content:"\f636"}.fa-traffic-light:before{content:"\f637"}.fa-traffic-light-go:before{content:"\f638"}.fa-traffic-light-slow:before{content:"\f639"}.fa-traffic-light-stop:before{content:"\f63a"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-trash-undo:before{content:"\f895"}.fa-trash-undo-alt:before{content:"\f896"}.fa-treasure-chest:before{content:"\f723"}.fa-tree:before{content:"\f1bb"}.fa-tree-alt:before{content:"\f400"}.fa-tree-christmas:before{content:"\f7db"}.fa-tree-decorated:before{content:"\f7dc"}.fa-tree-large:before{content:"\f7dd"}.fa-tree-palm:before{content:"\f82b"}.fa-trees:before{content:"\f724"}.fa-trello:before{content:"\f181"}.fa-triangle:before{content:"\f2ec"}.fa-triangle-music:before{content:"\f8e2"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-trophy-alt:before{content:"\f2eb"}.fa-truck:before{content:"\f0d1"}.fa-truck-container:before{content:"\f4dc"}.fa-truck-couch:before{content:"\f4dd"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-truck-plow:before{content:"\f7de"}.fa-truck-ramp:before{content:"\f4e0"}.fa-trumpet:before{content:"\f8e3"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-turkey:before{content:"\f725"}.fa-turntable:before{content:"\f8e4"}.fa-turtle:before{content:"\f726"}.fa-tv:before{content:"\f26c"}.fa-tv-alt:before{content:"\f8e5"}.fa-tv-music:before{content:"\f8e6"}.fa-tv-retro:before{content:"\f401"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typewriter:before{content:"\f8e7"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-unicorn:before{content:"\f727"}.fa-union:before{content:"\f6a2"}.fa-uniregistry:before{content:"\f404"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-usb-drive:before{content:"\f8e9"}.fa-usd-circle:before{content:"\f2e8"}.fa-usd-square:before{content:"\f2e9"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-chart:before{content:"\f6a3"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-cowboy:before{content:"\f8ea"}.fa-user-crown:before{content:"\f6a4"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-hard-hat:before{content:"\f82c"}.fa-user-headset:before{content:"\f82d"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-md-chat:before{content:"\f82e"}.fa-user-minus:before{content:"\f503"}.fa-user-music:before{content:"\f8eb"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-class:before{content:"\f63d"}.fa-users-cog:before{content:"\f509"}.fa-users-crown:before{content:"\f6a5"}.fa-users-medical:before{content:"\f830"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-fork:before{content:"\f2e3"}.fa-utensil-knife:before{content:"\f2e4"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-utensils-alt:before{content:"\f2e6"}.fa-vaadin:before{content:"\f408"}.fa-value-absolute:before{content:"\f6a6"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-vhs:before{content:"\f8ec"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-plus:before{content:"\f4e1"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-violin:before{content:"\f8ed"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volcano:before{content:"\f770"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume:before{content:"\f6a8"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-slash:before{content:"\f2e2"}.fa-volume-up:before{content:"\f028"}.fa-vote-nay:before{content:"\f771"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-wagon-covered:before{content:"\f8ee"}.fa-walker:before{content:"\f831"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-wand:before{content:"\f72a"}.fa-wand-magic:before{content:"\f72b"}.fa-warehouse:before{content:"\f494"}.fa-warehouse-alt:before{content:"\f495"}.fa-washer:before{content:"\f898"}.fa-watch:before{content:"\f2e1"}.fa-watch-calculator:before{content:"\f8f0"}.fa-watch-fitness:before{content:"\f63e"}.fa-water:before{content:"\f773"}.fa-water-lower:before{content:"\f774"}.fa-water-rise:before{content:"\f775"}.fa-wave-sine:before{content:"\f899"}.fa-wave-square:before{content:"\f83e"}.fa-wave-triangle:before{content:"\f89a"}.fa-waveform:before{content:"\f8f1"}.fa-waveform-path:before{content:"\f8f2"}.fa-waze:before{content:"\f83f"}.fa-webcam:before{content:"\f832"}.fa-webcam-slash:before{content:"\f833"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whale:before{content:"\f72c"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheat:before{content:"\f72d"}.fa-wheelchair:before{content:"\f193"}.fa-whistle:before{content:"\f460"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wifi-1:before{content:"\f6aa"}.fa-wifi-2:before{content:"\f6ab"}.fa-wifi-slash:before{content:"\f6ac"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-wind-turbine:before{content:"\f89b"}.fa-wind-warning:before{content:"\f776"}.fa-window:before{content:"\f40e"}.fa-window-alt:before{content:"\f40f"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-windsock:before{content:"\f777"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wreath:before{content:"\f7e2"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto} /* ======================================================================================================================== VARIABLES ======================================================================================================================== Definimos las variables globales del proyecto */ /* VARIABLES > TIPOGRAFÍA ====================================================================================================================*/ :root { --font-general : 'Segoe UI', 'Futura', 'Trebuchet MS', 'Tahoma', 'Arial', sans-serif; --font-secondary: 'Montserrat'; --font-icons : 'Font Awesome 5 Pro'; } /* VARIABLES > COLOR ====================================================================================================================== Definimos las variables concretas para el color */ :root { --color-base : #f8f8f8; --color-font : #666666; --color-title: #2c2c2c; --color-neutral : #eeeeee; --color-neutral-light : #f1f1f1; --color-neutral-darken: #cbcbcb; --color-neutral-dark : #dddddd; --color-red-50 : #ffebee; --color-red-100 : #ffcdd2; --color-red-200 : #ef9a9a; --color-red-300 : #e57373; --color-red-400 : #ef5350; --color-red-500 : #f44336; --color-red-600 : #e53935; --color-red-700 : #d32f2f; --color-red-800 : #c62828; --color-red-900 : #b71c1c; --color-red-1000: hsla(0, 73%, 28%, 1); --color-red-a100: #ff8a80; --color-red-a200: #ff5252; --color-red-a400: #ff1744; --color-red-a700: #d50000; --color-pink-50 : #fce4ec; --color-pink-100 : #f8bbd0; --color-pink-200 : #f48fb1; --color-pink-300 : #f06292; --color-pink-400 : #ec407a; --color-pink-500 : #e91e63; --color-pink-600 : #d81b60; --color-pink-700 : #c2185b; --color-pink-800 : #ad1457; --color-pink-900 : #880e4f; --color-pink-1000 : hsla(328, 81%, 15%, 1); --color-pink-a100: #ff80ab; --color-pink-a200: #ff4081; --color-pink-a400: #f50057; --color-pink-a700: #c51162; --color-purple-50 : #f3e5f5; --color-purple-100 : #e1bee7; --color-purple-200 : #ce93d8; --color-purple-300 : #ba68c8; --color-purple-400 : #ab47bc; --color-purple-500 : #9c27b0; --color-purple-600 : #8e24aa; --color-purple-700 : #7b1fa2; --color-purple-800 : #6a1b9a; --color-purple-900 : #4a148c; --color-purple-1000: hsla(267, 75%, 18%, 1); --color-purple-a100: #ea80fc; --color-purple-a200: #e040fb; --color-purple-a400: #d500f9; --color-purple-a700: #aa00ff; --color-deep-purple-50 : #ede7f6; --color-deep-purple-100 : #d1c4e9; --color-deep-purple-200 : #b39ddb; --color-deep-purple-300 : #9575cd; --color-deep-purple-400 : #7e57c2; --color-deep-purple-500 : #673ab7; --color-deep-purple-600 : #5e35b1; --color-deep-purple-700 : #512da8; --color-deep-purple-800 : #4527a0; --color-deep-purple-900 : #311b92; --color-deep-purple-1000: hsla(251, 69%, 20%, 1); --color-deep-purple-a100: #b388ff; --color-deep-purple-a200: #7c4dff; --color-deep-purple-a400: #651fff; --color-deep-purple-a700: #6200ea; --color-indigo-50 : #e8eaf6; --color-indigo-100 : #c5cae9; --color-indigo-200 : #9fa8da; --color-indigo-300 : #7986cb; --color-indigo-400 : #5c6bc0; --color-indigo-500 : #3f51b5; --color-indigo-600 : #3949ab; --color-indigo-700 : #303f9f; --color-indigo-800 : #283593; --color-indigo-900 : #1a237e; --color-indigo-1000: hsla(235, 66%, 18%, 1); --color-indigo-a100: #8c9eff; --color-indigo-a200: #536dfe; --color-indigo-a400: #3d5afe; --color-indigo-a700: #304ffe; --color-blue-50 : #e3f2fd; --color-blue-100 : #bbdefb; --color-blue-200 : #90caf9; --color-blue-300 : #64b5f6; --color-blue-400 : #42a5f5; --color-blue-500 : #2196f3; --color-blue-600 : #1e88e5; --color-blue-700 : #1976d2; --color-blue-800 : #1565c0; --color-blue-900 : #0d47a1; --color-blue-1000: hsla(217, 83%, 20%, 1); --color-blue-a100: #82b1ff; --color-blue-a200: #448aff; --color-blue-a400: #2979ff; --color-blue-a700: #2962ff; --color-light-blue-50 : #e1f5fe; --color-light-blue-100 : #b3e5fc; --color-light-blue-200 : #81d4fa; --color-light-blue-300 : #4fc3f7; --color-light-blue-400 : #29b6f6; --color-light-blue-500 : #03a9f4; --color-light-blue-600 : #039be5; --color-light-blue-700 : #0288d1; --color-light-blue-800 : #0277bd; --color-light-blue-900 : #01579b; --color-light-blue-1000: hsla(206, 99%, 20%, 1); --color-light-blue-a100: #80d8ff; --color-light-blue-a200: #40c4ff; --color-light-blue-a400: #00b0ff; --color-light-blue-a700: #0091ea; --color-cyan-50 : #e0f7fa; --color-cyan-100 : #b2ebf2; --color-cyan-200 : #80deea; --color-cyan-300 : #4dd0e1; --color-cyan-400 : #26c6da; --color-cyan-500 : #00bcd4; --color-cyan-600 : #00acc1; --color-cyan-700 : #0097a7; --color-cyan-800 : #00838f; --color-cyan-900 : #006064; --color-cyan-1000: hsla(182, 100%, 10%, 1); --color-cyan-a100: #84ffff; --color-cyan-a200: #18ffff; --color-cyan-a400: #00e5ff; --color-cyan-a700: #00b8d4; --color-teal-50 : #e0f2f1; --color-teal-100 : #b2dfdb; --color-teal-200 : #80cbc4; --color-teal-300 : #4db6ac; --color-teal-400 : #26a69a; --color-teal-500 : #009688; --color-teal-600 : #00897b; --color-teal-700 : #00796b; --color-teal-800 : #00695c; --color-teal-900 : #004d40; --color-teal-1000: hsla(170, 100%, 10%, 1); --color-teal-a100: #a7ffeb; --color-teal-a200: #64ffda; --color-teal-a400: #1de9b6; --color-teal-a700: #00bfa5; --color-green-50 : #e8f5e9; --color-green-100 : #c8e6c9; --color-green-200 : #a5d6a7; --color-green-300 : #81c784; --color-green-400 : #66bb6a; --color-green-500 : #4caf50; --color-green-600 : #43a047; --color-green-700 : #388e3c; --color-green-800 : #2e7d32; --color-green-900 : #1b5e20; --color-green-1000: hsla(124, 55%, 14%, 1); --color-green-a100: #b9f6ca; --color-green-a200: #69f0ae; --color-green-a400: #00e676; --color-green-a700: #00c853; --color-light-green-50 : #f1f8e9; --color-light-green-100 : #dcedc8; --color-light-green-200 : #c5e1a5; --color-light-green-300 : #aed581; --color-light-green-400 : #9ccc65; --color-light-green-500 : #8bc34a; --color-light-green-600 : #7cb342; --color-light-green-700 : #689f38; --color-light-green-800 : #558b2f; --color-light-green-900 : #33691e; --color-light-green-1000: hsla(103, 56%, 16%, 1); --color-light-green-a100: #ccff90; --color-light-green-a200: #b2ff59; --color-light-green-a400: #76ff03; --color-light-green-a700: #64dd17; --color-lime-50 : #f9fbe7; --color-lime-100 : #f0f4c3; --color-lime-200 : #e6ee9c; --color-lime-300 : #dce775; --color-lime-400 : #d4e157; --color-lime-500 : #cddc39; --color-lime-600 : #c0ca33; --color-lime-700 : #afb42b; --color-lime-800 : #9e9d24; --color-lime-900 : #827717; --color-lime-1000: hsla(54, 70%, 20%, 1); --color-lime-a100: #f4ff81; --color-lime-a200: #eeff41; --color-lime-a400: #c6ff00; --color-lime-a700: #aeea00; --color-yellow-50 : #fffde7; --color-yellow-100 : #fff9c4; --color-yellow-200 : #fff59d; --color-yellow-300 : #fff176; --color-yellow-400 : #ffee58; --color-yellow-500 : #ffeb3b; --color-yellow-600 : #fdd835; --color-yellow-700 : #fbc02d; --color-yellow-800 : #f9a825; --color-yellow-900 : #f57f17; --color-yellow-1000: hsla(28, 92%, 43%, 1); --color-yellow-a100: #ffff8d; --color-yellow-a200: #ffff00; --color-yellow-a400: #ffea00; --color-yellow-a700: #ffd600; --color-amber-50 : #fff8e1; --color-amber-100 : #ffecb3; --color-amber-200 : #ffe081; --color-amber-300 : #ffd54f; --color-amber-400 : #ffca27; --color-amber-500 : #ffc107; --color-amber-600 : #ffb300; --color-amber-700 : #ffa000; --color-amber-800 : #ff8f00; --color-amber-900 : #ff6f00; --color-amber-1000: hsla(26, 100%, 40%, 1); --color-amber-a100: #ffe57f; --color-amber-a200: #ffd740; --color-amber-a400: #ffc400; --color-amber-a700: #ffab00; --color-orange-50 : #fff3e0; --color-orange-100 : #ffe0b2; --color-orange-200 : #ffcc80; --color-orange-300 : #ffb74d; --color-orange-400 : #ffa726; --color-orange-500 : #ff9800; --color-orange-600 : #fb8c00; --color-orange-700 : #f57c00; --color-orange-800 : #ef6c00; --color-orange-900 : #e65100; --color-orange-1000: hsla(21, 100%, 35%, 1); --color-orange-a100: #ffd180; --color-orange-a200: #ffab40; --color-orange-a400: #ff9100; --color-orange-a700: #ff6d00; --color-deep-orange-50 : #fbe9e7; --color-deep-orange-100 : #ffccbc; --color-deep-orange-200 : #ffab91; --color-deep-orange-300 : #ff8a65; --color-deep-orange-400 : #ff7043; --color-deep-orange-500 : #ff5721; --color-deep-orange-600 : #f4511e; --color-deep-orange-700 : #e64a19; --color-deep-orange-800 : #d84315; --color-deep-orange-900 : #bf360c; --color-deep-orange-1000: hsla(14, 88%, 30%, 1); --color-deep-orange-a100: #ff9e80; --color-deep-orange-a200: #ff6e40; --color-deep-orange-a400: #ff3d00; --color-deep-orange-a700: #dd2c00; --color-brown-50 : #efebe9; --color-brown-100 : #d7ccc8; --color-brown-200 : #bcaaa4; --color-brown-300 : #a1887f; --color-brown-400 : #8d6e62; --color-brown-500 : #795548; --color-brown-600 : #6d4c41; --color-brown-700 : #5d4037; --color-brown-800 : #4e342e; --color-brown-900 : #3e2723; --color-brown-1000: hsla(9, 28%, 10%, 1); --color-grey-50 : #fafafa; --color-grey-100 : #f5f5f5; --color-grey-200 : #eeeeee; --color-grey-300 : #e0e0e0; --color-grey-400 : #bdbdbd; --color-grey-500 : #9e9e9e; --color-grey-600 : #757575; --color-grey-700 : #616161; --color-grey-800 : #424242; --color-grey-900 : #212121; --color-grey-1000: #111111; --color-blue-grey-50 : #eceff1; --color-blue-grey-100 : #cfd8dc; --color-blue-grey-200 : #b0bec5; --color-blue-grey-300 : #90a4ae; --color-blue-grey-400 : #78909c; --color-blue-grey-500 : #607d8b; --color-blue-grey-600 : #546e7a; --color-blue-grey-700 : #455a64; --color-blue-grey-800 : #37474f; --color-blue-grey-900 : #263238; --color-blue-grey-1000: hsla(200, 19%, 8%, 1); } /* VARIABLES > COLOR HEREDADO ====================================================================================================================== Variables de color generales que adaptan su valor en función de la clase padre que suele ponerse en el body */ :root .red { --color-1000: var(--color-red-1000); --color-900 : var(--color-red-900); --color-800 : var(--color-red-800); --color-700 : var(--color-red-700); --color-600 : var(--color-red-600); --color-500 : var(--color-red-500); --color-400 : var(--color-red-400); --color-300 : var(--color-red-300); --color-200 : var(--color-red-200); --color-100 : var(--color-red-100); --color-50 : var(--color-red-50 ); } :root .pink { --color-1000: var(--color-pink-1000); --color-900 : var(--color-pink-900); --color-800 : var(--color-pink-800); --color-700 : var(--color-pink-700); --color-600 : var(--color-pink-600); --color-500 : var(--color-pink-500); --color-400 : var(--color-pink-400); --color-300 : var(--color-pink-300); --color-200 : var(--color-pink-200); --color-100 : var(--color-pink-100); --color-50 : var(--color-pink-50 ); } :root .purple { --color-1000: var(--color-purple-1000); --color-900 : var(--color-purple-900); --color-800 : var(--color-purple-800); --color-700 : var(--color-purple-700); --color-600 : var(--color-purple-600); --color-500 : var(--color-purple-500); --color-400 : var(--color-purple-400); --color-300 : var(--color-purple-300); --color-200 : var(--color-purple-200); --color-100 : var(--color-purple-100); --color-50 : var(--color-purple-50 ); } :root .deep-purple { --color-1000: var(--color-deep-purple-1000); --color-900 : var(--color-deep-purple-900); --color-800 : var(--color-deep-purple-800); --color-700 : var(--color-deep-purple-700); --color-600 : var(--color-deep-purple-600); --color-500 : var(--color-deep-purple-500); --color-400 : var(--color-deep-purple-400); --color-300 : var(--color-deep-purple-300); --color-200 : var(--color-deep-purple-200); --color-100 : var(--color-deep-purple-100); --color-50 : var(--color-deep-purple-50 ); } :root .indigo { --color-1000: var(--color-indigo-1000); --color-900 : var(--color-indigo-900); --color-800 : var(--color-indigo-800); --color-700 : var(--color-indigo-700); --color-600 : var(--color-indigo-600); --color-500 : var(--color-indigo-500); --color-400 : var(--color-indigo-400); --color-300 : var(--color-indigo-300); --color-200 : var(--color-indigo-200); --color-100 : var(--color-indigo-100); --color-50 : var(--color-indigo-50 ); } :root .blue { --color-1000: var(--color-blue-1000); --color-900 : var(--color-blue-900); --color-800 : var(--color-blue-800); --color-700 : var(--color-blue-700); --color-600 : var(--color-blue-600); --color-500 : var(--color-blue-500); --color-400 : var(--color-blue-400); --color-300 : var(--color-blue-300); --color-200 : var(--color-blue-200); --color-100 : var(--color-blue-100); --color-50 : var(--color-blue-50 ); } :root .light-blue { --color-1000: var(--color-light-blue-1000); --color-900 : var(--color-light-blue-900); --color-800 : var(--color-light-blue-800); --color-700 : var(--color-light-blue-700); --color-600 : var(--color-light-blue-600); --color-500 : var(--color-light-blue-500); --color-400 : var(--color-light-blue-400); --color-300 : var(--color-light-blue-300); --color-200 : var(--color-light-blue-200); --color-100 : var(--color-light-blue-100); --color-50 : var(--color-light-blue-50 ); } :root .cyan { --color-1000: var(--color-cyan-1000); --color-900 : var(--color-cyan-900); --color-800 : var(--color-cyan-800); --color-700 : var(--color-cyan-700); --color-600 : var(--color-cyan-600); --color-500 : var(--color-cyan-500); --color-400 : var(--color-cyan-400); --color-300 : var(--color-cyan-300); --color-200 : var(--color-cyan-200); --color-100 : var(--color-cyan-100); --color-50 : var(--color-cyan-50 ); } :root .teal { --color-1000: var(--color-teal-1000); --color-900 : var(--color-teal-900); --color-800 : var(--color-teal-800); --color-700 : var(--color-teal-700); --color-600 : var(--color-teal-600); --color-500 : var(--color-teal-500); --color-400 : var(--color-teal-400); --color-300 : var(--color-teal-300); --color-200 : var(--color-teal-200); --color-100 : var(--color-teal-100); --color-50 : var(--color-teal-50 ); } :root .green { --color-1000: var(--color-green-1000); --color-900 : var(--color-green-900); --color-800 : var(--color-green-800); --color-700 : var(--color-green-700); --color-600 : var(--color-green-600); --color-500 : var(--color-green-500); --color-400 : var(--color-green-400); --color-300 : var(--color-green-300); --color-200 : var(--color-green-200); --color-100 : var(--color-green-100); --color-50 : var(--color-green-50 ); } :root .light-green { --color-1000: var(--color-light-green-1000); --color-900 : var(--color-light-green-900); --color-800 : var(--color-light-green-800); --color-700 : var(--color-light-green-700); --color-600 : var(--color-light-green-600); --color-500 : var(--color-light-green-500); --color-400 : var(--color-light-green-400); --color-300 : var(--color-light-green-300); --color-200 : var(--color-light-green-200); --color-100 : var(--color-light-green-100); --color-50 : var(--color-light-green-50 ); } :root .lime { --color-1000: var(--color-lime-1000); --color-900 : var(--color-lime-900); --color-800 : var(--color-lime-800); --color-700 : var(--color-lime-700); --color-600 : var(--color-lime-600); --color-500 : var(--color-lime-500); --color-400 : var(--color-lime-400); --color-300 : var(--color-lime-300); --color-200 : var(--color-lime-200); --color-100 : var(--color-lime-100); --color-50 : var(--color-lime-50 ); } :root .yellow { --color-1000: var(--color-yellow-1000); --color-900 : var(--color-yellow-900); --color-800 : var(--color-yellow-800); --color-700 : var(--color-yellow-700); --color-600 : var(--color-yellow-600); --color-500 : var(--color-yellow-500); --color-400 : var(--color-yellow-400); --color-300 : var(--color-yellow-300); --color-200 : var(--color-yellow-200); --color-100 : var(--color-yellow-100); --color-50 : var(--color-yellow-50 ); } :root .amber { --color-1000: var(--color-amber-1000); --color-900 : var(--color-amber-900); --color-800 : var(--color-amber-800); --color-700 : var(--color-amber-700); --color-600 : var(--color-amber-600); --color-500 : var(--color-amber-500); --color-400 : var(--color-amber-400); --color-300 : var(--color-amber-300); --color-200 : var(--color-amber-200); --color-100 : var(--color-amber-100); --color-50 : var(--color-amber-50 ); } :root .orange { --color-1000: var(--color-orange-1000); --color-900 : var(--color-orange-900); --color-800 : var(--color-orange-800); --color-700 : var(--color-orange-700); --color-600 : var(--color-orange-600); --color-500 : var(--color-orange-500); --color-400 : var(--color-orange-400); --color-300 : var(--color-orange-300); --color-200 : var(--color-orange-200); --color-100 : var(--color-orange-100); --color-50 : var(--color-orange-50 ); } :root .deep-orange { --color-1000: var(--color-deep-orange-1000); --color-900 : var(--color-deep-orange-900); --color-800 : var(--color-deep-orange-800); --color-700 : var(--color-deep-orange-700); --color-600 : var(--color-deep-orange-600); --color-500 : var(--color-deep-orange-500); --color-400 : var(--color-deep-orange-400); --color-300 : var(--color-deep-orange-300); --color-200 : var(--color-deep-orange-200); --color-100 : var(--color-deep-orange-100); --color-50 : var(--color-deep-orange-50 ); } :root .brown { --color-1000: var(--color-brown-1000); --color-900 : var(--color-brown-900); --color-800 : var(--color-brown-800); --color-700 : var(--color-brown-700); --color-600 : var(--color-brown-600); --color-500 : var(--color-brown-500); --color-400 : var(--color-brown-400); --color-300 : var(--color-brown-300); --color-200 : var(--color-brown-200); --color-100 : var(--color-brown-100); --color-50 : var(--color-brown-50 ); } :root .grey { --color-1000: var(--color-grey-1000); --color-900 : var(--color-grey-900); --color-800 : var(--color-grey-800); --color-700 : var(--color-grey-700); --color-600 : var(--color-grey-600); --color-500 : var(--color-grey-500); --color-400 : var(--color-grey-400); --color-300 : var(--color-grey-300); --color-200 : var(--color-grey-200); --color-100 : var(--color-grey-100); --color-50 : var(--color-grey-50 ); } :root .blue-grey { --color-1000: var(--color-blue-grey-1000); --color-900 : var(--color-blue-grey-900); --color-800 : var(--color-blue-grey-800); --color-700 : var(--color-blue-grey-700); --color-600 : var(--color-blue-grey-600); --color-500 : var(--color-blue-grey-500); --color-400 : var(--color-blue-grey-400); --color-300 : var(--color-blue-grey-300); --color-200 : var(--color-blue-grey-200); --color-100 : var(--color-blue-grey-100); --color-50 : var(--color-blue-grey-50 ); } /* VARIABLES > REM ====================================================================================================================== Son las medidas en píxeles con su correspondiente valor en rem */ :root { /* Valores negativos */ ---60px: -3.7500rem; ---15px: -0.9375rem; ---14px: -0.875rem; ---12px: -0.7500rem; ---10px: -0.625rem; ---6px : -0.375rem; ---5px : -0.3125rem; ---4px : -0.2500rem; ---3px : -0.1875rem; ---2px : -0.125rem; ---1px : -0.0625rem; /* Valores del 1 al 100 */ --1px:.0625rem;--2px:.125rem;--3px:.1875rem;--4px:.250rem;--5px:.3125rem;--6px:.375rem;--7px:.4375rem;--8px:.5rem;--9px:.5625rem;--10px:.625rem;--11px:.6875rem;--12px:.750rem;--13px:.8125rem;--14px:.875rem;--15px:.9375rem;--16px:1rem;--17px:1.0625rem;--18px:1.125rem;--19px:1.1875rem;--20px:1.250rem;--21px:1.3125rem;--22px:1.375rem;--23px:1.4375rem;--24px:1.500rem;--25px:1.5625rem;--26px:1.625rem;--27px:1.6875rem;--28px:1.750rem;--29px:1.8125rem;--30px:1.875rem;--31px:1.9375rem;--32px:2rem;--33px:2.0625rem;--34px:2.125rem;--35px:2.1875rem;--36px:2.250rem;--37px:2.3125rem;--38px:2.375rem;--39px:2.4375rem;--40px:2.500rem;--41px:2.5625rem;--42px:2.625rem;--43px:2.6875rem;--44px:2.750rem;--45px:2.8125rem;--46px:2.875rem;--47px:2.9375rem;--48px:3rem;--49px:3.0625rem;--50px:3.125rem;--51px:3.1875rem;--52px:3.250rem;--53px:3.3125rem;--54px:3.375rem;--55px:3.4375rem;--56px:3.500rem;--57px:3.5625rem;--58px:3.625rem;--59px:3.6875rem;--60px:3.750rem;--61px:3.8125rem;--62px:3.875rem;--63px:3.9375rem;--64px:4rem;--65px:4.0625rem;--66px:4.125rem;--67px:4.1875rem;--68px:4.250rem;--69px:4.3125rem;--70px:4.375rem;--71px:4.4375rem;--72px:4.500rem;--73px:4.5625rem;--74px:4.625rem;--75px:4.6875rem;--76px:4.750rem;--77px:4.8125rem;--78px:4.875rem;--79px:4.9375rem;--80px:5rem;--81px:5.0625rem;--82px:5.125rem;--83px:5.1875rem;--84px:5.250rem;--85px:5.3125rem;--86px:5.375rem;--87px:5.4375rem;--88px:5.500rem;--89px:5.5625rem;--90px:5.625rem;--91px:5.6875rem;--92px:5.750rem;--93px:5.8125rem;--94px:5.875rem;--95px:5.9375rem;--96px:6rem;--97px:6.0625rem;--98px:6.125rem;--99px:6.1875rem;--100px:6.250rem; /* Valores superiores al 100 */ --105px: 6.5625rem; --115px: 7.1875rem; --120px: 7.5rem; --150px: 9.375rem; --180px: 11.25rem; --210px: 13.125rem; --240px: 15rem; --270px: 16.875rem; --300px: 18.75rem; --600px: 37.5rem; } /* ======================================================================================================================== BASE ======================================================================================================================== Definimos los elementos HTML comunes y los elementos estructurales de la página */ html { height: 100%; font-size: 100%; } body, body > main { min-height: 100%; } body { background-color: var(--color-base); color: var(--color-font); font-family: var(--font-general); font-weight: normal; letter-spacing: normal; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-font-feature-settings: 'kern' 1; -moz-font-feature-settings: 'kern' 1; overflow-y: scroll; /* Mostramos siempre la barra de scroll vertical */ overflow-x: hidden; /* Ocultamos lo que sobre a nivel horizontal */ padding: var(--115px) 0 0 0; } body.noheader { padding-top: 0; } body.nav-fixed { padding-top: var(--50px); } body > main { position: relative; width: 100%; background-color: var(--color-base); padding-top: 0; padding-bottom: var(--30px); } a { text-shadow: none; color: #000; } a:focus, a:hover, a:active { outline: 0; text-decoration: none; transition: color .1s linear 0s, background-color .1s linear 0s, opacity .2s linear 0s ; } p { display: block; font-size: var(--14px); line-height: var(--22px); font-weight: normal; letter-spacing: .01em; margin: 0 0 var(--10px) 0; font-style: normal; white-space: normal; } hr { border: 0; border-bottom: var(--4px) solid var(--color-neutral-dark); margin-top: var(--25px); margin-bottom: var(--25px); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-general); letter-spacing: normal; font-weight: 300; color: var(--color-title); } h1 { font-size: var(--32px); line-height: var(--48px); } h2 { font-size: var(--29px); line-height: var(--45px); margin-bottom: var(--15px); } h2.chapter { font-weight: 400; border-bottom: var(--1px) solid #ddd; margin-bottom: var(--20px); padding-bottom: var(--10px); } h3 { font-size: var(--29px); line-height: var(--33px); } h4 { font-size: var(--23px); line-height: var(--32px); border-bottom: 1px dashed #ccc; padding-bottom: var(--5px); } h5 { font-size: var(--19px); line-height: var(--28px); font-weight: normal; } code, kbd, pre, samp { font-family: var(--font-secondary); font-size: var(--15px); } ::-moz-selection { background: rgba(0,0,0,.1); } ::selection { background: rgba(0,0,0,.1); } ::-webkit-input-placeholder { opacity: .5; text-transform: none; } ::-moz-placeholder { opacity: .5; text-transform: none; } :-ms-input-placeholder { opacity: .5; text-transform: none; } :-moz-placeholder { opacity: .5; text-transform: none; } ::-webkit-scrollbar { height: var(--6px); width: var(--6px); -webkit-appearance: } ::-webkit-scrollbar-track { background: rgba(0,0,0,.2); } ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.6); } @media (max-width: 48rem ) { /* 768px */ ::-webkit-scrollbar { height: var(--4px); width: var(--4px); } } input { font-family: var(--font-general); } input[type="time"], input[type="date"], input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } input[type=time]::-webkit-inner-spin-button, input[type=time]::-webkit-outer-spin-button, input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } .container-fluid { padding-left: var(--30px); padding-right: var(--30px); } .container-fixed .container-fluid { position: relative; margin: 0 auto; max-width: 112.50rem; } .container-fluid-forced, .container-fluid-forced .container-fluid { max-width: none !important; } .container-fluid.container-slim { max-width: 90rem !important; margin: 0 auto; } .container-ultra-slim { max-width: 50rem; margin: 0 auto; } @media (max-width: 64rem) { /* 1024px */ .container-fluid { padding-left: var(--15px); padding-right: var(--15px); } } @media (max-width: 47.9375rem) { /* 767px */ body { padding: 0; } body > main { padding-bottom: var(--15px); } } /* ======================================================================================================================== HEADER ======================================================================================================================== Definimos los elementos que conforman la banda superior con el logotipo y el menú */ #header { position: fixed; top: 0; left: 0; height: var(--60px); width: 100%; padding: 0; /* background-color: var(--color-grey-900); */ color: #fff; background-color: #fff; color: #333; -webkit-backface-visbility: hidden; backface-visibility: hidden; z-index: 100; } #header .grid { display: grid; grid-template-areas: 'logo menu profile'; grid-template-columns: auto 1fr auto; height: 100%; padding-right: 0; } #header .logo { grid-area: logo; align-self: center; font-family: var(--font-secondary); font-size: var(--24px); /* color: #fff; */ /* color: #333; */ color: #000; font-weight: 600; padding-right: var(--30px); } #header .logo img { height: var(--30px); } /* HEADER > MENU PRINCIPAL ====================================================================================================================*/ #header .menu { display: flex; padding: 0; margin: 0; justify-content: flex-end; } #header .menu > li { display: inline-block; position: relative; } #header .menu > li > a, #header .menu > li > button { height: 100%; line-height: var(--60px); display: inline-block; padding: 0 var(--45px); font-weight: 600; text-transform: uppercase; font-size: var(--12px); font-weight: bold; font-family: var(--font-secondary); cursor: pointer; color: var(--color-800); letter-spacing: 1px; border: 0; border-left: 1px solid var(--color-50); text-align: center; background: none; outline: 0; } .desktop #header .menu > li:hover > a, .desktop #header .menu > li:hover > button { background: var(--color-50); color: var(--color-700); } #header .menu.open .action-menu-toggle button { background: #fff; color: var(--color-700); } #header .menu > li.active > a, #header .menu > li.active > button { background: var(--color-700); color: #fff; } #header .menu li a[disabled], #header .menu li button[disabled] { pointer-events: none; opacity: .5; color: #000; } #header .menu > li > a > i, #header .menu > li > button > i { top: var(--4px); position: relative; font-size: var(--20px); } /* HEADER > MENU SECUNDARIO ====================================================================================================================*/ #header .menu .sub { opacity: 0; pointer-events: none; position: absolute; top: 100%; right: 0; margin: 0; padding: 0; background: #fff; box-shadow: 0 0 0 0 rgba(60,64,67,0.30), 0 2px 6px 0 rgba(60,64,67,0.15); transition: opacity .1s ease, transform .5s ease; transform: translateY( var(---3px) ); } body.notouch #header .menu > li:hover > .sub, body.touch #header .menu > li > .sub, #header .menu > li.open > .sub { opacity: 1; pointer-events: auto; transform: translateY(0); } #header .sub > li { display: block; width: calc( var(--100px) + var(--100px) + var(--50px) ); border-top: var(--1px) solid var(--color-50); } #header .sub > li > a, #header .sub > li > button { display: block; position: relative; width: 100%; overflow: hidden; padding: var(--12px) var(--15px) var(--12px) var(--15px); line-height: var(--18px); text-align: left; font-size: var(--12px); font-weight: bold; font-family: var(--font-secondary); letter-spacing: var(--1px); color: var(--color-700); background: none; outline: 0; border: 0; cursor: pointer; transition: none; } body.notouch #header .sub > li > a:hover, body.notouch #header .sub > li > button:hover, #header .sub > li.active > a, #header .sub > li.active > button { background: var(--color-50); } #header .sub > li > a:active { transition: none; background: var(--color-amber-100); } #header .sub > li > a > i, #header .sub > li > button > i { opacity: 0.3; position: absolute; right: 0; top: 50%; margin-top: -1.1rem; width: var(--40px); text-align: center; font-size: var(--60px); color: var(--color-100); transform: rotate( -15deg ); } body.notouch #header .sub > li > a:hover > i, body.notouch #header .sub > li > button:hover > i, #header .sub > li.active > a > i, #header .sub > li.active > button > i { opacity: 1; color: var(--color-500); } /* HEADER > ELEMENTOS DEL MENÚ ====================================================================================================================*/ #header .buttons { display: grid; grid-gap: var(--1px); background: var(--color-50); grid-template-columns: repeat( auto-fit, minmax( 55px, 1fr ) ); border-top: var(--1px) solid var(--color-50); } #header .buttons button { background: #fff; border: 0; padding: var(--5px); outline: 0; } body.notouch #header .buttons button:hover { transition: all .3s ease; background: var(--color-50); } #header .buttons button:active { transition: none; background: var(--color-amber-100); } #header .user-name { display: block; line-height: var(--45px); padding: 0 var(--15px); font-size: var(--12px); font-weight: bold; font-family: var(--font-secondary); color: #666; letter-spacing: var(--1px); } #header .user-image { width: var(--64px); height: var(--64px); margin: var(--10px) var(--10px) 0 var(--10px); border-radius: 50%; } #header .user-icon { display: inline-block; width: var(--64px); height: var(--64px); margin: var(--10px) var(--10px) 0 var(--10px); color: #333; font-size: var(--36px); line-height: var(--64px); background: #eee; border-radius: 50%; } #header .action-font-up { font-weight: bold; font-size: 0.9em; } #header .action-font-up { font-weight: bold; font-size: 1.3em; } /* HEADER > RESPONSIVE ====================================================================================================================*/ @media (min-width: 64.0625rem) and (max-width: 119.9375rem) { /* 1025px - 1919px */ #header .menu > li > a, #header .menu > li > button { padding: 0 var(--30px); } } @media (min-width: 48rem) and (max-width: 64rem) { /* 768px - 1024px */ #header { z-index: 100; } } @media (max-width: 47.9375rem) { /* 767px */ #header { position: relative; top: 0; left: 0; height: var(--55px); z-index: 100; } #header .logo img { height: var(--25px); line-height: var(--55px); } #header .menu > li > a, #header .menu > li > button { line-height: var(--55px); } } @media (max-width: 64rem) { /* 1024px */ #header .logo { font-size: var(--20px); } #header .menu:not(.fixed) { display: none; position: fixed; top: var(--55px); left: 0; right: 0; bottom: 0; z-index: 1; background: #fff; overflow-y: auto; } #header .menu:not(.fixed).open { display: block; } #header .menu:not(.fixed) > li { display: block; border-top: var(--1px) solid #eee; } #header .menu:not(.fixed) > li > a, #header .menu:not(.fixed) > li > button { width: 100%; text-align: left; padding: 0 var(--15px); color: #666; border-left: 0; } #header .menu.fixed > li > a, #header .menu.fixed > li > button { padding: 0; width: var(--55px); } #header .menu:not(.fixed) .sub { position: relative; left: 0; right: 0; z-index: 999; box-shadow: none; padding-left: var(--20px); background: var(--color-700); border-top: var(--1px) solid var(--color-100); opacity: 0; transition: all .3s ease; } #header .menu:not(.fixed) li.open .sub, #header .menu:not(.fixed) li.active .sub { display: block; opacity: 1; border-top-color: var(--color-700); } #header .menu:not(.fixed) .sub > li { width: 100%; background: #fff; border: 0; border-left: var(--1px) solid var(--color-700); border-bottom: var(--1px) solid var(--color-100); } #header .menu:not(.fixed) li.open .sub > li:last-child, #header .menu:not(.fixed) li.active .sub > li:last-child { border-bottom: 0; } #header .menu > li.open > a, #header .menu > li.open > button { color: var(--color-700); } #header .menu > li.active > a, #header .menu > li.active > button { color: var(--color-700); background: #fff; } #header .menu .action-submenu-toggle::after { position: absolute; right: 0; top: 0; font-family: var(--font-icons); content: "\f107"; width: var(--45px); height: var(--57px); color: #000; text-align: center; line-height: var(--55px); } #header .menu li.open .action-submenu-toggle::after, #header .menu li.active .action-submenu-toggle::after { content: "\f106"; } #header .buttons { background: var(--color-100); border-top-color: var(--color-100); } } /* ======================================================================================================================== NAV ======================================================================================================================== Definimos la banda con la miga de pan y las notificaciones */ #nav { width: 100%; z-index: 99; overflow: hidden; -webkit-backface-visbility: hidden; backface-visibility: hidden; position: fixed; top: var(--60px); left: 0; height: var(--55px); line-height: var(--54px); background-color: var(--color-700); box-shadow: inset 0px -13px 20px -18px rgb(0 0 0 / 50%); /*background: var(--color-900);*/ } #nav .breadcrumb { margin: 0; max-width: 100%; overflow-y: hidden; overflow-x: auto; white-space: nowrap; font-family: var(--font-secondary); text-transform: uppercase; padding: 0; height: var(--55px); line-height: var(--55px); } #nav .breadcrumb li { position: relative; display: inline-block; } #nav .breadcrumb > li + li:before { position: relative; top: 2px; line-height: 0; font-family: var(--font-icons); content: '\f105'; font-weight: bold; color: #fff; } #nav .breadcrumb > li + li:nth-child(2):before { /*content: "\f111";*/ } #nav .breadcrumb a { margin-left: var(--8px); margin-right: var(--5px); font-family: var(--font-secondary); font-size: var(--11px); font-weight: 600; letter-spacing: 1px; opacity: .7; } #nav .breadcrumb a:hover, #nav .breadcrumb a.active { opacity: 1; } #nav .breadcrumb a[href="javascript:;"], #nav .breadcrumb a[href=""], #nav .breadcrumb a[href="#"] { /*opacity: 1;*/ pointer-events: none; } #nav .breadcrumb li:first-child a { margin-left: 0; } #nav .breadcrumb a, #nav .breadcrumb i, #nav .breadcrumb span, #nav .breadcrumb li { color: #fff; } #nav .breadcrumb i { display: none; font-size: var(--16px); top: var(--1px); position: relative; } #nav .breadcrumb i.home { display: inline-block; } body.nav-fixed #header { z-index: 0; } body.nav-fixed #nav { position: fixed; top: 0; left: 0; } body.nav-hidden { padding-top: var(--60px); } body.nav-hidden #nav { display: none; } @media (max-width: 47.9375rem) { /* 767px */ #nav { position: relative; top: auto; height: var(--50px); line-height: var(--50px); } #nav .container-fluid { padding: 0; } #nav .breadcrumb { padding: 0 var(--15px); line-height: var(--50px); } #nav .breadcrumb i { display: inline-block; } #nav .breadcrumb span { display: none; } #nav .submenu { grid-template-columns: repeat( auto-fit, minmax( 55px, 1fr ) ); grid-gap: 2px; border: 0; } #nav .submenu li a { line-height: var(--50px); height: var(--50px); } #nav .submenu li.active:before { bottom: -0.22rem; } #nav .submenu i { display: inline-block; } #nav .submenu span { display: none; } body.nav-hidden { padding-top: 0; } } /* ======================================================================================================================== SUBHEADER ======================================================================================================================== Definimos la zona para el título de la página, el buscador y los botones de acción */ #subheader { line-height: inherit; padding: var(--15px) var(--30px); border-bottom: var(--1px) solid rgba( 0,0,0,.05 ); box-shadow: inset 0px -3px 11px -7px rgb(0 0 0 / 15%); /* background: var(--color-50); */ background: var(--color-grey-200); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "title empty actions"; overflow-x: auto; } #subheader h1 { grid-area: title; margin-bottom: 0; padding-top: var(--6px); padding-bottom: var(--7px); padding-right: var(--30px); font-weight: 400; line-height: var(--32px); white-space: nowrap; color: #000; } #subheader .empty { grid-area: "empty"; } #subheader input, #subheader select, #subheader textarea { border-color: var(--color-100); font-family: var(--font-secondary); font-size: var(--14px); font-weight: 600; } #subheader input:hover, #subheader select:hover, #subheader textarea:hover { border-color: var(--color-200); } #subheader select { cursor: pointer; } #subheader select option { font-family: var(--font-secondary); font-size: var(--14px); font-weight: 600; color: #333; } #subheader .focused input, #subheader .focused select, #subheader .focused textarea { border-color: var(--color-900); } #subheader .btn { padding: var(--9px) var(--17px) var(--9px) var(--17px); margin-top: var(--1px); } #subheader .k-select { font-family: var(--font-secondary); font-size: var(--14px); font-weight: 600; } #subheader .k-select.select:after { content: "\f078"; font-family: var(--font-icons); display: flex; align-items: center; justify-content: center; background: var(--color-50); position: absolute; top: 5px; right: 5px; width: 28px; bottom: 5px; z-index: 2; pointer-events: none; } #subheader .k-select .selected { grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) ); } #subheader .k-select:not(.multiple) .selected div { margin: var(--3px) var(--2px) var(--3px) var(--3px); padding: var(--2px) var(--2px) var(--3px) var(--3px); width: calc( 100% - var(--6px) ); height: var(--40px); } #subheader .k-select .selected .remove { background: var(--color-50); border-radius: 0; } #subheader .k-select .selected .remove:hover { background: var(--color-100); } #subheader .arrows-prev-next { display: flex; width: 100%; border: 2px solid var(--color-100); background: #fff; } #subheader .form-group.arrows-prev-next button, #subheader .form-group.arrows-prev-next a { display: inline-block; width: 28px; text-align: center; background: var(--color-50); line-height: var(--35px); margin: var(--3px); transition: all .3s ease; color: #333; border: 0; font-size: var(--18px); outline: 0; cursor: pointer; } #subheader .form-group.arrows-prev-next button:hover, #subheader .form-group.arrows-prev-next a:hover { background: var(--color-100); } #subheader .form-group.arrows-prev-next input { display: inline-block; width: calc( 100% - 56px ); height: var(--40px); line-height: var(--40px); border: 0; background: #fff; text-align: center; white-space: nowrap; font-weight: 600; font-size: var(--14px); font-family: var(--font-secondary); color: #000; overflow: hidden; margin-top: var(--1px); cursor: default; } #subheader .buttons-full-width { grid-area: actions; white-space: nowrap; } #subheader .actions { grid-area: actions; display: grid; grid-gap: var(--10px); grid-template-columns: 1fr minmax( 9.375rem, 18.75rem ) auto auto; /* 150px - 300px */ align-items: flex-start; grid-template-areas: "buttons input undo export"; } #subheader .buttons { grid-area: buttons; white-space: nowrap; text-align: right; } #subheader .buttons > * { min-width: 9.375rem; /* 150px */ margin-left: var(--5px); } @media screen and (max-width: 104.9375rem) { /* 1679px */ #subheader { grid-template-columns: 1fr; grid-template-areas: "actions"; overflow-x: auto; padding: var(--15px) 0; } #subheader h1, #subheader .empty { display: none; } #subheader .buttons-full-width { padding: 0 var(--30px); } #subheader .actions { grid-template-areas: "input undo export buttons"; grid-template-columns: minmax( 7.5rem, 18.75rem ) auto auto 1fr; /* 120px - 300px */ grid-gap: var(--5px); padding: 0 var(--30px); } #subheader .buttons > * { min-width: 0; margin-left: 0; } } @media screen and (max-width: 64rem) { /* 1024px */ #subheader .buttons-full-width, #subheader .actions { padding: 0 var(--15px); } } @media (max-width: 47.9375rem) { /* 767px */ #subheader { padding: var(--10px) 0; } } /* ======================================================================================================================== FILTERS ======================================================================================================================== Definimos la zona para los filtros de la página */ #filters { padding: var(--30px) 0 0 0; font-family: var(--font-secondary); } #filters .filters-applied { padding-top: var(--15px); padding-bottom: var(--15px); font-size: var(--12px); } #filters .filters-applied span { display: inline-block; margin-right: var(--3px); } #filters .filters-applied span:empty { display: none; } #filters .filters-applied span:not(:empty)::after { content: ", "; } #filters input, #filters select, #filters textarea { border: var(--2px) solid rgba(0,0,0,.2); } #filters .focused input, #filters .focused select, #filters .focused textarea { border-color: #777; } #filters .k-select .selected .remove { border-radius: 0; } @media screen and (min-width: 1024px){ #filters .modal { opacity: 1; pointer-events: all; } } @media (min-width: 64.0625rem) and (max-width: 119.9375rem) { /* 1025px - 1919px */ #filters { padding-top: var(--15px); } } @media (min-width: 64.0625rem) { /* 1025px */ #filters .filters-applied { display: none; } #filters .modal { display: block; position: relative; top: initial; left: initial; width: initial; background: transparent; z-index: 1; } #filters .modal header, #filters .modal footer { display: none; } #filters .modal main { padding: 0; background: transparent; margin: 0; transition: none; } } @media (max-width: 64rem) { /* 1024px */ #filters { padding: 0; } #filters { cursor: pointer; background: #fff; font-weight: bold; color: #000; } #filters .filters-applied span { display: inline-block; color: var(--color-green-500); } #filters .modal .container-fluid { padding: 0; } #filters input, #filters select, #filters textarea { margin-bottom: var(--15px); } } /* ======================================================================================================================== BOTONES ======================================================================================================================== Definición de los elementos con forma de botón */ .btn { display: inline-block; position: relative; padding: var(--8px) var(--17px); border: var(--2px) solid transparent; border-radius: var(--3px); outline: none; box-shadow: none; background-image: none; /* color: #626262; */ color: #000; background: #fff; text-align: center; font-size: var(--11px); line-height: var(--21px); font-family: var(--font-secondary); font-weight: bold; text-transform: uppercase; letter-spacing: .02rem; text-shadow: none; cursor: pointer; transition: all .3s ease; } .btn:focus { outline: none; box-shadow: 3px 3px 3px 0px rgba(0,0,0,.2); } .btn.disabled, .btn[disabled] { opacity: .3; pointer-events: none; cursor: auto; } .btn i { font-size: var(--13px); position: relative; top: var(--1px); } /* BOTONES > COLORES HEREDADOS CLAROS ====================================================================================================================*/ .btn-default { /*background: var(--color-grey-200);*/ border-color: var(--color-grey-400); /*color: var(--color-grey-900);*/ } .btn-default:hover { /*background: #fff;*/ background: var(--color-grey-50); } .btn-info { background: #fff; border-color: var(--color-300); } .btn-info:hover { background: var(--color-50); color: #000; } .btn-success { /* background: var(--color-light-green-100); */ border-color: var(--color-light-green-300); /* color: var(--color-light-green-900); */ } .btn-success:hover { background: var(--color-light-green-50); /* border-color: var(--color-light-green-300); */ } .btn-warning { background: #fff; border-color: var(--color-amber-300); } .btn-warning:hover { background: var(--color-amber-50); } .btn-danger { /* background: var(--color-pink-a400); */ border-color: var(--color-pink-a400); /* color: #fff; */ background: #fff; } .btn-danger:hover { background: var(--color-pink-50); /* background: var(--color-pink-a200); border-color: var(--color-pink-a200); */ } /* BOTONES > COLORES HEREDADOS OSCUROS ====================================================================================================================*/ .btn-info-dark { color: #fff; background: var(--color-900); border-color: var(--color-900); } .btn-info-dark:hover, .btn-info-dark:focus { color: #fff; background: var(--color-800); border-color: var(--color-800); } .btn-warning-dark { background: #FFD54F; color: #333; } .btn-warning-dark:hover, .btn-warning-dark:focus { background: #FFCA28; color: #000; } /* BOTONES > COLORES DEFINIDOS ====================================================================================================================*/ .btn-grey { background: var(--color-grey-800); border-color: var(--color-grey-800); color: #fff; } .btn-grey:hover { background: var(--color-grey-900); border-color: var(--color-grey-800); } .btn-pink { background: var(--color-pink-a400); border-color: var(--color-pink-a400); color: #fff; } .btn-pink:hover { background: var(--color-pink-a200); border-color: var(--color-pink-a200); } /* ======================================================================================================================== VENTANA MODAL ======================================================================================================================== Estilos relacionados con las vengtanas modales */ .modal { display: grid; opacity: 0; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: transparent; z-index: 10; grid-template-columns: 1fr minmax( auto, 50rem ) 1fr; grid-template-areas: 'left header right' 'left main right' 'left footer right' ; grid-template-rows: minmax( var(--85px), 1fr ) auto minmax( var(--85px), 1fr ) ; z-index: 100; overflow-y: auto; pointer-events: none; transition: opacity .3s ease, transform .3s ease, background .5s ease; transform: translateY( var(---10px) ); } .modal.open { opacity: 1; transform: translateY( 0 ); pointer-events: auto; background: rgba(30,30,30,0.5); } .modal > header { grid-area: header; align-self: end; max-width: 100%; overflow-x: auto; overflow-y: hidden; margin: var(--30px) var(--30px) 0 var(--30px); height: var(--55px); border-top-left-radius: var(--3px); border-top-right-radius: var(--3px); } .modal:not(.modal-confirm) > header { background: var(--color-900); box-shadow: inset 0px -3px 11px -7px rgb(0 0 0 / 15%); } .modal > header h1 { position: relative; z-index: 1; font-family: var(--font-secondary); font-size: var(--11px); font-weight: 600; letter-spacing: 0.02rem; text-transform: uppercase; color: #fff; margin: 0; line-height: var(--59px); padding: 0 var(--32px); } .modal > main { grid-area: main; margin: 0 var(--30px); padding: var(--30px) var(--30px) var(--20px) var(--30px); background: #eee; transition: all .3s ease; overflow-y: auto; } .modal > footer { display: grid; grid-template-columns: repeat( auto-fit, minmax( 55px, 1fr ) ); grid-gap: var(--10px); grid-area: footer; align-self: start; padding: var(--15px) var(--30px) var(--15px) var(--30px); margin: 0 var(--30px) var(--30px) var(--30px); background: var(--color-grey-50); border-bottom-left-radius: var(--3px); border-bottom-right-radius: var(--3px); box-shadow: inset 0px 7px 25px -30px rgb(0,0,0); } .modal > footer .btn i { font-size: var(--15px); top: var(--2px); } .modal .full-width { position: relative; background: var(--color-50); padding: var(--15px) var(--30px); margin-left: -1.875rem; margin-right: -1.875rem; margin-top: var(--15px); margin-bottom: var(--15px); } .modal .full-width:before { content: ""; position: absolute; left: calc( 50% - var(--18px) ); border-left: var(--18px) solid transparent; border-right: var(--18px) solid transparent; top: -0.5rem; border-bottom: var(--8px) solid var(--color-50); } .modal .full-width.padding-left { padding-left: calc( var(--100px) + var(--70px) ); } .modal.modal-overflow-scroll > main { overflow-y: scroll; } .modal.modal-overflow-visible > main { overflow: visible; } .modal .k-select .selected { grid-template-columns: repeat( auto-fit, minmax( 49%, 1fr ) ); } /* MODAL > MODAL CONFIRM ====================================================================================================================== Defimos los estilos visuales de una ventana de confirmación */ .modal.modal-confirm { z-index: 200; grid-template-columns: 1fr minmax( auto, 45rem ) 1fr; grid-template-rows: minmax( max-content, 1fr ) auto minmax( var(--85px), 1fr ); } .modal.modal-confirm > header { height: auto; background: #fff; overflow: visible; padding: var(--30px) var(--30px) 0 var(--30px); } .modal.modal-confirm > header h1 { text-align: center; color: #000; font-size: var(--20px); line-height: var(--26px); font-weight: 600; text-transform: none; margin-bottom: var(--15px); padding: 0; } .modal.modal-confirm > main { padding-top: 0; padding-bottom: var(--27px); background: #fff; color: #000; font-size: var(--18px); line-height: var(--25px); } .modal.modal-confirm > footer { background: var(--color-grey-300); grid-gap: var(--10px); } .modal.modal-confirm > footer .btn { /*border: 0;*/ padding-top: var(--10px); padding-bottom: var(--10px); } /* MODAL > MODAL WITH TABS ====================================================================================================================== Redefinimos los estilos para las ventanas modales que contienen pestañas */ .modal-with-tabs > main { background: #fff; } .modal.modal-with-tabs input, .modal.modal-with-tabs select, .modal.modal-with-tabs textarea, .modal.modal-with-tabs .k-select:not(.multiple) .selected span:first-child { background: #fff; } .modal.modal-with-tabs label, .modal.modal-with-tabs .label { color: #000; } .modal-with-tabs > footer { /*background: var(--color-neutral-darken);*/ } /* MODAL > MODAL CONFIRM COLORS ====================================================================================================================== Redefinimos los estilos para las ventanas en función de su dramatismo */ /*.modal-confirm.modal-info footer { background: var(--color-blue-100); } .modal-confirm.modal-warning footer { background: var(--color-amber-100); } .modal-confirm.modal-danger footer { background: var(--color-pink-100); } .modal-confirm .btn { color: #fff; } .modal-confirm .btn-default { background: var(--color-grey-800); } .modal-confirm .btn-default:hover { background: var(--color-grey-1000); } .modal-confirm .btn-info { background: var(--color-blue-700); } .modal-confirm .btn-info:hover { background: var(--color-blue-900); } .modal-confirm .btn-warning { background: var(--color-amber-700); } .modal-confirm .btn-warning:hover { background: var(--color-amber-900); }*/ /* MODAL > MODAL TYPE 2 ====================================================================================================================== Nueva combinación de colores al estilo de Evotempo */ .modal.modal-type2 > header { background: var(--color-grey-200); } .modal.modal-type2 > header h1 { color: #000; } .modal.modal-type2 > main { background: #fff; } .modal.modal-type2 > footer { background: var(--color-grey-50); } .modal.modal-type2 input, .modal.modal-type2 select, .modal.modal-type2 textarea, .modal.modal-type2 .k-select:not(.multiple) .selected span:first-child { background: var(--color-grey-100); } .modal.modal-type2 .k-select:not(.multiple) .selected span.remove { background: var(--color-grey-300); } .modal.modal-type2 .focused input, .modal.modal-type2 .focused select, .modal.modal-type2 .focused textarea { border-color: var(--color-300); } .modal.modal-type2 .k-select ul { background: var(--color-50); color: #333; border: 0; } .modal.modal-type2 .k-select li { font-weight: 600; border-bottom: 1px solid var(--color-100); } .modal.modal-type2 .k-select li:last-child { border: 0; } .modal.modal-type2 .k-select li.active { cursor: pointer; background: var(--color-200); color: #fff; } .modal.modal-type2 .k-select li.active:hover, .modal.modal-type2 .k-select li:hover { background: var(--color-200); color: #fff; } /* MODAL > MODAL INSIDE ====================================================================================================================== Mostramos una ventana modal como un panel embebido */ @media screen and (min-width: 105rem) { /* 1680px */ body.modal-inside { position: fixed; overflow: hidden; width: 100%; height: 100%; } body.modal-inside .container-fixed { max-width: none; } body.modal-inside > main { display: grid; padding: 0; grid-template-columns: minmax( 60%, 65% ) minmax( 37.5rem, auto ); } .modal-inside-left { height: calc( 100vh - var(--65px) - var(--50px) ); overflow-y: scroll; padding: 0; } .modal-inside-right .modal { display: grid; opacity: 1; transform: translateY(0); position: initial; top: initial; left: initial; grid-template-areas: 'main' 'footer'; grid-template-columns: 1fr; grid-template-rows: 1fr auto; background: var(--color-neutral-dark); } .modal-inside-right header { display: none; } .modal-inside-right main { max-height: calc( 100vh - var(--65px) - var(--50px) - var(--70px) ); overflow-y: auto; margin: 0; padding: var(--15px); } .modal-inside-right footer { margin: 0; padding: var(--15px); } .modal-inside-right footer .action-modal-close { display: none; } } /* MODAL > RESPONSIVE ====================================================================================================================*/ .modal.modal-fluid { grid-template-columns: 1fr minmax( auto, 1fr ) 1fr; } .modal.modal-wider { grid-template-columns: 1fr minmax( auto, 56rem ) 1fr; } .modal.modal-narrow { grid-template-columns: 1fr minmax( auto, 44rem ) 1fr; } @media screen and (max-width: 64rem) { /* 1024px */ .modal .full-width { margin-left: -0.9375rem; /* -15px */ margin-right: -0.9375rem; /* -15px */ } } @media screen and (max-width: 47.9375rem) { /* 767px */ .modal .full-width { padding: var(--15px); } .modal .k-select .selected { grid-template-columns: 1fr; } .modal .form .horizontal { display: block; } .modal .full-width.padding-left { padding-left: var(--30px); padding-right: var(--30px); } } @media (max-width: 64rem) { /* 1024px */ .modal { grid-template-rows: minmax( var(--65px), 1fr ) auto minmax( var(--65px), 1fr ) ; } .modal header { margin: var(--15px) var(--15px) 0 var(--15px); height: var(--50px); } .modal header h1 { line-height: var(--54px); padding: 0 var(--17px); } .modal main { padding: var(--15px) var(--15px) var(--5px) var(--15px); margin: 0 var(--15px); } .modal.modal-confirm > header { padding: var(--15px) var(--15px) 0 var(--15px); } .modal.modal-confirm > header h1 { font-size: var(--18px); line-height: var(--23px); } .modal.modal-confirm > main { font-size: var(--16px); line-height: var(--21px); } } @media (min-width: 48rem) and (max-width: 64rem) { /* 768px - 1024px */ .modal footer { padding: var(--15px) var(--15px) var(--15px) var(--15px); margin: 0 var(--15px) var(--15px) var(--15px); } } @media (max-width: 47.9375rem) { /* 767px */ .modal footer { grid-gap: var(--5px); padding: var(--10px) var(--15px) var(--10px) var(--15px); margin: 0 var(--15px) var(--15px) var(--15px); } .modal > footer .btn { padding-left: 0; padding-right: 0; } } /* ======================================================================================================================== FORMULARIOS ======================================================================================================================== Definición de los estilos para los elementos del formulario */ /* FORMULARIOS > RESET ====================================================================================================================== Redefinición de los elementos HTML ligados a los formularios */ label, input, button, select, textarea, input:-webkit-autofill::first-line { font-size: var(--14px); font-weight: 600; line-height: var(--22px); padding: 0; } input, input:-webkit-autofill::first-line, select, textarea { background: #fff; } input[type='radio'], input[type='checkbox'] { line-height: normal; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: var(--16px); width: var(--16px); } select[multiple], select[size] { height: auto !important; } input:focus, select:focus, textarea:focus, input[type='file']:focus, input[type='radio']:focus, input[type='checkbox']:focus { outline: none; box-shadow: none; background: transparent; } /* Quitamos el color amarillo cuando estamos rellenando campos con valores guardados */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 var(--100px) white inset; } /* FORMULARIOS > ELEMENTOS ====================================================================================================================== Redefinición de los elementos HTML ligados a los formularios */ .form .row { grid-gap: var(--10px); } .form-group { position: relative; border: 0; padding: 0; width: 100%; max-width: 100%; transition: all .3s ease; margin-bottom: 0; } .form-group label, .form-group .label { position: relative; font-size: var(--11px); display: inline-block; margin: 0; font-family: var(--font-secondary); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: #000; } .form-group input, .form-group select, .form-group textarea { background: #fff; border: var(--2px) solid rgba(0,0,0,.12); border-radius: var(--3px); height: auto; padding: 0 var(--10px); margin: 0; width: 100%; min-height: var(--45px); color: #333; transition: border .3s ease, padding .2s ease; } .form-group input:hover, .form-group select:hover, .form-group textarea:hover { border: var(--2px) solid rgba(0,0,0,.2); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { box-shadow: 3px 3px 3px 0px rgb(0 0 0 / 20%); } .form-group input { height: var(--45px); line-height: var(--45px); } .form-group select { line-height: var(--45px); cursor: pointer; } .form-group textarea { resize: none; padding: var(--10px); } .form-radio, .form-checkbox { border: var(--2px) solid rgba(0,0,0,.07) !important; } .form-radio label, .form-checkbox label { display: inline; font-size: var(--14px); font-weight: 600; line-height: var(--22px); font-family: var(--font-primary); color: #333; text-transform: none; cursor: pointer; } .form-group input[type="radio"], .form-group input[type="checkbox"] { height: auto; min-height: 0; display: inline-block; width: auto; } .form-group:not(.horizontal) .note { font-size: var(--13px); background: var(--color-neutral-darken); margin-top: var(---2px); margin-bottom: var(---4px); padding: var(--12px); font-weight: 500; color: #333; } .form-group.horizontal .note { font-size: var(--13px); padding: var(--4px); font-weight: 500; color: #333; margin-bottom: var(--5px); } .form-group .function { width: 50px; height: 40px; line-height: 40px; background: transparent; border: 0; padding: 0; position: absolute; right: var(--2px); top: var(--2px); cursor: pointer; outline: 0 !important; } .form-group .function:active { color: #E91E63; } /* FORMULARIOS > ESTADOS ====================================================================================================================== Clases ligadas al estado de un elemento de formulario */ .form-group.required label:after, .form-group.required .label:after { position: relative; top: var(---6px); left: var(--5px); content: " "; width: var(--5px); height: var(--5px); border-radius: 50%; background: var(--color-pink-a400); z-index: 1; display: inline-block; } .form-group.disabled { pointer-events: none; opacity: .6; } .form-group.readonly { pointer-events: none; cursor: default; } .form-group.readonly ::-moz-selection, .form-group.disabled ::-moz-selection { background: transparent; } .form-group.readonly ::selection, .form-group.disabled ::selection { background: transparent; } .form-group.readonly select, .form-group.disabled select { -moz-appearance: none; -webkit-appearance: none; } .form-group.readonly select::-ms-expand, .form-group.disabled select::-ms-expand { display: none; } /* FORMULARIOS > CON FOCO ====================================================================================================================== Clases ligadas al estilo de un elemento de formulario con foco */ .form-group.focused input, .form-group.focused select, .form-group.focused textarea, .form-group.focused .trumbowyg-box { border-color: var(--color-900); } .form-group.focused label, .form-group.focused .label { color: #333 !important; } /* FORMULARIOS > ERROR ====================================================================================================================== Estilos visuales para mostrar al usuario que existe un error en un campo de formulario */ .form-group.has-error.focused { border-color: #FFA000 !important; color: #333 !important; } .form-group.has-error .error { display: block; margin: 0; padding: 0; font-size: var(--12px); font-weight: 500; color: #957D32; } .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border: var(--2px) solid #F9D975 !important; background-color: #fffef9 !important; } .form-group.has-error.focused input, .form-group.has-error.focused select, .form-group.has-error.focused textarea, .form-group.has-error.focused .trumbowyg-box { border-color: #FFA000 !important; color: #333 !important; } /* Es el mensaje de error general que aparece cuando el error no corresponde a ningún campo, como por ejemplo cuando un usuario hace login y le indicamos que el email o la contraseña son incorrectos */ .global-error { display: none; margin-top: var(--10px); color: var(--color-pink-a400); text-align: center; font-weight: 600; font-size: var(--15px); } /* FORMULARIOS > IMPORTANT ====================================================================================================================== Estilos visuales para mostrar un campo importante resaltado del resto */ .form-group.important input, .form-group.important select, .form-group.important textarea, .form-group.important .k-select:not(.multiple) .selected div { background: var(--color-grey-800); color: #fff; } .form-group.important.focused input, .form-group.important.focused select, .form-group.important.focused textarea, .form-group.important.focused .trumbowyg-box { border-color: var(--color-grey-700); } .form-group.important.focused .k-select:not(.multiple) .selected div { background: var(--color-grey-700); } /* FORMULARIOS > DARK ====================================================================================================================== Estilos visuales para mostrar un campo un poco más oscuro de lo normal */ .form-group.dark input, .form-group.dark select, .form-group.dark textarea, .form-group.dark .k-select:not(.multiple) .selected div { background: var(--color-grey-800); color: #fff; } .form-group.dark.focused input, .form-group.dark.focused select, .form-group.dark.focused textarea, .form-group.dark.focused .trumbowyg-box { border-color: var(--color-grey-900); } .form-group.dark.focused .k-select:not(.multiple) .selected div { background: var(--color-grey-900); } /* FORMULARIOS > CONTADOR ====================================================================================================================== Estilos visuales para el contador de caracteres de un campo */ .form-group .counter { display: none; float: right; font-size: var(--11px); line-height: var(--22px); font-family: var(--font-secondary); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: #888; } /* Esta clase solo se muestra cuando un .form-group con [data-maxlength] ha excedido el número de caracteres */ .count.exceeded { color: red; } /* FORMULARIOS > HORIZONTAL ====================================================================================================================== Estilos visuales para mostrar los campos con el label y el elemento de formulario en la misma línea */ .form .horizontal { display: grid; grid-template-columns: 9.6875rem 1fr; /* 155px */ } .form .horizontal > label { position: relative; font-size: var(--11px); display: inline-block; /* color: #444; */ color: #000; margin: 0; font-family: var(--font-secondary); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; padding-right: var(--15px); } .form .horizontal .form-group label { top: var(---4px); } .form .horizontal .error { grid-column: 2; } .form .horizontal .note { grid-column: 2; } .form .horizontal .trumbowyg-box, .form .horizontal .trumbowyg-editor { margin: 0; } .form .horizontal-auto { grid-template-columns: auto 1fr; align-items: center; } .form .horizontal-auto > label { padding-right: var(--10px); } .form .horizontal-wider { grid-template-columns: 18.75rem 1fr; /* 300px */ } /* FORMULARIOS > STICKY ====================================================================================================================== Estilos visuales para mostrar los botones de forma fija en la parte inferior de la pantalla */ .footer-sticky-buttons { text-align: right; position: fixed; z-index: 3; bottom: -100px; opacity: 0; left: 0; right: 0; background: var(--color-50); padding: var(--15px) 0; transition: all .6s ease; } .sticked-buttons, .form-sticky.changed, .form-sticky.show-sticky { /*padding-bottom: var(--50px);*/ /* Tengo que hacer que sea el body el que añada el padding porque puede haber más elementos fuera del formulario */ } .sticked-buttons .footer-sticky-buttons, .form-sticky.changed .footer-sticky-buttons, .form-sticky.show-sticky .footer-sticky-buttons { bottom: 0; opacity: 1; } /* FORMULARIOS > PREFIJOS Y SUFIJOS ====================================================================================================================== Estilos visuales para mostrar cajas pegadas a un input por delante o por detrás */ .form-group.prefix .box > span, .form-group.suffix .box > span { height: var(--45px); padding: 0 var(--10px); line-height: var(--45px); font-weight: 600; font-size: var(--16px); background: rgba(0,0,0,0.12); color: #000; } .form-group.prefix .box > span:first-child { border-top-left-radius: var(--5px); border-bottom-left-radius: var(--5px); } .form-group.suffix .box > span:last-child { border-top-right-radius: var(--5px); border-bottom-right-radius: var(--5px); } .form-group.prefix.focused .box > span, .form-group.suffix.focused .box > span { color: #fff; } .form-group.prefix .box, .form-group.suffix .box { display: grid; width: 100%; border-radius: var(--3px); } .form-group.focused .box { background: var(--color-900); } .form-group.has-error .box > span { background: #F9D975; color: #000; } .form-group.focused.has-error .box > span { background: #FFA000; color: #000; } .form-group.prefix .box { border-top-left-radius: var(--5px); border-bottom-left-radius: var(--5px); grid-template-columns: auto 1fr; } .form-group.prefix input, .form-group.prefix select { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; } .form-group.suffix .box { grid-template-columns: 1fr auto; } .form-group.suffix input, .form-group.suffix select { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } .form-group.prefix.suffix .box { grid-template-columns: auto 1fr auto; } .form-group.prefix.suffix input, .form-group.prefix.suffix select { border-left: 0; border-right: 0; } /* Desactivada */ .form-group[data-enabled="0"] select, .form-group[data-enabled="0"].focused select { background: var(--color-grey-50) !important; border-color: var(--color-grey-400) !important; opacity: 0.5; } /* Publicada */ .form-group[data-enabled="1"] select, .form-group[data-enabled="1"].focused select { background: var(--color-green-50) !important; border-color: var(--color-green-400) !important; } /* En Borrador */ .form-group[data-enabled="2"] select, .form-group[data-enabled="2"].focused select { background: var(--color-yellow-50) !important; border-color: var(--color-yellow-400) !important; } /* BASURA! HAY QUE UNIFICAR PREFIJO, SUFIJO Y BOTONERA .form-group.prefix .box.with-buttons > span, .form-group.suffix .box.with-buttons > span { padding: 0; font-size: 1px; border: 2px solid transparent; } .form-group .box.with-buttons button { height: var(--41px); border:0; font-size: var(--16px); padding: 0 var(--5px); background: rgba(0,0,0,.1); width: var(--40px); margin-right: var(--2px); } .form-group .box.with-buttons button:last-child { margin-right: 0; } */ /* FORMULARIOS > RESPONSIVE ====================================================================================================================*/ @media (max-width: 64rem) { /* 1024px */ .footer-sticky-buttons { padding: var(--8px) 0; } .footer-sticky-buttons footer { display: grid; align-self: start; grid-template-columns: repeat( auto-fit, minmax( 55px, 1fr ) ); grid-gap: var(--8px); background: rgba( 255, 255, 255, .9 ); } } @media (max-width: 47.9375rem) { /* 767px */ .footer-sticky-buttons .btn { padding-left: 0; padding-right: 0; } } /* ======================================================================================================================== GRID ======================================================================================================================== Clases relacionadas con los grids */ .grid-container { padding-top: var(--30px); } .grid-container img.language { /* Revisar etiqueta .flag */ height: var(--24px); } .grid-container img.language.disabled { opacity: .2; } /* GRID > [DATA-GRID] ====================================================================================================================== Resaltamos los filtros activados o que tienen un valor seleccionado */ [data-grid].actived, [data-grid][value]:not([value=""]) { background: var(--color-green-50) !important; border-color: var(--color-green-400) !important; } /* GRID > PAGINACIÓN ====================================================================================================================== Contenedor en el que vamos a mostrar la paginación de resultados */ .pagination { padding: var(--15px) 0 var(--15px) 0; text-align: right; } .pagination .results { color: #333; float: left; font-size: var(--16px); } .pagination .btn-disabled:hover { pointer-events: none; } .action-grid-input-pagination input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; text-align: center; color: #fff; line-height: var(--45px); pointer-events: none; opacity: 0; border: 0; max-width: 100%; width: auto; min-width: none; } .action-grid-input-pagination.open input { opacity: 1; pointer-events: auto; } .action-grid-input-pagination.open .hide-on-click { opacity: 0; pointer-events: none; } /* GRID > RESPONSIVE ====================================================================================================================*/ @media (min-width: 64.0625rem) and (max-width: 119.9375rem) { /* 1025px - 1919px */ .grid-container { padding-top: var(--15px); } .pagination .results { font-size: var(--14px); } } @media (min-width: 48rem) and (max-width: 64rem) { /* 768px - 1024px */ .grid-container { padding: 0; } .pagination .results { font-size: var(--14px); } } @media (max-width: 47.9375rem) { /* 767px */ .grid-container { padding-top: 0; } .pagination { padding: var(--10px) 0 var(--15px) 0; text-align: center; } .pagination .results { float: none; display: block; padding-bottom: var(--5px); font-size: var(--12px); } } /* ======================================================================================================================== TABLA ======================================================================================================================== Definimos el estilo base de las tablas con la clase .table */ .table { width: 100%; max-width: 100%; overflow: auto; margin-top: 1px; /* Margen para mostrar el borde de una celda seleccionado */ margin-bottom: 1px; /* Margen para mostrar el borde de una celda seleccionado */ } .table thead tr th { text-transform: uppercase; font-family: var(--font-secondary); font-weight: 600; padding: var(--14px) var(--10px); vertical-align: middle; font-size: var(--13px); padding: var(--13px) var(--10px); } /* TABLA > CABECERA ====================================================================================================================== Títulos de las columnas */ .table thead tr.titles { padding: var(--5px) 0; } .table thead tr.titles th { position: relative; background: var(--color-grey-300); color: var(--color-grey-1000); white-space: nowrap; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-right: var(--1px) solid rgba(0,0,0,.15); } .table thead tr.titles th:first-child { border-left: var(--1px) solid var(--color-grey-300); } .table thead tr.titles th:last-child { border-right: var(--1px) solid var(--color-grey-300); } .table thead tr.titles th:hover { transition: all .3s ease; } .table thead tr.titles th:not(.nosortable) { cursor: pointer; } /* TABLAS > ORDEN ====================================================================================================================== Estilos visuales para indicar al usuario que un tabla está ordenada por un campo */ .table th.sorting_desc:before, .table th.sorting_asc:before { position: absolute; padding: var(--1px); left: 0; display: block; width: 100%; font-family: var(--font-icons); text-align: center; font-size: var(--15px); line-height: var(--15px); font-weight: bold; text-rendering: auto; -webkit-font-smoothing: antialiased; } .table th.sorting_desc:before { top: 0; content: '\f106'; } .table th.sorting_asc:before { bottom: 0; content: '\f107'; } .table thead tr.titles th:not(.nosortable):hover { background: var(--color-grey-400); border-color: var(--color-grey-400); } .table thead tr.titles th.sorting_asc, .table thead tr.titles th.sorting_desc, .table thead tr.titles th.sorting_asc:hover, .table thead tr.titles th.sorting_desc:hover { background: var(--color-grey-800); border-top-color: var(--color-grey-800); border-bottom-color: var(--color-grey-800); color: #fff; } /* TABLAS > BODY ====================================================================================================================== Definición de estilos para el contenido de las tablas */ .table tbody tr td { font-size: var(--14px); background: #fff; padding: var(--10px); vertical-align: middle; border-right: var(--1px) solid rgba(0,0,0,.07); border-bottom: var(--1px) solid rgba(0,0,0,.07); /* transition: background .1s ease; */ color: #000; } .table tbody tr td:last-child { border-right: 0; } .table tbody tr:last-child td { border-bottom: var(--1px) solid var(--color-neutral-dark); } .table tbody tr td:first-child { border-left: var(--1px) solid var(--color-neutral-dark); } .table tbody tr td:last-child { border-right: var(--1px) solid var(--color-neutral-dark); } .table tbody strong { font-weight: 600; } .table tbody a, .table tbody a:hover { color: #2a2a2a; } /* TABLAS > STRIPPED ====================================================================================================================== Mostramos las filas y/o columnas pares con otro color de fondo */ .table-stripped tbody tr:nth-child(even) td, .table-stripped tbody tr td:nth-child(even) { background: var(--color-grey-50); } .table-stripped-rows tbody tr:nth-child(even) td { background: var(--color-grey-50); } .table-stripped-columns tbody tr td:nth-child(even) { background: var(--color-grey-50); } /* TABLAS > TR STATUS ====================================================================================================================== Mostramos las filas con una apariencia especial en función del estado de la fila (como por ejemplo en sitemap) */ .table tbody tr.disabled td { color: rgba( 0, 0, 0,.4 ); /* opacity: .5; */ } .table tbody tr.drafted td { background: var(--color-orange-50); } .table tbody tr.opened td { background: var(--color-50); transition: none !important; } .table tbody tr.darker td { /*background: rgba(179, 229, 252, 0.85);*/ background: var(--color-50); } /* TABLAS > TABLE HOVER ====================================================================================================================== Mostramos un efecto hover al pasar por encima de una fila en las tablas que contienen esta clase */ .table-hover tbody tr:hover td, .table-hover tbody tr.keyup td { background: #FFFDE7; cursor: pointer; } .table-hover tbody tr.opened:hover td { background: #e1f5fe; } .table-hover tbody tr.darker:hover td { /*background: rgba(179, 229, 252, 0.85);*/ background: var(--color-50); } .table-hover tbody tr.selected td, .table-hover tbody tr.selected:hover td { /*background: var(--color-yellow-100);*/ /* Ponemos el !important para que quede por encima de grid-editable */ background: var(--color-yellow-100) !important; } /* TABLAS > RESPONSIVE ====================================================================================================================== Estilos para dotar a las tablas de capacidad elástica para todos los dispositivos */ .table-responsive { display: block; width: 100%; overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; /* Añadimos este padding lateral por el outline de los campos editables (sale cortado en la primera y la última columna). PUEDE QUE HAYA QUE ELIMINARLO EN LA VERSIÓN RESPONSIVE */ padding-right: var(--2px); padding-left: var(--2px); } /* TABLAS > OTROS ELEMENTOS ====================================================================================================================== Estilos de otros elementos que pueden aparecer dentro de una tabla */ .table tbody select { border: 2px solid #eee; padding: 6px; background: #fff; cursor: pointer; } /* TABLAS > HELPERS ====================================================================================================================== Definición de clases de ayuda a la maquetación */ .table td.nowrap { white-space: nowrap; } /* TABLAS > ÁRBOL ====================================================================================================================== Clases necesarias para mostrar los resultados del grid en forma de árbol */ .table tbody tr td.tree { padding: 0; } .table .tree div { padding: var(--7px) var(--15px); } .table .tree:not(.level0) div { border-left: 1px dashed var(--color-neutral-dark); } .level1 .pull { margin-left: var(--30px) } .level2 .pull { margin-left: var(--60px) } .level3 .pull { margin-left: var(--90px) } .level4 .pull { margin-left: var(--120px) } .level5 .pull { margin-left: var(--150px) } .level6 .pull { margin-left: var(--180px) } .level7 .pull { margin-left: var(--210px) } .level8 .pull { margin-left: var(--240px) } .level9 .pull { margin-left: var(--270px) } .level10 .pull { margin-left: var(--300px) } /* TABLAS > RESPONSIVE ====================================================================================================================*/ @media (max-width: 64rem) { /* 768px - 1024px */ .table thead tr th { font-size: var(--12px); padding: var(--12px) var(--8px); } } @media (min-width: 48rem) and (max-width: 64rem) { /* 768px - 1024px */ } @media (max-width: 47.9375rem) { /* 767px */ .table-responsive { padding-top: 0; border: 0; } .table-no-responsive { padding-left: var(--10px); padding-right: var(--10px); } } /* ======================================================================================================================== MÓDULOS ======================================================================================================================== Módulos de sección, utilizados generalmente en la pantalla inicial para dar acceso a las diferentes pantallas */ .module-title { margin: var(--30px) 0 var(--10px) 0; font-weight: 300; letter-spacing: var(--3px); text-transform: uppercase; font-size: var(--23px); color: var(--color-900); margin-bottom: var(--15px); } .desktop .module-title { /* border-bottom: var(--2px) solid var(--color-50); */ border-bottom: 1px solid rgba(0,0,0,.1); } .module-grid { display: grid; width: 100%; grid-template-columns: repeat( 6, 1fr ); grid-auto-rows: minmax(140px, auto); grid-gap: var(--20px); } .module { display: flex; flex: 1; flex-direction: column; align-items: stretch; justify-content: center; padding: var(--20px) var(--6px); background-color: #fff; border-radius: var(--3px); /*box-shadow: 0 var(--1px) var(--1px) rgba(0,0,0,.05);*/ box-shadow: 0 var(--2px) var(--4px) 0 rgb(34 41 47 / 5%); color: var(--color-900); text-align: center; position: relative; overflow: hidden; } .module > i { display: block; text-align: center; font-size: var(--60px); transition: all .5s ease; transform: translateY( var(--2px) ); } .module span { display: block; margin: var(--10px) 0 0 0; letter-spacing: normal; font-weight: 400; color: #626262; text-align: center; max-width: 100%; overflow: hidden; font-size: var(--20px); line-height: var(--26px); margin: var(--10px) 0 0 0; transition: all .5s ease; transform: translateY( var(---2px) ); } /* MÓDULOS > HOVER ====================================================================================================================*/ .module.nothover { cursor: auto; } .module.disabled { opacity: 0.5; pointer-events: none; } .module:not(.nothover):hover, .module.active { color: var(--color-900); background: var(--color-50); transition: background .6s ease; } .module:not(.nothover):hover > i, .module.active i { opacity: 1; transform: translateY(0); transition: all .5s ease; } .module:not(.nothover):hover span, .module.active span { opacity: 1; transform: translateY(0); transition: all .5s ease; color: #000; } /* MÓDULOS > NÚMERO ====================================================================================================================== Número que se muestra en la esquina superior derecha */ .module .number { position: absolute; top: var(--5px); right: var(--5px); z-index: 2; background: var(--color-100); color: var(--color-900); font-size: var(--20px); display: inline-block; width: var(--36px); height: var(--36px); line-height: var(--36px); text-align: center; border-radius: var(--3px); font-weight: bold; } .module:hover .number, .module.active .number { background: var(--color-200); transition: all .3s ease; } .module .number.warning { background: var(--color-amber-100); color: #333; } .module:hover .warning, .module.active .warning { background: var(--color-amber-200); } .module .number.danger { background: var(--color-red-100); color: #333; } .module:hover .danger, .module.active .danger { background: var(--color-red-200); } .module .number.success { background: var(--color-light-green-100); color: var(--color-light-green-900); } .module:hover .success, .module.active .success { background: var(--color-light-green-200); } /* MÓDULOS > RESUMEN ====================================================================================================================== Es el módulo con el estilo "Resumen", sin animación y con letras más grandes */ .module-resume { display: grid; width: 100%; grid-template-columns: repeat( 6, 1fr ); grid-auto-rows: minmax(140px, auto); grid-gap: var(--20px); } .module-resume > * { display: grid; align-content: center; padding: var(--15px) var(--6px); background: #fff; border-radius: var(--3px); transition: all .3s ease; } .module-resume .title { letter-spacing: normal; font-weight: 400; color: #000; text-align: center; max-width: 100%; overflow: hidden; font-size: var(--20px); line-height: var(--26px); margin: var(--10px) 0 0 0; transition: all .5s ease; } .module-resume .quantity { text-align: center; font-size: var(--40px); } .module-resume a:hover { cursor: pointer; } .module-resume a.warning:hover { background: var(--color-amber-50); } .module-resume a.success:hover { background: var(--color-green-50); } .module-resume a.info:hover { background: var(--color-blue-50); } .module-resume a.danger:hover { background: var(--color-red-50); } .module-resume .warning .quantity { color: var(--color-amber-900); } .module-resume .success .quantity { color: var(--color-green-800); } .module-resume .info .quantity { color: var(--color-blue-900); } .module-resume .danger .quantity { color: var(--color-red-900); } /* MÓDULOS > RESPONSIVE ====================================================================================================================*/ @media (min-width: 64.0625rem) and (max-width: 119.9375rem) { /* 1025px - 1919px */ .module-title { font-size: var(--21px); } .module-grid { grid-template-columns: repeat( 6, 1fr ); grid-auto-rows: minmax(135px, auto); grid-gap: var(--15px); } .module i { font-size: var(--55px); } .module span { font-size: var(--18px); line-height: var(--25px); } .module-resume { grid-template-columns: repeat( 6, 1fr ); grid-auto-rows: minmax(135px, auto); grid-gap: var(--15px); } .module-resume .title { font-size: var(--18px); line-height: var(--25px); } .module-resume .quantity { font-size: var(--30px); } } @media (min-width: 48rem) and (max-width: 64rem) { /* 768px - 1024px */ .module-title { font-size: var(--19px); text-align: center; } .module-grid { grid-template-columns: repeat( 3, 1fr ); grid-auto-rows: minmax(130px, auto); grid-gap: var(--15px); } .module i { font-size: var(--50px); } .module span { font-size: var(--18px); line-height: var(--25px); } .module-resume { grid-template-columns: repeat( 3, 1fr ); grid-auto-rows: minmax(130px, auto); grid-gap: var(--15px); } .module-resume .title { font-size: var(--18px); line-height: var(--25px); } .module-resume .quantity { font-size: var(--26px); } } @media (max-width: 47.9375rem) { /* 767px */ .module-title { font-size: var(--16px); text-align: center; margin: var(--15px) 0 var(--10px) 0; } .module-grid { grid-template-columns: repeat( 2, 1fr ); grid-auto-rows: minmax(120px, auto); grid-gap: var(--10px); } .module i { font-size: var(--45px); } .module span { font-size: var(--16px); line-height: var(--22px); margin: var(--10px) 0 0 0; } .module .number { font-size: var(--14px); width: var(--26px); height: var(--26px); line-height: var(--26px); } .module-resume { grid-template-columns: 1fr; grid-gap: var(--10px); grid-auto-rows: minmax(90px, auto); } .module-resume .title { font-size: var(--16px); line-height: var(--22px); margin: var(--10px) 0 0 0; } .module-resume .quantity { font-size: var(--26px); } } .k-news { display: grid; grid-template-columns: repeat( 4, 1fr ); grid-auto-rows: minmax(135px, auto); grid-gap: var(--15px); } .k-news .item { padding: 0; background-color: #fff; border-radius: var(--3px); box-shadow: 0 var(--1px) var(--1px) rgba(0,0,0,.05); /*color: var(--color-900);*/ transition: all .3s ease; } .k-news .item:hover { background: var(--color-50); } .k-news .image { display: block; height: 180px; background-position: center; background-size: cover; position: relative; } .k-news .image .date_in { background: rgba(255,255,255, .8); bottom: var(--5px); right: var(--5px); position: absolute; padding: var(--1px) var(--5px); display: inline-block; font-size: var(--13px); font-weight: 500; } .k-news .description { padding: var(--15px); line-height: var(--18px); font-size: var(--13px); } .k-news p, .k-news .date_in { color: #333 !important; } .k-news .title { display: block; font-size: var(--16px); line-height: var(--21px); text-transform: uppercase; font-family: var(--font-secondary); font-weight: bold; } .k-news .btn-view-all { float: right; } @media (min-width: 64.0625rem) and (max-width: 119.9375rem) { /* 1025px - 1919px */ .k-news { display: grid; grid-template-columns: repeat( 4, 1fr ); grid-auto-rows: minmax(135px, auto); grid-gap: var(--15px); } } @media (min-width: 48rem) and (max-width: 64rem) { /* 768px - 1024px */ .k-news { grid-template-columns: repeat( 3, 1fr ); grid-auto-rows: minmax(130px, auto); grid-gap: var(--15px); } } @media (max-width: 47.9375rem) { /* 767px */ .k-news { grid-template-columns: 1fr; grid-auto-rows: minmax(120px, auto); grid-gap: var(--10px); } } /* ======================================================================================================================== NOTIFICACIONES ======================================================================================================================== Son los mensajes que mostramos al usuario en la cabecera y en las ventanas modales para indicarle qué ha sucedido con lo que acaba de hacer */ .notification { position: relative; font-family: var(--font-secondary); font-size: var(--11px); font-weight: 600; letter-spacing: 0.02rem; text-transform: uppercase; color: #fff; margin: 0; cursor: pointer; transition: background .2s ease; box-shadow: inset 0px -13px 20px -18px rgb(0 0 0 / 50%); } .modal.modal-confirm > header { position: relative; } .modal-confirm .notification { position: absolute; top: 0; left: 0; right: 0; z-index: 2; } .notification .container-fluid { overflow-y: hidden; overflow-x: auto; white-space: nowrap; margin-right: var(--55px); /*padding-right: var(--65px) !important;*/ } #nav .notification .container-fluid { height: var(--55px); line-height: var(--59px); } .modal .notification .container-fluid { padding: 0 var(--32px); height: var(--55px); line-height: var(--59px); max-width: none; } .notification.loading .container-fluid { position: relative; z-index: 1; } .notification.loading .bar { background: rgba( 0,0,0,.2 ); position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; width: 0; } .notification:not(.loading)::before { content: "\f00d"; position: absolute; right: 0; top: 0; bottom: 0; /*width: var(--55px);*/ min-width: var(--55px); height: var(--55px); line-height: var(--55px); z-index: 1; text-align: center; font-family: var(--font-icons); font-size: var(--16px); pointer-events: none; } /* NOTIFICACIONES > ESTADOS ====================================================================================================================== Definimos los colores de las notificaciones */ .notification.success { background: var(--color-400); } .notification.success:hover { background: var(--color-500); } .notification.success::before { background: var(--color-600); } .notification.warning { background: var(--color-amber-200); color: #000; } .notification.warning:hover { background: var(--color-amber-300); } .notification.warning::before { background: var(--color-amber-400); } .notification.loading { background: var(--color-1); } .notification.server_error { background: var(--color-grey-800); } .notification.server_error:hover { background: var(--color-grey-700); } .notification.server_error::before { background: var(--color-grey-900); } /* NOTIFICACIONES > RESPONSIVE ====================================================================================================================*/ @media (max-width: 64rem) { /* 1024px */ .modal .notification .container-fluid { padding: 0 var(--17px); height: var(--50px); line-height: var(--54px); } } @media (max-width: 47.9375rem) { /* 767px */ #nav .notification .container-fluid { padding: 0 var(--15px); height: var(--50px); line-height: var(--54px); } .notification .container-fluid { margin-right: var(--40px); } .notification:not(.loading)::before { min-width: var(--40px); } } /* ======================================================================================================================== KA TABS ======================================================================================================================== Es el componente que utilzamos para mostrar en pestañas el contenido. */ .k-tabs header { display: grid; grid-template-columns: repeat( auto-fit, minmax( 55px, 1fr ) ); margin-bottom: 0; border-color: transparent; grid-gap: var(--6px); } .k-tabs header button { position: relative; top: var(--2px); border: 0; border-bottom: 2px solid transparent; background: #ccc; padding: var(--10px); cursor: pointer; text-transform: uppercase; outline: none; color: #333; border-top-left-radius: var(--3px); border-top-right-radius: var(--3px); outline: none; } .k-tabs header button:not(.disabled):not(.active):hover { background: #ddd; color: var(--color-900); transition: background .3s ease; } .k-tabs header button.active, .k-tabs header button:not(.disabled):focus { color: #333; background: var(--color-neutral-light); border-bottom-color: var(--color-neutral-light); } .k-tabs header img { height: var(--24px); width: auto; } .k-tabs header span { padding-left: var(--10px); text-transform: uppercase; font-weight: bold; } .k-tabs header i { font-size: var(--20px); } .k-tabs main { background: var(--color-neutral-light); padding: var(--30px); } .k-tabs footer { background: var(--color-neutral-light); padding: 0 var(--30px) var(--15px) var(--30px); text-align: right; } .k-tabs .k-tab { display: none; } .k-tabs .k-tab.active { display: block; } .k-tabs header button.disabled { opacity: .2; cursor: default; } .k-tabs.white main, .k-tabs.white footer { background: #fff; } .k-tabs.white input, .k-tabs.white select, .k-tabs.white textarea { background: var(--color-grey-100); } /*.k-tabs.white header button:not(.disabled):not(.active):hover { background: #ddd; color: var(--color-900); transition: background .3s ease; }*/ .k-tabs.white header button.active, .k-tabs.white header button:not(.disabled):focus { color: #333; background: #fff; border-bottom-color: #fff; } @media (max-width: 119.9375rem) { /* 1919px */ .k-tabs main { padding: var(--30px) var(--15px) var(--15px) var(--15px); } .k-tabs footer { padding: 0 var(--15px) var(--15px) var(--15px); } } @media (max-width: 72rem) { /* 1919px */ .k-tabs footer { display: grid; grid-gap: var(--10px); grid-template-columns: repeat( auto-fit, minmax( 55px, 1fr ) ); } } /* ======================================================================================================================== KA SELECT ======================================================================================================================== Es un sustituto al componente tradicional de select. Incorpora un buscador y permite definir máscaras al registro */ .k-select { position: relative; } .k-select input { position: relative; z-index: 2; } .k-select ul { font-size: var(--14px); display: none; opacity: 0; position: absolute; top: 100%; left: 0; width: 100%; z-index: 2; background: #fff; border: var(--2px) solid rgba(0,0,0,.07); list-style: none; color: #000; padding: 0; max-height: calc( 10rem + 4px ); overflow-y: auto; margin: 0; } .k-select ul.open { display: block; opacity: 1; z-index: 4; margin-bottom: var(--15px); } .k-select li { display: grid; padding: var(--5px) var(--10px); cursor: pointer; } .k-select li.group, .k-select li.group:hover { padding-left: var(--10px); font-weight: bold; cursor: default; pointer-events: none; border-top-color: var(--color-100); border-bottom-color: var(--color-100); background: var(--color-100); color: #000; text-transform: uppercase; } .k-select li.active { cursor: pointer; background: #f2f2f2; } .k-select li.added, .k-select li.hidden { display: none; } /* KA SELECT > SELECCIONADOS ====================================================================================================================== Definimos el estilo de los elementos seleccionados */ .k-select .selected { display: grid; grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) ); font-weight: 600; } .k-select .selected span { padding: var(--7px) var(--10px); transition: all .3s ease; } .k-select .selected .remove { background: rgba( 0,0,0, .05); cursor: pointer; border-top-right-radius: var(--5px); border-bottom-right-radius: var(--5px); } .k-select .selected .remove:hover { background: rgba( 0,0,0, .15); } .k-select:not(.multiple) .selected { position: absolute; top: 0; z-index: 3; width: 100%; color: #333; } .k-select:not(.multiple) .selected div { display: inline-grid; background: #fff; color: #333; margin: var(--2px); padding: var(--3px); transition: all .3s ease; grid-template-columns: 1fr auto; font-size: var(--14px); width: calc( 100% - var(--4px) ); border-radius: var(--3px); } .k-select:not(.multiple) .selected div span:not(.remove) { white-space: nowrap; overflow: hidden; cursor: pointer; } .k-select.multiple .selected { grid-gap: var(--5px); margin-top: var(--5px); } .k-select.multiple .selected div { display: inline-grid; grid-template-columns: 1fr auto; border-radius: var(--3px); border: var(--2px) solid rgba( 0,0,0, .05); background: var(--color-grey-100); font-size: var(--14px); color: #333; transition: all .3s ease; } .k-select.multiple.wider .selected div { width: 100%; } .k-select.multiple.position-bottom ul { top: var(--45px); } .k-select.multiple.position-bottom .selected div { margin-bottom: 0; } .k-select.selected-bottom ul { top: var(--45px); } /* KA SELECT > RESET ====================================================================================================================== Definimos el botón de reset */ .k-select .select_reset { display: none; position: absolute; top: var(--4px); right: var(--4px); height: var(--37px); width: var(--30px); border: 0; outline: none; line-height: var(--37px); transition: all .3s ease; background: rgba( 0,0,0, .05); border-top-right-radius: var(--5px); border-bottom-right-radius: var(--5px); cursor: pointer; z-index: 2; } .k-select .select_reset:hover { background: rgba( 0,0,0, .15); } .k-select.multiple .select_reset { display: block; } /* KA SELECT > HELPERS ====================================================================================================================== Definimos los estilos de ayuda para corregir algunos problemas de maqeutación */ /* Mostramos la lista completa de opciones, si limitarla en altura */ .k-select.nomaxheight ul { max-height: none; overflow-y: visible !important } /* Impedimos que las opciones hagan doble línea */ .k-select.nowrap li { white-space: nowrap; overflow: hidden; } /* Mostramos el icono de flecha abajo cuando el k-select es de tipo "select" */ .k-select.select .fa-times:before { content: "\f078"; } /* Impedimos que se ejecute cualquier evento js cuando el k-select está deshabilitado */ .k-select.disabled { pointer-events: none; } /* Ocultamos el botónm de reset y eliminar cuando el k-select está deshabilitado */ .k-select.disabled span.remove, .k-select.disabled .select_reset { display: none; } /* Mostramos el k-select con un color diferente mientras se hace la llamada asíncrona de Ajax */ .k-select-loading { background: #f1f8e9 !important; color: #7cb342 !important; border-color: #7cb342 !important; } /* Mostramos el k-select con un color diferente mientras se hace la llamada asíncrona de Ajax */ .modal .k-select ul { overflow-y: scroll; } /* KA SELECT > TYPE 1 ====================================================================================================================== Se supone que son los estilos visuales para que el k-select se muestre como un listado con imagen a la izquierda */ .k-select-type1 li { grid-template-columns: var(--50px) 1fr; } .k-select-type1 li i { display: inline-block; background: rgba( 0,0,0, .15); color: #333; border-radius: 50%; width: var(--36px); height: var(--36px); line-height: var(--36px); text-align: center; } .k-select-type1 li img { display: inline-block; background: rgba( 0,0,0, .15); color: #333; border-radius: 50%; width: var(--36px); height: var(--36px); line-height: var(--36px); text-align: center; } .k-select-type1 li > div:nth-child(1) { align-self: center; } .k-select-type1 li > div:nth-child(2) > div:nth-child(1) { font-weight: 500; } .k-select-type1 li > div:nth-child(2) > div:nth-child(2) { font-style: italic; } /* ======================================================================================================================== KA LIST ======================================================================================================================== Componente sencillo que permite mostrar un listado en modo burbuja, como el listado de notificaciones pendiente en WM */ .k-list { padding: 0; } .k-list > li { display: block; font-size: var(--14px); margin-bottom: var(--10px); transition: border-color .3s ease; cursor: pointer; background-color: #fff; border: var(--2px) solid rgba(0,0,0,.07); border-radius: var(--3px); padding: var(--15px) var(--25px); } .k-list > li:hover { border-color: var(--color-900); } .k-list > li span { display: block; font-weight: bold; } @media (max-width: 64rem) { /* 1024px */ .k-list { padding: var(--15px); } } /* ======================================================================================================================== COLORES FORZADOS ======================================================================================================================== */ .color-red { color: var(--color-red-800) !important; } .color-green { color: var(--color-green-800) !important; } .background-red { background: var(--color-red-50) !important; color: #000 !important; } .background-green { background: var(--color-green-50) !important; color: #000 !important; } /* ======================================================================================================================== LANGUAGES ======================================================================================================================== Es la caja que contiene los botones que se encargan de cargar un contenido en un idioma en concreto. Se suelen poner en formularios de base de datos que generan páginas o en el sitemap .languages { display: grid; grid-template-columns: repeat( auto-fit, minmax( 30px, 1fr ) ); grid-gap: 4px; } .languages img { height: var(--24px); width: auto; } .languages span { padding-left: var(--10px); text-transform: uppercase; font-weight: bold; } */ .flag { width: var(--24px); height: var(--24px); max-width: 100%; max-height: 100%; line-height: 1; } /* ======================================================================================================================== LOGIN Y LOGOUT ======================================================================================================================== Estilos relacionados con la pantalla de login y logout */ .grid-login { display: grid; /* grid-template-columns: 1fr 28.75rem; */ /* grid-template-columns: 1fr 40rem; */ grid-template-columns: 1fr 1fr; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; } .grid-login .grid-advertising { background: var(--color-50); background-position: center; background-size: cover; padding: var(--50px); color: #fff; display: grid; align-content: start; text-align: right; } .grid-login .powered { color: #000; font-weight: 300; font-size: var(--22px); line-height: var(--28px); } .grid-login .myfocus { height: var(--25px); } .grid-login .grid-form { background: #fff; padding: var(--100px) var(--60px); display: grid; align-content: center; } .grid-login .box { max-width: 25rem; /* 400px */ margin: 0 auto; width: 100%; } .grid-form .form-group label { font-size: var(--14px); margin: 0 0 var(--15px) 0; } .grid-form .form-group input, .grid-form .form-group select { height: var(--65px); line-height: var(--65px); font-size: var(--20px); } .grid-login .logo { height: var(--32px); margin-bottom: var(--20px); } .grid-login .client { display: block; font-family: var(--font-secondary); font-size: var(--24px); line-height: var(--48px); color: #333; font-weight: 600; margin-bottom: var(--30px); text-align: center; border-bottom: var(--1px) solid var(--color-50); } .grid-login .recover-link { display: block; margin: var(--15px) 0 var(--30px) 0; } .grid-login .btn-submit { margin-top: var(--15px); height: var(--60px); font-size: var(--15px); /*background: var(--color-50);*/ border-color: var(--color-100); } .grid-login .btn-submit:focus, .grid-login .btn-submit:active, .grid-login .btn-submit:hover { border-color: var(--color-900); border-color: var(--color-200); /* box-shadow: none; */ } @media (min-width: 769px) and (max-width: 920px) { .grid-login { grid-template-columns: 1fr 1fr; } .grid-login .grid-form { padding: var(--30px); } } @media (max-width: 768px) { .grid-login { grid-template-columns: 1fr; grid-template-rows: 25vh 1fr; } .grid-login .powered { display: none; } .grid-login .grid-form { padding: var(--30px); } .grid-login .logo { margin-bottom: var(--20px); margin-right: var(--10px); } .grid-login .client { margin-bottom: var(--20px); display: inline-block; vertical-align: middle; } } .bg-animation { animation: background_animation 16s ease-in-out infinite alternate; background-image: linear-gradient(-60deg, var(--color-300) 50%, var(--color-500) 50%); bottom:0; left:-50%; opacity:.5; position:fixed; right:-50%; top:0; z-index:-1; } .bg-animation.color2 { animation-direction:alternate-reverse; animation-duration:14s; } .bg-animation.color3 { animation-duration:12s; } @keyframes background_animation { 0% { transform:translateX(-25%); } 100% { transform:translateX(25%); } } .animation-on-ready .animation { opacity: 0; pointer-events: none; transition: all .5s ease; } body:not(.animation-on-ready) .animation { opacity: 1; pointer-events: all; transition: all .5s ease; } .animation-on-ready .animation.up { transform: translateY( 10px ); } body:not(.animation-on-ready) .animation.up { transform: translateY( 0 ); } .animation-on-ready .animation.down { transform: translateY( -10px ); } body:not(.animation-on-ready) .animation.down { transform: translateY( 0 ); } .animation-on-ready .animation.left { transform: translateX( 5px ); } body:not(.animation-on-ready) .animation.left { transform: translateX( 0 ); } .animation-on-ready .animation.scale { transform: scale( .95 ); } body:not(.animation-on-ready) .animation.scale { transform: scale( 1 ); } .delay1 { transition-delay: .1s !important; } .delay2 { transition-delay: .2s !important; } .delay3 { transition-delay: .3s !important; } .delay4 { transition-delay: .4s !important; } .delay5 { transition-delay: .5s !important; } .delay6 { transition-delay: .6s !important; } .delay7 { transition-delay: .7s !important; } .delay8 { transition-delay: .8s !important; } .delay9 { transition-delay: .9s !important; } .delay10 { transition-delay: 1s !important; } /* ======================================================================================================================== MEDIA ======================================================================================================================== Estilos necesarios para mostrar la sección y la ventana modal de Media */ #media .tohide th, #media .tohide td { display: table-cell; } #media .toshow { display: none; } .table-files tbody td { height: var(--60px); } #media .thumb { max-width: var(--80px); /*max-height: 100%;*/ max-height: var(--70px); padding: 2px; border: 1px solid #ccc; } #media .details { font-size: var(--13px); font-style: italic; } /* TABLA DE FICHEROS Se utiliza tanto en el grid de la pantalla Media como en la ventana Modal Media */ .table-files th:first-child { width: var(--50px); } .table-files td.thumb { height: 64px; max-height: 64px; width: 100px; max-width: 100px; text-align: center; } .table-files .placeholder, .table-files td.thumb img { max-width: 100%; max-height: 100%; padding: var(--2px); border: var(--1px) solid #ccc; } .table-files .placeholder { width: 100%; height: 100%; background: #fff; } .table-files .size, .table-files .type { width: var(--50px); } .table-files .error { font-weight: bold; color: #e74c3c; } /* VENTANA MODAL MEDIA */ #modal_media { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(30,30,30,0.5); z-index: 100; } #modal_media .section > header { position: fixed; top: var(--30px); left: var(--30px); right: var(--30px); height: var(--55px); max-width: 100%; overflow-x: auto; overflow-y: hidden; background: var(--color-900); } #modal_media .section > header h1 { position: relative; z-index: 1; font-family: var(--font-secondary); font-size: var(--11px); font-weight: 600; letter-spacing: 0.02rem; text-transform: uppercase; color: #fff; margin: 0; line-height: var(--59px); padding: 0 var(--32px); } #modal_media .notification .container-fluid { padding: 0 var(--32px); height: var(--55px); line-height: var(--59px); max-width: none; } #modal_media article { position: fixed; top: var(--85px); bottom: var(--30px); left: var(--30px); right: calc( 600px + var(--30px) ); padding: var(--30px); overflow-y: auto; background: var(--color-neutral); } #modal_media nav { position: fixed; top: var(--85px); right: var(--30px); width: 600px; height: var(--55px); display: grid; grid-template-columns: repeat( auto-fit, minmax( 55px, 1fr ) ); background: #999; grid-gap: var(--2px); border-bottom: 2px solid var(--color-neutral-dark); } #modal_media nav button { border-radius: 0; border: 0; background: #eee; color: #333; transition: all .3 ease; } #modal_media nav button:hover { background: #fff; color: #333; } #modal_media nav button.selected { background: var(--color-neutral-dark); color: #333; } #modal_media aside { position: fixed; top: calc( var(--85px) + var(--55px) ); bottom: var(--85px); right: var(--30px); padding: var(--15px); width: 600px; /*background: var(--color-neutral-dark);*/ background: #fff; overflow-y: auto; color: #333; font-size: var(--14px); line-height: var(--22px); font-weight: normal; } #modal_media footer { position: fixed; bottom: var(--30px); right: var(--30px); width: 600px; padding: var(--10px); min-height: var(--55px); display: grid; grid-template-columns: repeat( auto-fit, minmax( 55px, 1fr ) ); grid-gap: var(--10px); /*background: #ccc;*/ background: var(--color-grey-50); } /* AJUSTE MODAL MEDIA Hacemos que el NAV solo sea visible desde fuera de la pantalla de Media y ajustamos la posición del ASIDE para que no haya huecos */ body.media #modal_media nav { display: none; } body.media #modal_media aside { top: var(--85px); } #modal_media .section { display: none; } #modal_media .edit article { display: grid; align-items: center; text-align: center; background:url('/ka/admin/img/tile_bg.gif') repeat; font-size: 0; padding: 8px; } #modal_media .edit article img { max-width: 100%; max-height: 100%; margin: 0 auto; } #modal_media [type="file"] { display: none; } #modal_media hr { border-bottom-color: #ccc; margin-bottom: var(--15px); } #modal_media .k-tabs main { padding: var(--15px); } #modal_media .note { background: var(--color-grey-400); margin: 0; } #modal_media .file_details { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; } .drop_box { padding: 50px; background: #333; color: #fff; text-align: center; font-weight: 600; transition: all .3s ease; cursor: pointer; } .drop_bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; height: var(--55px); line-height: var(--55px); background: #333; color: #fff; text-align: center; font-weight: 600; transition: all .3s ease; cursor: pointer; } .drop_bar .text2 { display: none; } body.desktop.media.dragover .drop_box { background: #CDDC39; color: #333; } body.media { padding-bottom: var(--55px); } body.desktop.media .drop_bar { display: block; } body.desktop.media.dragover .drop_bar { height: var(--100px); line-height: var(--100px); background: #CDDC39; color: #333; } body.desktop.media.dragover .drop_bar .text1, body.desktop.media.dragover .drop_box .text1 { display: none; } body.desktop.media.dragover .drop_bar .text2, body.desktop.media.dragover .drop_box .text2 { display: block; } body.desktop.modal_media_opened .drop_bar { display: none; } /* ======================================================================================================================== PLUGINS EXTERNOS ======================================================================================================================== Corrección de los estilos de los plugins externos */ /* PLUGINS > WYSIWYG Trombowyg ====================================================================================================================== https://alex-d.github.io/Trumbowyg/ */ .wysiwyg { z-index: 0; overflow: visible; min-height: 210px; padding: 0; padding-right: 0; padding-bottom: 0; } .wysiwyg label { padding: var(--7px) var(--12px) 0 0; } .wysiwyg.horizontal label { padding: 0 var(--15px) 0 0; } .wysiwyg .trumbowyg { background: #fff; } .wysiwyg .trumbowyg-box .trumbowyg-editor { font-size: var(--14px); word-break: break-word; max-width: 100%; max-height: 350px; height: auto !important; } .wysiwyg .trumbowyg-editor, .wysiwyg .trumbowyg-textarea, .wysiwyg .trumbowyg-box, .wysiwyg .trumbowyg-editor { min-height: 120px; } .wysiwyg > .trumbowyg-box { border: 2px solid rgba(0,0,0,.12); /* Asignamos un valor de 2px a mano porque no calcula bien el navegdor su borde al aumentar la tipografía base */ border-radius: var(--3px); } /*Corregimos la posición del mensaje de error*/ .form-group-default .trumbowyg .error { padding: 5px 10px; } /*Obligamos a que todos los campos de formulario se muestren por debajo del wysiwyg cuando está a pantalla completa*/ body.trumbowyg-body-fullscreen .form-group { z-index: auto; } .trumbowyg-body-fullscreen .wysiwyg .trumbowyg-box .trumbowyg-editor { max-height: none; } @media (min-width: 48rem) { .desktop .trumbowyg-fullscreen, .mobile .trumbowyg-fullscreen { top: var(--115px); } } .wysiwyg .trumbowyg-button-pane { background: rgba(0,0,0,.12); padding: var(--8px); } .wysiwyg .trumbowyg-button-pane button { background: #fff; color: #626262; width: 34px; } .wysiwyg .trumbowyg-button-group { margin-right: 3px; margin-bottom: 3px; } .wysiwyg .trumbowyg-button-group button:first-child { -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .wysiwyg .trumbowyg-button-group button:last-child { -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .wysiwyg .trumbowyg-dropdown { margin-left: 0; margin-top: -2px; } .wysiwyg .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)+.trumbowyg-button-group::before, .wysiwyg .trumbowyg-button-pane::after { display: none; } .wysiwyg .trumbowyg-box, .wysiwyg .trumbowyg-editor { margin-bottom: 0; } .mobile .wysiwyg .trumbowyg-button-pane button.trumbowyg-fullscreen-button { background: #333; } .mobile .wysiwyg .trumbowyg-button-pane button.trumbowyg-fullscreen-button svg { fill: #fff; } .mobile.trumbowyg-body-fullscreen .wysiwyg .trumbowyg-button-pane button.trumbowyg-fullscreen-button svg { color: #fff; fill: transparent; } .mobile .trumbowyg-button-group.trumbowyg-right > .trumbowyg-fullscreen-button { display: none; } .mobile.trumbowyg-body-fullscreen .trumbowyg-button-group.trumbowyg-right > .trumbowyg-fullscreen-button { display: block; } @media (max-width: 767px) { .wysiwyg .trumbowyg-button-group { margin-right: 1px; margin-bottom: 0px; } .mobile.trumbowyg-body-fullscreen .trumbowyg-button-group { margin-right: 2px; margin-bottom: 1px; } } @media (min-width: 768px) and (max-width: 991px) { .wysiwyg .trumbowyg-button-group { margin-right: 2px; } .wysiwyg .trumbowyg-button-group.trumbowyg-right { margin-right: 0; } .wysiwyg .trumbowyg-button-pane button { width: 33px; } } .panel { background: #fff; margin-bottom: var(--20px); box-shadow: 0 0 0 0 rgba(60,64,67,0.30), 0 2px 4px 0 rgba(60,64,67,0.15); } .panel header { border-top-left-radius: var(--3px); border-top-right-radius: var(--3px); background: var(--color-grey-300); color: #000; font-size: var(--17px); text-transform: uppercase; font-family: var(--font-general); letter-spacing: normal; font-weight: 500; letter-spacing: 1px; display: grid; grid-template-columns: 1fr auto; } .panel.disabled header { /* background: var(--color-red-100); */ background: var(--color-deep-orange-100); } .panel title { display: block; padding: 0 var(--15px); line-height: var(--45px); } .panel .buttons { display: flex; } .panel .buttons button { border: 0; background: none; font-size: var(--18px); min-width: var(--45px); line-height: var(--45px); transition: all .3s ease; margin: 0; outline: none; border-left: var(--1px) solid rgba( 0,0,0,.1); padding: 0 var(--15px); } .panel .buttons button:hover { background: rgba( 0,0,0,.1); } .panel .buttons button:hover { background: rgba( 0,0,0,.1); } .panel a { font-weight: 500; } .panel main { font-size: var(--14px); color: #000; padding: var(--15px); border-bottom-left-radius: var(--3px); border-bottom-right-radius: var(--3px); max-height: var(--300px); overflow-y: auto; } .panel .line { display: grid; grid-template-columns: 30% 1fr; /* border-bottom: var(--1px) solid var(--color-grey-200); */ } .panel .list { margin: 0; padding: 0; list-style: none; } .panel .list li { padding: var(--5px) 0; font-size: var(--14px); transition: all .3s ease; border-bottom: var(--1px) solid var(--color-grey-200); } .panel .list li:last-child { border-bottom: 0; } .panel .list .circle { display: inline-block; /* border-radius: 50%; */ border-radius: var(--3px); background: var(--color-50); color: var(--color-700); font-weight: 500; min-width: var(--36px); padding: 0 var(--6px); height: var(--36px); line-height: var(--36px); text-align: center; align-self: center; margin: var(--5px) var(--10px) var(--5px) var(--5px); } .panel:not(.disabled) .list li:hover { background: var(--color-grey-50); cursor: pointer; } .modal.modal-module > header { height: calc( var(--100px) + var(--10px) ); background: var(--color-800); } .modal.modal-module > header h1 { color: #fff; font-size: var(--20px); transform: scale(.98); transition: all .4s ease; opacity: .6; } .modal.open.modal-module > header h1 { transform: scale(1); opacity: 1; } .modal.modal-module > header small { display: block; font-size: var(--16px); text-transform: none; font-weight: 300; position: relative; top: -0.25rem; border-top: var(--1px) solid var(--color-400); color: var(--color-100); padding-top: var(--10px); line-height: var(--24px); width: calc( 100% - var(--100px) ); transform: translateX( var(--15px) ); transition: all .4s ease; } .modal.open.modal-module > header small { transform: translateX(0); } .modal.modal-module > header i { position: absolute; top: 0; right: 0; font-size: var(--50px); background: var(--color-900); padding: var(--30px); } /* ======================================================================================================================== ANIMATIONS ======================================================================================================================== Pequeñas animaciones en algunos elementos del panel */ body.animation-on-ready #subheader h1 { transform: translateY(4px); opacity: .8; } #subheader h1 { transform: translateY(0); opacity: 1; transition: transform .4s ease, opacity .4s ease; } body.animation-on-ready .module-title { transform: translateX(4px); opacity: .8; } .module-title { transform: translateX(0); opacity: 1; transition: transform .4s ease, opacity .4s ease; } /* ======================================================================================================================== TMP ======================================================================================================================== Clases que aún están bajo estudio */ .spin-loading { display: grid; position: fixed; top: var(--115px); left: 0; right: 0; bottom: 0; opacity: 1; z-index: 100; align-content: center; text-align: center; } .spin-loading svg { margin: 0 auto; } /* ======================================================================================================================== HELPERS ======================================================================================================================== Clases de ayuda que se utilizan de forma frecuente en todos los proyectos */ body.dev:before { content: "dev"; position: fixed; bottom: 0; left: 0; background: rgba(216, 26, 96, 1); pointer-events: none; color: #fff; padding: 3px 10px; font-family: Consolas; text-transform: uppercase; font-size: 10px; font-weight: 600; z-index: 999; } @media screen and (min-width: 1024px) { body.dev:before { padding: 5px 15px; font-size: 13px; } } body.resolution:after { content: "LG"; position: fixed; bottom: 0; right: 0; background: var(--color-yellow-400); pointer-events: none; color: #000; padding: 5px 15px; font-size: 13px; font-family: Consolas; text-transform: uppercase; font-weight: 600; z-index: 999; } @media screen and (max-width: 47.9375rem) { body.resolution:after { content: "XS"; } } @media screen and (min-width: 48rem) and (max-width: 64rem) { body.resolution:after { content: "SM"; } } @media screen and (min-width: 64.0625rem) and (max-width: 119.9375rem) { body.resolution:after { content: "MD"; } } body.pointer-events-none { pointer-events: none; } .nopointerevents { pointer-events: none !important; } /* Es el elemento que me permite copiar en memoria un texto (solo se puede hacer desde un elemento de formulario. No poner nunca como display none */ #clipboard { position: absolute; left: -10000%; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .noscroll { position: fixed; overflow: hidden !important; width: 100%; height: 100%; } .nomargin { margin: 0 !important; } .nopadding { padding: 0 !important; } .nopadding-top { padding-top: 0; } .main-nopadding-top > main { padding-top: 0; } .nowrap { white-space: nowrap; } .wrap { white-space: normal; } .break-word { word-break: break-word; } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .overflow-hidden { overflow: hidden; } @media (max-width: 47.9375rem ) { .nopadding-xs { padding: 0 !important; } .main-nopadding-xs > main { padding: 0; } } @media (max-width: 64rem) { .nopadding-sm { padding: 0 !important; } } .vertical-align { display:flex; justify-content:center; align-items:center; width:100%; height:100%; flex-direction: column; } .vertical-align-content { margin: auto; /* IMPORTANTE! NO CAMBIAR ESTA PROPIEDAD PARA QUE EL FLEX NO CENTRE EL CONTENIDO CORTANDO POR ARRIBA Y POR ABAJO */ width: 100%; overflow-y: auto; } .img-fluid, .img-responsive { max-width: 100%; } .text-uppercase { text-transform: uppercase; } .text-center { text-align: center; } .bold { font-weight: bold; } .cursor-pointer, .cursor-pointer * { cursor: pointer !important; } .btn-block { display: block; width: 100%; } .center-block { display: block; margin-right: auto; margin-left: auto; } .pull-right { float: right; } .pull-left { float: left; } .clear { clear: both; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-justify { text-align: justify !important; } .hidden { display: none !important; } @media (min-width: 768px) { .hidden-xs-up { display: none !important; } } @media (min-width: 1025px) { .hidden-sm-up { display: none !important; } } @media (min-width: 1920px) { .hidden-md-up { display: none !important; } } @media (max-width: 767px) { .hidden-xs-down { display: none !important; } } @media (max-width: 1024px) { .hidden-sm-down { display: none !important; } } @media (max-width: 1919px) { .hidden-md-down { display: none !important; } }