@font-face { font-family: open-sans;font-style: normal;font-weight: 100;src: url( "../fonts/open-sans/open-sans-light.ttf" ), url( "../fonts/open-sans/open-sans-light.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: normal;font-weight: 400;src: url( "../fonts/open-sans/open-sans.ttf" ), url( "../fonts/open-sans/open-sans.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: normal;font-weight: 700;src: url( "../fonts/open-sans/open-sans-bold.ttf" ), url( "../fonts/open-sans/open-sans-bold.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: italic;font-weight: 100;src: url( "../fonts/open-sans/open-sans-light-italic.ttf" ), url( "../fonts/open-sans/open-sans-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: italic;font-weight: 400;src: url( "../fonts/open-sans/open-sans-italic.ttf" ), url( "../fonts/open-sans/open-sans-italic.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: italic;font-weight: 700;src: url( "../fonts/open-sans/open-sans-bold-italic.ttf" ), url( "../fonts/open-sans/open-sans-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: aeroportal;font-style: normal;font-weight: 100;src: url( "../fonts/aeroportal/aeroportal-light.ttf" ), url( "../fonts/aeroportal/aeroportal-light.eot" ) format( 'truetype' ); } @font-face { font-family: aeroportal;font-style: normal;font-weight: 400;src: url( "../fonts/aeroportal/aeroportal.ttf" ), url( "../fonts/aeroportal/aeroportal.eot" ) format( 'truetype' ); } @font-face { font-family: aeroportal;font-style: normal;font-weight: 700;src: url( "../fonts/aeroportal/aeroportal-bold.ttf" ), url( "../fonts/aeroportal/aeroportal-bold.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: normal;font-weight: 100;src: url( "../fonts/gotham/gotham-light.ttf" ), url( "../fonts/gotham/gotham-light.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: normal;font-weight: 400;src: url( "../fonts/gotham/gotham.ttf" ), url( "../fonts/gotham/gotham.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: normal;font-weight: 700;src: url( "../fonts/gotham/gotham-bold.ttf" ), url( "../fonts/gotham/gotham-bold.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: italic;font-weight: 100;src: url( "../fonts/gotham/gotham-light-italic.ttf" ), url( "../fonts/gotham/gotham-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: italic;font-weight: 400;src: url( "../fonts/gotham/gotham-italic.ttf" ), url( "../fonts/gotham/gotham-italic.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: italic;font-weight: 700;src: url( "../fonts/gotham/gotham-bold-italic.ttf" ), url( "../fonts/gotham/gotham-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: normal;font-weight: 100;src: url( "../fonts/roboto/roboto-light.ttf" ), url( "../fonts/roboto/roboto-light.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: normal;font-weight: 400;src: url( "../fonts/roboto/roboto.ttf" ), url( "../fonts/roboto/roboto.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: normal;font-weight: 700;src: url( "../fonts/roboto/roboto-bold.ttf" ), url( "../fonts/roboto/roboto-bold.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: italic;font-weight: 100;src: url( "../fonts/roboto/roboto-light-italic.ttf" ), url( "../fonts/roboto/roboto-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: italic;font-weight: 400;src: url( "../fonts/roboto/roboto-italic.ttf" ), url( "../fonts/roboto/roboto-italic.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: italic;font-weight: 700;src: url( "../fonts/roboto/roboto-bold-italic.ttf" ), url( "../fonts/roboto/roboto-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: poppins;font-style: normal;font-weight: 100;src: url( "../fonts/poppins/poppins-light.ttf" ), url( "../fonts/poppins/poppins-light.eot" ) format( 'truetype' ); } @font-face { font-family: poppins;font-style: normal;font-weight: 400;src: url( "../fonts/poppins/poppins.ttf" ), url( "../fonts/poppins/poppins.eot" ) format( 'truetype' ); } @font-face { font-family: poppins;font-style: normal;font-weight: 700;src: url( "../fonts/poppins/poppins-bold.ttf" ), url( "../fonts/poppins/poppins-bold.eot" ) format( 'truetype' ); } @font-face { font-family: poppins;font-style: italic;font-weight: 100;src: url( "../fonts/poppins/poppins-light-italic.ttf" ), url( "../fonts/poppins/poppins-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: poppins;font-style: italic;font-weight: 400;src: url( "../fonts/poppins/poppins-italic.ttf" ), url( "../fonts/poppins/poppins-italic.eot" ) format( 'truetype' ); } @font-face { font-family: poppins;font-style: italic;font-weight: 700;src: url( "../fonts/poppins/poppins-bold-italic.ttf" ), url( "../fonts/poppins/poppins-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: apparatussil;font-style: normal;font-weight: normal;src: url( https://cdn.biblapro.com/fonts/apparatussil/apparatussil.ttf?5 ); } @font-face { font-family: apparatussil;font-style: normal;font-weight: bold;src: url( https://cdn.biblapro.com/fonts/apparatussil/apparatussil-bold.ttf?5 ); } @font-face { font-family: apparatussil;font-style: italic;font-weight: normal;src: url( https://cdn.biblapro.com/fonts/apparatussil/apparatussil-italic.ttf?5 ); } @font-face { font-family: apparatussil;font-style: italic;font-weight: bold;src: url( https://cdn.biblapro.com/fonts/apparatussil/apparatussil-bold-italic.ttf?5 ); } @font-face { font-family: minionpro;font-style: normal;font-weight: 100;src: url( "../fonts/minionpro/minionpro-light.ttf" ), url( "../fonts/minionpro/minionpro-light.eot" ) format( 'truetype' ); } @font-face { font-family: minionpro;font-style: normal;font-weight: 400;src: url( "../fonts/minionpro/minionpro.ttf" ), url( "../fonts/minionpro/minionpro.eot" ) format( 'truetype' ); } @font-face { font-family: minionpro;font-style: normal;font-weight: 700;src: url( "../fonts/minionpro/minionpro-bold.ttf" ), url( "../fonts/minionpro/minionpro-bold.eot" ) format( 'truetype' ); } @font-face { font-family: minionpro;font-style: italic;font-weight: 100;src: url( "../fonts/minionpro/minionpro-light-italic.ttf" ), url( "../fonts/minionpro/minionpro-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: minionpro;font-style: italic;font-weight: 400;src: url( "../fonts/minionpro/minionpro-italic.ttf" ), url( "../fonts/minionpro/minionpro-italic.eot" ) format( 'truetype' ); } @font-face { font-family: minionpro;font-style: italic;font-weight: 700;src: url( "../fonts/minionpro/minionpro-bold-italic.ttf" ), url( "../fonts/minionpro/minionpro-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: copperplate;font-style: normal;font-weight: 100;src: url( "../fonts/copperplate/copperplate-light.ttf" ), url( "../fonts/copperplate/copperplate-light.eot" ) format( 'truetype' ); } @font-face { font-family: copperplate;font-style: normal;font-weight: 400;src: url( "../fonts/copperplate/copperplate.ttf" ), url( "../fonts/copperplate/copperplate.eot" ) format( 'truetype' ); } @font-face { font-family: copperplate;font-style: normal;font-weight: 700;src: url( "../fonts/copperplate/copperplate-bold.ttf" ), url( "../fonts/copperplate/copperplate-bold.eot" ) format( 'truetype' ); } @font-face { font-family: copperplate;font-style: italic;font-weight: 100;src: url( "../fonts/copperplate/copperplate-light.ttf" ), url( "../fonts/copperplate/copperplate-light.eot" ) format( 'truetype' ); } @font-face { font-family: copperplate;font-style: italic;font-weight: 400;src: url( "../fonts/copperplate/copperplate.ttf" ), url( "../fonts/copperplate/copperplate.eot" ) format( 'truetype' ); } @font-face { font-family: copperplate;font-style: italic;font-weight: 700;src: url( "../fonts/copperplate/copperplate-bold.ttf" ), url( "../fonts/copperplate/copperplate-bold.eot" ) format( 'truetype' ); } @font-face { font-family: linguisticspro;font-style: normal;font-weight: 100;src: url( "../fonts/linguisticspro/linguisticspro.ttf" ), url( "../fonts/linguisticspro/linguisticspro.eot" ) format( 'truetype' ); } @font-face { font-family: linguisticspro;font-style: normal;font-weight: 400;src: url( "../fonts/linguisticspro/linguisticspro.ttf" ), url( "../fonts/linguisticspro/linguisticspro.eot" ) format( 'truetype' ); } @font-face { font-family: linguisticspro;font-style: normal;font-weight: 700;src: url( "../fonts/linguisticspro/linguisticspro-bold.ttf" ), url( "../fonts/linguisticspro/linguisticspro-bold.eot" ) format( 'truetype' ); } @font-face { font-family: linguisticspro;font-style: italic;font-weight: 100;src: url( "../fonts/linguisticspro/linguisticspro-italic.ttf" ), url( "../fonts/linguisticspro/linguisticspro-italic.eot" ) format( 'truetype' ); } @font-face { font-family: linguisticspro;font-style: italic;font-weight: 400;src: url( "../fonts/linguisticspro/linguisticspro-italic.ttf" ), url( "../fonts/linguisticspro/linguisticspro-italic.eot" ) format( 'truetype' ); } @font-face { font-family: linguisticspro;font-style: italic;font-weight: 700;src: url( "../fonts/linguisticspro/linguisticspro-bold-italic.ttf" ), url( "../fonts/linguisticspro/linguisticspro-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: orthos;font-style: normal;font-weight: 400;src: url( "../fonts/orthos/orthos.ttf" ); } @font-face { font-family: orthos;font-style: normal;font-weight: 400;src: url( "../fonts/orthos/orthos.ttf" ); } @font-face { font-family: orthos;font-style: normal;font-weight: 400;src: url( "../fonts/orthos/orthos.ttf" ); } @font-face { font-family: orthos;font-style: italic;font-weight: 400;src: url( "../fonts/orthos/orthos-italic.ttf" ); } @font-face { font-family: orthos;font-style: italic;font-weight: 400;src: url( "../fonts/orthos/orthos-italic.ttf" ); } @font-face { font-family: orthos;font-style: italic;font-weight: 400;src: url( "../fonts/orthos/orthos-italic.ttf" ); } @font-face { font-family: hellenica;font-style: normal;font-weight: 400;src: url( "../fonts/hellenica/hellenica.ttf" ) format( 'truetype' ); } @font-face { font-family: hellenica;font-style: normal;font-weight: 400;src: url( "../fonts/hellenica/hellenica.ttf" ) format( 'truetype' ); } @font-face { font-family: hellenica;font-style: normal;font-weight: 800;src: url( "../fonts/hellenica/hellenica-bold.ttf" ) format( 'truetype' ); } @font-face { font-family: hellenica;font-style: italic;font-weight: 400;src: url( "../fonts/hellenica/hellenica-italic.ttf" ) format( 'truetype' ); } @font-face { font-family: hellenica;font-style: italic;font-weight: 400;src: url( "../fonts/hellenica/hellenica-italic.ttf" ) format( 'truetype' ); } @font-face { font-family: hellenica;font-style: italic;font-weight: 800;src: url( "../fonts/hellenica/hellenica-bold-italic.ttf" ) format( 'truetype' ); } @font-face { font-family: ezrasil2;font-style: normal;font-weight: 400;src: url( "../fonts/ezrasil2/ezrasil2.ttf" ) format( 'truetype' ); } @font-face { font-family: doulossil;font-style: normal;font-weight: 400;src: url( "../fonts/doulossil/doulossil.ttf" ) format( 'truetype' ); } @font-face { font-family: transliteration;font-style: normal;font-weight: 400;src: url( "../fonts/transliteration/transliteration.ttf" ) format( 'truetype' ); } @font-face { font-family: greektl;font-style: normal;font-weight: 400;src: url( "../fonts/greektl/greektl.ttf" ) format( 'truetype' ); } @font-face { font-family: hebrewlt;font-style: normal;font-weight: 400;src: url( "../fonts/hebrewlt/hebrewlt.ttf" ) format( 'truetype' ); } @font-face { font-family: symbolgreekll;font-style: normal;font-weight: 400;src: url( "../fonts/symbolgreekll/symbolgreekll.ttf" ) format( 'truetype' ); } @font-face { font-family: source-serif-pro;font-style: normal;font-weight: 100;src: url( "../fonts/source-serif-pro/source-serif-pro-light.ttf" ) format( 'truetype' ); } @font-face { font-family: source-serif-pro;font-style: normal;font-weight: 400;src: url( "../fonts/source-serif-pro/source-serif-pro.ttf" ) format( 'truetype' ); } @font-face { font-family: source-serif-pro;font-style: normal;font-weight: 800;src: url( "../fonts/source-serif-pro/source-serif-pro-bold.ttf" ) format( 'truetype' ); } @font-face { font-family: source-serif-pro;font-style: italic;font-weight: 100;src: url( "../fonts/source-serif-pro/source-serif-pro-light-italic.ttf" ) format( 'truetype' ); } @font-face { font-family: source-serif-pro;font-style: italic;font-weight: 400;src: url( "../fonts/source-serif-pro/source-serif-pro-italic.ttf" ) format( 'truetype' ); } @font-face { font-family: source-serif-pro;font-style: italic;font-weight: 800;src: url( "../fonts/source-serif-pro/source-serif-pro-bold-italic.ttf" ) format( 'truetype' ); } * { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; font-size: inherit; text-decoration: none; font-variant: normal; letter-spacing: inherit; word-spacing: inherit; line-height: inherit; vertical-align: baseline; outline: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent;  } *:before,*:after { box-sizing: border-box;  } strong { font-weight: bold;  } .font-1 { font-family: roboto;  } .font-2 { font-family: orthos;  } .font-3 { font-family: hellenica;  } .font-4 { font-family: "Times New Roman";  } .font-5 { font-family: linguisticspro;  } .font-6 { font-family: ezrasil2;  } .font-7 { font-family: transliteration;  } .font-8 { font-family: doulossil;  } .font-9 { font-family: source-serif-pro;  } .font-10 { font-family: arial, Helvetica;  } .font-11 { font-family: greektl;  } .font-12 { font-family: symbolgreekll;  } .font-13 { font-family: hebrewlt;  } .font-14 { font-family: apparatussil;  } .space-inline { display: inline-block; width: 40px;  } :root { --primary-color-very-dark: #031c29; --primary-color-darker: #062c39; --primary-color-dark: #1e3746; --primary-color: #2e4756; --primary-color-light: #3e5766; --primary-color-lighter: #4e6776; --primary-color-rgb: 190, 200, 220; --secondary-color-darker: #db9161; --secondary-color-dark: #eba161; --secondary-color: #fbb161; --secondary-color-light: #fdc171; --secondary-color-lighter: #ffd181; --tertiary-color-darker: #3a31b8; --tertiary-color-dark: #4a51c8; --tertiary-color: #5a51d8; --tertiary-color-light: #6a61e8; --tertiary-color-lighter: #7a71f8;  } .row { display: block; clear: both;  } .row:after { display: block; width: 100%; height: 0; content: ""; clear: both;  } .col { position: relative; float: left;  } .col-p-5 { padding: 5px;  } .col-p-5-max {  } .col-p-5-big {  } .col-p-5-med {  } .col-p-5-sma {  } .col-p-5-min {  } .col-pt-5 { padding-top: 5px;  } .col-pt-5-max {  } .col-pt-5-big {  } .col-pt-5-med {  } .col-pt-5-sma {  } .col-pt-5-min {  } .col-pr-5 { padding-right: 5px;  } .col-pr-5-max {  } .col-pr-5-big {  } .col-pr-5-med {  } .col-pr-5-sma {  } .col-pr-5-min {  } .col-pb-5 { padding-bottom: 5px;  } .col-pb-5-max {  } .col-pb-5-big {  } .col-pb-5-med {  } .col-pb-5-sma {  } .col-pb-5-min {  } .col-pl-5 { padding-left: 5px;  } .col-pl-5-max {  } .col-pl-5-big {  } .col-pl-5-med {  } .col-pl-5-sma {  } .col-pl-5-min {  } .col-p-10 { padding: 10px;  } .col-p-10-max {  } .col-p-10-big {  } .col-p-10-med {  } .col-p-10-sma {  } .col-p-10-min {  } .col-pt-10 { padding-top: 10px;  } .col-pt-10-max {  } .col-pt-10-big {  } .col-pt-10-med {  } .col-pt-10-sma {  } .col-pt-10-min {  } .col-pr-10 { padding-right: 10px;  } .col-pr-10-max {  } .col-pr-10-big {  } .col-pr-10-med {  } .col-pr-10-sma {  } .col-pr-10-min {  } .col-pb-10 { padding-bottom: 10px;  } .col-pb-10-max {  } .col-pb-10-big {  } .col-pb-10-med {  } .col-pb-10-sma {  } .col-pb-10-min {  } .col-pl-10 { padding-left: 10px;  } .col-pl-10-max {  } .col-pl-10-big {  } .col-pl-10-med {  } .col-pl-10-sma {  } .col-pl-10-min {  } .col-p-15 { padding: 15px;  } .col-p-15-max {  } .col-p-15-big {  } .col-p-15-med {  } .col-p-15-sma {  } .col-p-15-min {  } .col-pt-15 { padding-top: 15px;  } .col-pt-15-max {  } .col-pt-15-big {  } .col-pt-15-med {  } .col-pt-15-sma {  } .col-pt-15-min {  } .col-pr-15 { padding-right: 15px;  } .col-pr-15-max {  } .col-pr-15-big {  } .col-pr-15-med {  } .col-pr-15-sma {  } .col-pr-15-min {  } .col-pb-15 { padding-bottom: 15px;  } .col-pb-15-max {  } .col-pb-15-big {  } .col-pb-15-med {  } .col-pb-15-sma {  } .col-pb-15-min {  } .col-pl-15 { padding-left: 15px;  } .col-pl-15-max {  } .col-pl-15-big {  } .col-pl-15-med {  } .col-pl-15-sma {  } .col-pl-15-min {  } .col-p-20 { padding: 20px;  } .col-p-20-max {  } .col-p-20-big {  } .col-p-20-med {  } .col-p-20-sma {  } .col-p-20-min {  } .col-pt-20 { padding-top: 20px;  } .col-pt-20-max {  } .col-pt-20-big {  } .col-pt-20-med {  } .col-pt-20-sma {  } .col-pt-20-min {  } .col-pr-20 { padding-right: 20px;  } .col-pr-20-max {  } .col-pr-20-big {  } .col-pr-20-med {  } .col-pr-20-sma {  } .col-pr-20-min {  } .col-pb-20 { padding-bottom: 20px;  } .col-pb-20-max {  } .col-pb-20-big {  } .col-pb-20-med {  } .col-pb-20-sma {  } .col-pb-20-min {  } .col-pl-20 { padding-left: 20px;  } .col-pl-20-max {  } .col-pl-20-big {  } .col-pl-20-med {  } .col-pl-20-sma {  } .col-pl-20-min {  } .col-p-25 { padding: 25px;  } .col-p-25-max {  } .col-p-25-big {  } .col-p-25-med {  } .col-p-25-sma {  } .col-p-25-min {  } .col-pt-25 { padding-top: 25px;  } .col-pt-25-max {  } .col-pt-25-big {  } .col-pt-25-med {  } .col-pt-25-sma {  } .col-pt-25-min {  } .col-pr-25 { padding-right: 25px;  } .col-pr-25-max {  } .col-pr-25-big {  } .col-pr-25-med {  } .col-pr-25-sma {  } .col-pr-25-min {  } .col-pb-25 { padding-bottom: 25px;  } .col-pb-25-max {  } .col-pb-25-big {  } .col-pb-25-med {  } .col-pb-25-sma {  } .col-pb-25-min {  } .col-pl-25 { padding-left: 25px;  } .col-pl-25-max {  } .col-pl-25-big {  } .col-pl-25-med {  } .col-pl-25-sma {  } .col-pl-25-min {  } .col-p-30 { padding: 30px;  } .col-p-30-max {  } .col-p-30-big {  } .col-p-30-med {  } .col-p-30-sma {  } .col-p-30-min {  } .col-pt-30 { padding-top: 30px;  } .col-pt-30-max {  } .col-pt-30-big {  } .col-pt-30-med {  } .col-pt-30-sma {  } .col-pt-30-min {  } .col-pr-30 { padding-right: 30px;  } .col-pr-30-max {  } .col-pr-30-big {  } .col-pr-30-med {  } .col-pr-30-sma {  } .col-pr-30-min {  } .col-pb-30 { padding-bottom: 30px;  } .col-pb-30-max {  } .col-pb-30-big {  } .col-pb-30-med {  } .col-pb-30-sma {  } .col-pb-30-min {  } .col-pl-30 { padding-left: 30px;  } .col-pl-30-max {  } .col-pl-30-big {  } .col-pl-30-med {  } .col-pl-30-sma {  } .col-pl-30-min {  } .col-p-35 { padding: 35px;  } .col-p-35-max {  } .col-p-35-big {  } .col-p-35-med {  } .col-p-35-sma {  } .col-p-35-min {  } .col-pt-35 { padding-top: 35px;  } .col-pt-35-max {  } .col-pt-35-big {  } .col-pt-35-med {  } .col-pt-35-sma {  } .col-pt-35-min {  } .col-pr-35 { padding-right: 35px;  } .col-pr-35-max {  } .col-pr-35-big {  } .col-pr-35-med {  } .col-pr-35-sma {  } .col-pr-35-min {  } .col-pb-35 { padding-bottom: 35px;  } .col-pb-35-max {  } .col-pb-35-big {  } .col-pb-35-med {  } .col-pb-35-sma {  } .col-pb-35-min {  } .col-pl-35 { padding-left: 35px;  } .col-pl-35-max {  } .col-pl-35-big {  } .col-pl-35-med {  } .col-pl-35-sma {  } .col-pl-35-min {  } .col-p-40 { padding: 40px;  } .col-p-40-max {  } .col-p-40-big {  } .col-p-40-med {  } .col-p-40-sma {  } .col-p-40-min {  } .col-pt-40 { padding-top: 40px;  } .col-pt-40-max {  } .col-pt-40-big {  } .col-pt-40-med {  } .col-pt-40-sma {  } .col-pt-40-min {  } .col-pr-40 { padding-right: 40px;  } .col-pr-40-max {  } .col-pr-40-big {  } .col-pr-40-med {  } .col-pr-40-sma {  } .col-pr-40-min {  } .col-pb-40 { padding-bottom: 40px;  } .col-pb-40-max {  } .col-pb-40-big {  } .col-pb-40-med {  } .col-pb-40-sma {  } .col-pb-40-min {  } .col-pl-40 { padding-left: 40px;  } .col-pl-40-max {  } .col-pl-40-big {  } .col-pl-40-med {  } .col-pl-40-sma {  } .col-pl-40-min {  } .col-np { padding: 0;  } .col-np-max {  } .col-np-big {  } .col-np-med {  } .col-np-sma {  } .col-np-min {  } .col-npt { padding-top: 0;  } .col-npt-max {  } .col-npt-big {  } .col-npt-med {  } .col-npt-sma {  } .col-npt-min {  } .col-npr { padding-right: 0;  } .col-npr-max {  } .col-npr-big {  } .col-npr-med {  } .col-npr-sma {  } .col-npr-min {  } .col-npb { padding-bottom: 0;  } .col-npb-max {  } .col-npb-big {  } .col-npb-med {  } .col-npb-sma {  } .col-npb-min {  } .col-npl { padding-left: 0;  } .col-npl-max {  } .col-npl-big {  } .col-npl-med {  } .col-npl-sma {  } .col-npl-min {  } .col-1 { width: 8.33%;  } .col-2 { width: 16.66%;  } .col-3 { width: 25%;  } .col-4 { width: 33.33%;  } .col-5 { width: 41.66%;  } .col-6 { width: 50%;  } .col-7 { width: 58.33%;  } .col-8 { width: 66.66%;  } .col-9 { width: 75%;  } .col-10 { width: 83.33%;  } .col-11 { width: 91.66%;  } .col-12 { width: 100%;  } .col-1-10 { width: 10%;  } .col-2-10 { width: 20%;  } .col-3-10 { width: 30%;  } .col-4-10 { width: 40%;  } .col-5-10 { width: 50%;  } .col-6-10 { width: 60%;  } .col-7-10 { width: 70%;  } .col-8-10 { width: 80%;  } .col-9-10 { width: 90%;  } .col-10-10 { width: 100%;  } .col-1-10-max {  } .col-2-10-max {  } .col-3-10-max {  } .col-4-10-max {  } .col-5-10-max {  } .col-6-10-max {  } .col-7-10-max {  } .col-8-10-max {  } .col-9-10-max {  } .col-10-10-max {  } .col-1-10-big {  } .col-2-10-big {  } .col-3-10-big {  } .col-4-10-big {  } .col-5-10-big {  } .col-6-10-big {  } .col-7-10-big {  } .col-8-10-big {  } .col-9-10-big {  } .col-10-10-big {  } .col-1-10-med {  } .col-2-10-med {  } .col-3-10-med {  } .col-4-10-med {  } .col-5-10-med {  } .col-6-10-med {  } .col-7-10-med {  } .col-8-10-med {  } .col-9-10-med {  } .col-10-10-med {  } .col-1-10-sma {  } .col-2-10-sma {  } .col-3-10-sma {  } .col-4-10-sma {  } .col-5-10-sma {  } .col-6-10-sma {  } .col-7-10-sma {  } .col-8-10-sma {  } .col-9-10-sma {  } .col-10-10-sma {  } .col-1-10-min {  } .col-2-10-min {  } .col-3-10-min {  } .col-4-10-min {  } .col-5-10-min {  } .col-6-10-min {  } .col-7-10-min {  } .col-8-10-min {  } .col-9-10-min {  } .col-10-10-min {  } .col-1-12 { width: 8.33%;  } .col-2-12 { width: 16.66%;  } .col-3-12 { width: 25%;  } .col-4-12 { width: 33.33%;  } .col-5-12 { width: 41.66%;  } .col-6-12 { width: 50%;  } .col-7-12 { width: 58.33%;  } .col-8-12 { width: 66.66%;  } .col-9-12 { width: 75%;  } .col-10-12 { width: 83.33%;  } .col-11-12 { width: 91.66%;  } .col-12-12 { width: 100%;  } .col-1-12-max {  } .col-2-12-max {  } .col-3-12-max {  } .col-4-12-max {  } .col-5-12-max {  } .col-6-12-max {  } .col-7-12-max {  } .col-8-12-max {  } .col-9-12-max {  } .col-10-12-max {  } .col-11-12-max {  } .col-12-12-max {  } .col-1-12-big {  } .col-2-12-big {  } .col-3-12-big {  } .col-4-12-big {  } .col-5-12-big {  } .col-6-12-big {  } .col-7-12-big {  } .col-8-12-big {  } .col-9-12-big {  } .col-10-12-big {  } .col-11-12-big {  } .col-12-12-big {  } .col-1-12-med {  } .col-2-12-med {  } .col-3-12-med {  } .col-4-12-med {  } .col-5-12-med {  } .col-6-12-med {  } .col-7-12-med {  } .col-8-12-med {  } .col-9-12-med {  } .col-10-12-med {  } .col-11-12-med {  } .col-12-12-med {  } .col-1-12-sma {  } .col-2-12-sma {  } .col-3-12-sma {  } .col-4-12-sma {  } .col-5-12-sma {  } .col-6-12-sma {  } .col-7-12-sma {  } .col-8-12-sma {  } .col-9-12-sma {  } .col-10-12-sma {  } .col-11-12-sma {  } .col-12-12-sma {  } .col-1-12-min {  } .col-2-12-min {  } .col-3-12-min {  } .col-4-12-min {  } .col-5-12-min {  } .col-6-12-min {  } .col-7-12-min {  } .col-8-12-min {  } .col-9-12-min {  } .col-10-12-min {  } .col-11-12-min {  } .col-12-12-min {  } .col-none { display: none;  } .col-none-max {  } .col-none-big {  } .col-none-med {  } .col-none-sma {  } .col-none-min {  } .col-block { display: block;  } .col-block-max {  } .col-block-big {  } .col-block-med {  } .col-block-sma {  } .col-block-min {  } .aci { position: relative; min-height: 50px; overflow: hidden; border: 2px solid #e6e9ef; border-radius: 5px; background-color: #ffffff;  } .aci span { position: relative; display: block; width: 100%; height: 46px; padding: 0 0 0 10px; line-height: 46px; color: #333333; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  } .aci:after { position: absolute; top: 15px; right: 19px; display: block; width: 12px; height: 12px; content: ""; border-right: 2px solid #e6e9ef; border-bottom: 2px solid #e6e9ef; box-sizing: border-box; transition: all 0.2s; transform: rotate( 45deg );  } .aci:before { position: absolute; top: 0px; right: 50px; display: block; width: 2px; height: 46px; content: ""; background-color: #e6e9ef;  } .aci input { position: absolute; z-index: 6; display: none; top: 62px; left: 20px; width: calc( 100% - 50px ) !important; height: 46px; padding: 10px; color: #666666; border: 2px solid #e6e9ef; border-radius: 3px; clear: both;  } .aci ol { display: none; z-index: 5; width: 100%; padding: 84px 0 0 0; overflow: hidden; list-style-type: none; background-color: #ffffff; border-radius: 0 0 3px 3px; border-top: 2px solid #e6e9ef;  } .aci li { display: block; line-height: 40px; width: 100%; padding: 0 0 0 10px; color: #666666; cursor: pointer; border-top: 2px dotted #e6e9ef;  } .aci li:first-child {  } .aci li:hover { background-color: #f7f6f9;  } .aci .sel { color: #2b2e4f; background-color: #f7f6f9;  } .aciv input { display: block;  } .aciv ol { display: block; list-style: none;  } .aciv:after { top: 17px; transform: rotate( -135deg );  } .aciv span { border-bottom: 0;  } .acivt input { display: block; top: auto; bottom: 40px;  } .acivt ol { display: block; top: auto; bottom: 35px; padding: 0 0 55px 0; border-radius: 3px 3px 0 0; border-bottom: 0; border-top: 1px solid #e6e9ef;  } .calendar { position: fixed; display: none; left: 50%; top: 50%; z-index: 12; width: 258px; margin: 0; padding: 0 0 10px 0; text-transform: uppercase; overflow: hidden; border-radius: 5px; background-color: #ffffff; box-shadow: 2px 5px 20px 0 rgba( 0, 0, 0, 0.2 ), 0 6px 6px 0 rgba( 0, 0, 0, 0.3 ); transform: translate( -50%, -50% );  } .calendar .cal-nav { display: block; width: 100%; height: 50px; margin: 0 0 0 0; padding: 10px 20px 0 20px; line-height: 40px; color: var( --primary-color ); font-size: 14px; text-align: center; background-color: #f5f5f5;  } .calendar .cal-nav div { float: left; font-weight: bold; margin: 0 10px 0 0; cursor: pointer;  } .calendar .cal-nav span { position: relative; display: block; float: right; width: 30px; height: 40px; cursor: pointer; opacity: 0.7;  } .calendar .cal-nav span:after { position: absolute; top: 14px; display: block; width: 8px; height: 8px; border-top: 2px solid var( --primary-color ); content: "";  } .calendar .cal-nav span:not(:last-child):after { right: 5px; border-right: 2px solid var( --primary-color ); transform: rotate( 45deg );  } .calendar .cal-nav span:last-child:after { left: 5px; border-left: 2px solid var( --primary-color ); transform: rotate( -45deg );  } .calendar .cal-nav span:hover { opacity: 1;  } .calendar ol { display: block; width: 100%; height: 40px; margin: 0 0 10px 0; padding: 0 10px 0 10px; list-style-type: none; color: var( --secondary-color ); background-color: #f5f5f5;  } .calendar ol li { position: relative; float: left; width: 34px; height: 40px; line-height: 40px; margin: 0; padding: 0; font-weight: normal; font-size: 14px; text-align: center;  } .calendar ol li:last-child { border-right: 0;  } .calendar ul { display: block; width: 100%; margin: 0; padding: 0 10px 0 10px; list-style-type: none; background-color: #ffffff;  } .calendar ul:after { display: block; width: 100%; height: 0; clear: both; content: "";  } .calendar ul li { position: relative; float: left; width: 34px; height: 34px; margin: 0; padding: 0; line-height: 34px; font-weight: normal; color: #aaaaaa; font-size: 14px; text-align: center;  } .calendar ul .day { cursor: pointer; font-weight: bold; color: var( --primary-color ); border-radius: 50%;  } .calendar ul .day:hover { color: #000000; background-color: #f0f0f0;  } .calendar ul .sel { color: #ffffff; background-color: var( --primary-color );  } .calendar ul .today { color: var( --secondary-color );  } .calendar .cal-frame { position: absolute; z-index: 12; display: none; top: 60px; left: 0; width: 100%; height: 100%; padding: 40px 5px 0 5px; background-color: #ffffff;  } .calendar .cal-frame:after { display: block; width: 100%; height: 0; clear: both; content: "";  } .calendar .cal-frame span { display: block; float: left; width: 33.33%; padding: 5px;  } .calendar .cal-frame strong { display: block; background-color: #f5f5f5; font-size: 14px; border-radius: 4px; line-height: 34px; font-weight: bold; font-style: normal; text-align: center; color: var( --primary-color ); text-transform: none; cursor: pointer; opacity: 0.8;  } .calendar .cal-frame strong:hover { opacity: 1;  } .calendar .cal-frame .sel strong { background-color: var( --primary-color ); color: #ffffff;  } .calendar .cal-footer { display: block; height: 25px; padding: 5px 0 0 20px; line-height: 15px;  } .calendar .cal-footer span { display: block; float: left; margin: 0 10px 0 0; font-weight: bold; font-size: 12px; color: var( --primary-color ); cursor: pointer;  } .calendar .cal-footer span:hover { color: var( --secondary-color );  } .cb,.cbs { position: relative; display: block; width: 20px; height: 20px; cursor: pointer; border-radius: 5px;  } .cb { border: 2px solid var( --primary-color );  } .cbs { background-color: var( --primary-color );  } .cbs:after { position: absolute; top: 4px; left: 8px; display: block; width: 5px; height: 10px; content: ""; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate( 40deg );  } .cb:hover { border: 2px solid var( --primary-color-light );  } .cbs:hover { background-color: var( --primary-color-light );  } #loading { position: fixed; z-index: 14; top: 0; left: 0; display: none; width: 100%; height: 100%;  } #loading > div { position: fixed; top: 50%; left: 50%; display: block; width: 60px; height: 60px; transform: translate( -50%, -50% );  } #loading span { position: absolute; top: 0; left: 25px; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: var( --secondary-color ); transform-origin: 2px 30px; opacity: 1; animation: loading 0.8s ease-in-out infinite;  } #loading span:nth-child( 1 ) { transform: rotate( 0deg ); animation-delay: 0s;  } #loading span:nth-child( 2 ) { transform: rotate( 45deg ); animation-delay: 0.1s;  } #loading span:nth-child( 3 ) { transform: rotate( 90deg ); animation-delay: 0.2s;  } #loading span:nth-child( 4 ) { transform: rotate( 135deg ); animation-delay: 0.3s;  } #loading span:nth-child( 5 ) { transform: rotate( 180deg ); animation-delay: 0.4s;  } #loading span:nth-child( 6 ) { transform: rotate( 225deg ); animation-delay: 0.5s;  } #loading span:nth-child( 7 ) { transform: rotate( 270deg ); animation-delay: 0.6s;  } #loading span:nth-child( 8 ) { transform: rotate( 315deg ); animation-delay: 0.7s;  } #popup { position: fixed; z-index: 15; display: none; top: 0; left: 0; width: 100%; height: 100%; padding: 0; background-color: rgba( 0, 0, 0, 0.2 );  } #popup section { position: absolute; top: 50%; left: 50%; display: block; max-width: 600px; width: calc( 100% - 40px ); padding: 0; overflow: hidden; background-color: #ffffff; transform: translate( -50%, -80% );  } #popup header { display: block; height: 55px; padding: 0 0 0 20px; line-height: 50px; color: #2b2e4f; font-size: 18px; font-weight: bold;  } #popup header span { position: relative; display: block; float: right; width: 50px; height: 50px; cursor: pointer;  } #popup header span:before,#popup header span:after { position: absolute; top: 24px; left: 15px; display: block; width: 20px; height: 2px; background-color: #2b2e4f; content: ""; opacity: 0.5;  } #popup header span:before { transform: rotate( -45deg );  } #popup header span:after { transform: rotate( 45deg );  } #popup header span:hover:before,#popup header span:hover:after { opacity: 1;  } #popup .error { border-top: 5px solid #d04030;  } #popup .success { border-top: 5px solid #7cb644;  } #popup .warning { border-top: 5px solid #eea510;  } #popup article { display: block; min-height: 80px; padding: 20px; font-size: 16px; color: #70757a; line-height: 150%; background-color: #ffffff; overflow: hidden; clear: both;  } #popup label { float: left; line-height: 20px;  } #popup .row { display: block; padding: 20px 0 20px 0;  } #popup footer { display: block; height: 80px; margin: 0; padding: 20px 20px 20px 20px; clear: both; border-top: 2px solid #e5e5e7; background-color: #f8f8fa;  } #popup footer span { position: relative; display: block; float: left; min-width: 100px; height: 40px; padding: 0 15px 0 15px; line-height: 36px; font-weight: bold; cursor: pointer; text-align: center; text-transform: uppercase; border-radius: 3px; overflow: hidden; color: #9ba8b0; border: 2px solid #9ba8b0;  } #popup footer span:hover { background-color: #f0f0f0;  } #popup footer span:nth-child( 2 ) { float: right;  } .rte { position: relative; margin: 0 0 20px 0; border: 1px solid #e0e0e0; border-radius: 5px;  } .rte > header { position: relative; top: 0; left: 0; height: 82px; list-style: none; border-radius: 5px 5px 0 0; background-color: #f0f0f0; line-height: 40px;  } .rte > header ul { position: absolute; top: 0; left: 0; width: 100%; height: 80px; list-style: none; line-height: 40px;  } .rte > header ul li { position: relative; display: block; float: left; width: 11.11%; height: 40px; border-right: 1px solid #e0e0e0; cursor: pointer; border-bottom: 1px solid #e0e0e0; overflow: hidden; transition: all .25s ease-in-out;  } .rte > header ul li:nth-child( 6 ) { border-right: 0;  } .rte > header ul .font { width: 44.44%; overflow: visible;  } .rte > header ul .font select { display: block; width: 100%; height: 40px; padding: 0 10px 0 10px; background-color: transparent;  } .rte > header ul .font::after { display: none;  } .rte > header ul li:last-child { border-right: 0 solid #e0e0e0;  } .rte > header ul li::after { position: absolute; top: 50%; left: 50%; display: block; width: 100px; height: 100px; content: ""; background: url( "../images/celer/celer.png" ) no-repeat; opacity: 0.5; transition: all .25s ease-in-out; transform: translate( -50%, -50% );  } .rte > header ul li:hover { background-color: #e5e5e5;  } .rte > header ul li:hover::after { opacity: 1;  } .rte > header ul .bold::after { background-position: 0px -1000px;  } .rte > header ul .italic::after { background-position: -100px -1000px;  } .rte > header ul .underline::after { background-position: -200px -1000px;  } .rte > header ul .strikethrough::after { background-position: -300px -1000px;  } .rte > header ul .blockquote::after { background-position: -400px -1000px;  } .rte > header ul .justifyleft::after { background-position: -500px -1000px;  } .rte > header ul .justifyright::after { background-position: -600px -1000px;  } .rte > header ul .justifycenter::after { background-position: -700px -1000px;  } .rte > header ul .justifyfull::after { background-position: -800px -1000px;  } .rte > header ul .unorder-list::after { background-position: -900px -1000px;  } .rte > header ul .order-list::after { background-position: -1000px -1000px;  } .rte > header ul .horizontal-rule::after { background-position: -1100px -1000px;  } .rte > header ul .paragraph::after { background-position: -1200px -1000px;  } .rte > header ul .removeformat::after { background-position: -1300px -1000px;  } .rte > header ul .code::after { background-position: -1400px -1000px;  } .rte > header ul .image::after { background-position: -1500px -1000px;  } .rte > header ul .link::after { background-position: -1600px -1000px;  } .rte > header ul .size::after { background-position: -0px -1000px;  } .rte > header ul .indeed::after { background-position: -1700px -1000px;  } .rte > header ul .size > div { position: absolute; top: 30px; left: 0; display: none; width: 100px; overflow: hidden; background-color: #ffffff; border-radius: 5px; box-shadow: 1px 1px 5px 0 rgba( 0, 0, 0, 0.1 );  } .rte > header ul .size > div span { display: block; padding: 0 10px 0 10px; line-height: 30px; color: #333333; font-size: 12px; border-top: 1px solid #f0f0f0;  } .rte > header ul .size > div span:hover { background-color: #f8f8f8; color: #000000;  } .rte > header ul .size > div span:first-child { font-size: 10px; border-top: 0;  } .rte > header ul .size > div span:last-child { font-size: 14px;  } .rte > header ul .size:hover > div { display: block;  } .rte > div { height: 150px; max-height: 300px; padding: 10px; line-height: 26px; color: #353535; background-color: #ffffff; overflow: auto;  } .rte > div i { font-style: italic;  } .rte > div u { text-decoration: underline;  } .rte > div strike { text-decoration: line-through;  } .rte > div b,.rte > div strong { font-weight: bold;  } .rte > div hr { display: block; width: 100%; height: 2px; background-color: #333333;  } .rte > div blockquote { position: relative; display: inline-block; padding: 10px 20px 10px 20px;  } .rte > div blockquote::before { position: absolute; top: 0; left: 0; color: #ccc; content: open-quote; font-size: 2em; line-height: 0.5em;  } .rte > div blockquote::after { position: absolute; right: 0; bottom: 0; content: close-quote; color: #ccc; font-size: 2em; line-height: 0.5em;  } .rte > div blockquote p { display: inline;  } .rte > div ul {  } .rte > div ul li { padding: 0 0 0 0; list-style-position: inside;  } .rte > div ol {  } .rte > div ol li { padding: 0 0 0 0; list-style-position: inside;  } .rte > div .font-sma { font-size: 10px;  } .rte > div .font-med { font-size: 14px;  } .rte > div .font-big { font-size: 22px;  } .rte > textarea { display: none ! important; border: 0; width: 100%; height: 150px; margin: 0 0 0 0; padding: 10px 15px 10px 15px; resize: none; border-radius: 5px; border: 1px solid #e5e5e5; background-color: #ffffff;  } .select { position: relative; display: block; width: 100%; height: 44px; margin: 0; cursor: pointer; background-color: transparent; border: 2px solid var( --primary-color-lighter ); border-radius: 5px;  } .select:after { position: absolute; top: 0; left: 10px; width: calc( 100% - 52px ); padding: 0; content: attr( data-name ); color: #333333; line-height: 40px; text-align: left; white-space: nowrap; overflow: hidden; border-right: 2px solid var( --primary-color-lighter ); text-overflow: ellipsis;  } .select:before { position: absolute; top: 11px; right: 14px; display: block; width: 12px; height: 12px; content: ""; border-right: 2px solid var( --primary-color-lighter ); border-bottom: 2px solid var( --primary-color-lighter ); box-sizing: border-box; transform: rotate( 45deg );  } .select select { position: absolute; z-index: 3; top: 0; left: 0; display: block; width: 100%; height: 40px; padding: 0 0 0 10px; font-size: 14px; color: #717478; outline: 0; text-indent: 0.01px; text-overflow: ""; appearance: none; -webkit-appearance: none; -moz-appearance: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; opacity: 0;  } .select select::-ms-expand { display: none;  } .select select:focus { background-color: #ffffff; border: 1px solid #d5d5d5;  } .select option { line-height: 40px;  } .off,.on { position: relative; display: inline-block; width: 40px; height: 16px; border-radius: 16px; background-color: var( --primary-color ); cursor: pointer;  } .off { background-color: var( --primary-color-lighter );  } .off::before,.on::before { position: absolute; top: -2px; left: -2px; display: block; width: 20px; height: 20px; content: ""; box-shadow: 0px 3px 1px -2px rgba( 0, 0, 0, 0.2 ), 0px 2px 2px 0px rgba( 0, 0, 0, 0.14 ), 0px 1px 5px 0px rgba( 0, 0, 0, 0.12 ); border-radius: 50%; background-color: #f0f0f0; transition: all 0.1s ease-in-out;  } .on {  } .on::before { top: -2px; left: 20px; background-color: var( --primary-color-darker );  } .off::after { position: absolute; top: -12px; left: -12px; display: block; width: 40px; height: 40px; content: ""; border-radius: 50%; background-color: rgba( 0, 0, 0, 0.1 ); transition: opacity 0.3s ease-in-out; opacity: 0;  } .on::after { position: absolute; top: -12px; left: 10px; display: block; width: 40px; height: 40px; content: ""; border-radius: 50%; background-color: var( --primary-color-darker ); transition: opacity 0.3s ease-in-out; opacity: 0;  } .off:hover:after,.on:hover:after { opacity: 0.5;  } #blacklist { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000000;  } #blacklist > div { position: absolute; top: 50%; left: 50%; display: block; width: 100%; max-width: 500px; transform: translate( -50%, -50% );  } #blacklist h1 { margin: 0 0 10px 0; font-size: 28px; color: #ed1c24; line-height: 100%; text-align: center;  } #blacklist p { margin: 0 0 0 0; font-size: 18px; color: #ffffff; line-height: 180%; font-weight: lighter; text-align: center;  } #maintenance { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;  } #maintenance > div { position: absolute; top: 50%; left: 50%; display: block; width: 100%; max-width: 500px; transform: translate( -50%, -50% );  } #maintenance img { display: block; width: 100px; height: 100px; margin: 0 auto 20px auto; border: 2px solid #ffffff; border-radius: 50%;  } #maintenance h1 { margin: 0 0 10px 0; font-size: 28px; color: #052850; line-height: 100%; text-align: center;  } #maintenance p { margin: 0 10px 0 10px; font-size: 18px; color: #333333; line-height: 180%; font-weight: lighter; text-align: center;  } #page-not-found { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #000000;  } #page-not-found > div { position: absolute; top: 50%; left: 50%; display: block; width: 100%; max-width: 500px; transform: translate( -50%, -50% );  } #page-not-found img { display: block; width: 80px; height: 80px; margin: 0 auto 20px auto;  } #page-not-found p { margin: 0 0 0 0; font-size: 18px; color: #ffffff; font-weight: normal; text-align: center; line-height: 180%;  } #page-not-found a { color: #0bbbff;  } #page-not-found a:hover { color: #ed1c24;  } #form { z-index: 14; position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.5 ); transition: all .25s ease-in-out;  } #form::after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #form section { position: absolute; top: 50%; left: 50%; display: block; max-width: 600px; width: 100%; transform: translate( -50%, -50% );  } #form header { position: relative; display: block; height: 50px; padding: 0 100px 0 20px; font-size: 18px; line-height: 50px; color: #ffffff; background-color: var( --primary-color ); overflow: hidden; border-radius: 10px 10px 0 0;  } #form header i { position: absolute; top: 0; right: 51px; display: block; float: right; width: 51px; height: 50px; cursor: pointer; border-left: 1px solid var( --primary-color-light ); font-style: normal;  } #form header i::before { position: absolute; top: 15px; left: 15px; display: block; width: 20px; height: 20px; border: 2px solid #ffffff; content: ""; box-sizing: border-box;  } #form header .min::before { border-width: 0px 0px 2px 0px;  } #form header i:hover { background-color: var( --primary-color-lighter );  } #form header span { position: absolute; top: 0; right: 0; display: block; float: right; width: 51px; height: 50px; cursor: pointer; border-left: 1px solid var( --primary-color-light );  } #form header span::before,#form header span::after { position: absolute; top: 24px; left: 15px; display: block; width: 20px; height: 2px; background-color: #ffffff; content: "";  } #form header span::before { transform: rotate( -45deg );  } #form header span::after { transform: rotate( 45deg );  } #form header span:hover { background-color: var( --primary-color-lighter );  } #form nav { display: block; height: 52px; padding: 0 0 0 20px; background-color: #f8f8fa; border-bottom: 2px solid #e5e5e7;  } #form nav span { position: relative; display: block; float: left; margin: 0 30px 0 0; line-height: 50px; color: var( --primary-color ); font-weight: bold; cursor: pointer; text-transform: uppercase;  } #form nav .sel::after { position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: var( --primary-color ); content: "";  } #form article { display: none; min-height: 80px; max-height: calc( 100vh - 154px ); padding: 20px 0 0 0; font-size: 16px; background-color: #ffffff; overflow: auto;  } #form article::after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #form .visible { display: block;  } #form .hidden { display: none;  } #form .uppercase { text-transform: uppercase;  } #form .with-tabs article { max-height: calc( 100vh - 184px );  } #form p { display: block; margin: 0 0 20px 0; clear: both; color: #454a4f; color: #707070; line-height: 150%;  } #form label { display: block; margin: 0 0 5px 0; clear: both; line-height: 100%; color: #9da3a8; font-size: 14px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  } #form .label-inline { display: inline-block; padding: 0 0 0 20px; line-height: 16px; vertical-align: middle;  } #form em { display: block; margin: 0 0 15px 0; line-height: 150%; font-size: 14px; color: #858a8f;  } #form fieldset { position: relative; display: block; max-width: 100%; margin: 0 20px 30px 20px; clear: both;  } #form article fieldset:last-child { margin: 0 20px 20px 20px;  } #form fieldset::after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #form .group-1 { margin: 0 0 28px 0; padding: 20px 0 10px 0; background-color: #ffede9; clear: both;  } #form .group-1::after { display: block; width: 100%; height: 0; content: ""; clear: both;  } #form .separator { display: block; width: 100%; height: 2px; margin: 0 0 28px 0; background: repeating-linear-gradient( 90deg, #e0e0e0, #e0e0e0 2px, #ffffff 2px, #ffffff 4px ); clear: both;  } #form .section-title { display: block; width: 100%; line-height: 100%; margin: 0 0 28px 0; padding: 10px 20px 10px 20px; background: var( --secondary-color-light ); clear: both; color: var( --primary-color-light ); font-weight: bold;  } #form .list { display: block; margin: 0 20px 20px 20px; list-style: none;  } #form .list::after { display: block; width: 100%; height: 0; content: ""; clear: both;  } #form .list li { display: block; margin: 0 0 10px 0; line-height: 150%; color: #49526f;  } #form footer { display: block; height: 82px; margin: 0; padding: 20px 0 20px 0; clear: both; border-top: 2px solid #e5e5e7; background-color: #f8f8fa; overflow: hidden; border-radius: 0 0 10px 10px;  } #form footer span { display: block; float: left; min-width: 90px; height: 40px; padding: 0; margin: 0 0 0 20px; color: #ffffff; line-height: 40px; font-weight: bold; cursor: pointer; text-align: center; text-transform: uppercase; background-color: var( --secondary-color ); border-radius: 5px;  } #form footer span:hover { background-color: var( --secondary-color-light );  } #form footer span:nth-child(2) { float: right; margin: 0 20px 0 0; color: #9ba8b0; background-color: transparent; border: 2px solid #9ba8b0;  } #form footer span:hover:nth-child(2) { background-color: #f0f0f0;  } #form .comments { display: block; list-style: none;  } #form .comments li { display: block; margin: 0 0 20px 0; clear: both;  } #form .comments p { position: relative; margin: 0 10px 15px 10px; padding: 10px; background-color: #f0f0f5; border-radius: 5px; font-size: 14px; color: #333333; line-height: 25px;  } #form .comments p::before { position: absolute; bottom: -5px; left: 10px; display: block; width: 10px; height: 10px; background-color: #f0f0f5; transform: rotate( 45deg ); content: "";  } #form .comments time { display: block; margin: 0 0 5px 10px; text-transform: uppercase; font-size: 12px; clear: both; color: #787878; line-height: 100%;  } #form .comments h3 { margin: 0 0 0 10px; clear: both; font-size: 12px; font-weight: bold; color: #333333; line-height: 100%;  } #form .aci { position: relative; min-height: 44px; overflow: hidden; border: 2px solid #e0e0e0; border-radius: 5px;  } #form .aci span { position: relative; display: block; width: 100%; height: 40px; padding: 0 0 0 10px; line-height: 40px; color: #353535; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  } #form .aci:after { position: absolute; top: 11px; right: 14px; display: block; width: 12px; height: 12px; content: ""; border-right: 2px solid #e0e0e0; border-bottom: 2px solid #e0e0e0; box-sizing: border-box; transform: rotate( 45deg );  } #form .aci:before { position: absolute; top: 0px; right: 40px; display: block; width: 2px; height: 40px; content: ""; background-color: #e0e0e0;  } #form .aci input { position: absolute; z-index: 6; display: none; top: 62px; left: 20px; width: calc( 100% - 40px ) !important; height: 44px; padding: 10px; color: #666666; border: 2px solid #e0e0e0; border-radius: 3px; clear: both;  } #form .aci ol { display: none; z-index: 5; width: 100%; padding: 84px 0 0 0; overflow: hidden; list-style-type: none; background-color: #ffffff; border-radius: 0 0 3px 3px; border-top: 2px solid #e0e0e0;  } #form .aci li { display: block; line-height: 40px; width: 100%; padding: 0 0 0 10px; color: #666666; cursor: pointer; border-top: 2px dotted #e8e8e8;  } #form .aci li:first-child {  } #form .aci li:hover { background-color: #f7f6f9;  } #form .aci .sel { color: #2b2e4f; background-color: #f7f6f9;  } #form .aciv input { display: block;  } #form .aciv ol { display: block; list-style: none;  } #form .aciv:after { top: 16px; transform: rotate( -135deg );  } #form .aciv span { border-bottom: 0;  } #form .acivt input { display: block; top: auto; bottom: 40px;  } #form .acivt ol { display: block; top: auto; bottom: 35px; padding: 0 0 55px 0; border-radius: 3px 3px 0 0; border-bottom: 0; border-top: 1px solid #e0e0e0;  } #form .button { display: inline-block; float: none; min-width: 90px; height: 40px; margin: 0 0 0 0; padding: 0 10px 0 10px; color: #9ba8b0; line-height: 40px; font-weight: bold; cursor: pointer; text-align: center; text-transform: uppercase; background-color: transparent; border: 2px solid #9ba8b0; border-radius: 3px;  } #form .button:hover { background-color: #f0f0f0;  } #form .cbl { display: block; margin: 0 0 0 0; overflow: hidden; clear: both; list-style: none;  } #form .cbl:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #form .cbl li { position: relative; display: block; height: 40px; padding: 0 0 0 40px; overflow: hidden; line-height: 40px; color: #353535;  } #form .cbl .cb,#form .cbl .cbs { position: absolute; top: 10px; left: 0;  } #form .file { position: relative; height: 44px; border: 2px solid #e0e0e0; border-radius: 3px;  } #form .file input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;  } #form .file:before { position: absolute; top: 0; left: 10px; line-height: 40px; color: #353535; overflow: hidden; content: attr( data-label ); white-space: nowrap; text-overflow: ellipsis;  } #form .imagefile { position: relative; display: block; width: 100px; height: 100px; background-color: #f5f5f7; border-radius: 4px; border: 2px dashed #e0e0e0; background: no-repeat scroll center center / cover;  } #form .imagefile:before { position: absolute; top: 47px; left: 38px; display: block; width: 20px; height: 2px; content: ""; background-color: #d5d5d7;  } #form .imagefile:after { position: absolute; top: 38px; left: 47px; display: block; width: 2px; height: 20px; content: ""; background-color: #d5d5d7;  } #form .imagefile input { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; overflow: hidden; cursor: pointer;  } #form .imagefile span { position: absolute; top: -10px; right: -10px; display: none; width: 20px; height: 20px; background-color: #ed1c24; border-radius: 50%; cursor: pointer; opacity: 0.7;  } #form .imagefile span:hover { opacity: 1;  } #form .imagefile span:before,#form .imagefile span:after { position: absolute; top: 50%; left: 50%; display: block; width: 2px; height: 12px; margin: -6px 0 0 -1px; content: ""; background-color: #ffffff;  } #form .imagefile span:before { transform: rotate( -45deg );  } #form .imagefile span:after { transform: rotate( 45deg );  } #form .imagefile-available span { display: block;  } #form .imagefile-available:after,#form .imagefile-available:before { display: none;  } #form input,#form textarea { display: block; width: 100%; height: 42px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 2px solid #e0e0e0; border-radius: 5px; clear: both; background-color: transparent;  } #form textarea { min-height: 150px; padding: 10px; line-height: 26px; resize: vertical;  } #form textarea:focus,#form input:focus { color: #454545; border: 2px solid #2b2e4f;  } #form .ierror { border: 2px solid #ff374f;  } #form .item-header { position: relative; display: block; margin: 0 0 0 0; padding: 0 40px 0 30px;  } #form .item-header:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #form .item-header > div { display: block; float: left; width: 12.5%; padding: 0 10px 0 0;  } #form .item-list { position: relative; display: block; height: 42px; margin: 0 0 0 0; padding: 0 40px 0 30px;  } #form .item-list:hover input { border-color: #000000;  } #form .item-list:hover:before { color: #000000;  } #form .item-list:before { position: absolute; top: 0; left: 0; display: block; width: 20px; line-height: 40px; content: attr( data-nr ); font-weight: bold; color: #888888;  } #form .item-list:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #form .item-list > div { display: block; float: left; height: 40px; width: 12.5%; padding: 0 10px 0 0;  } #form .item-list .remove { position: absolute; top: 5px; right: 0; display: block; width: 30px; height: 30px; border-radius: 50%; background-color: #ee2c23; cursor: pointer;  } #form .item-list .remove:hover { background-color: #fe3c33;  } #form .item-list .remove:before,#form .item-list .remove:after { position: absolute; top: 14px; left: 8px; width: 14px; height: 2px; background-color: #ffffff; content: "";  } #form .item-list .remove:before { transform: rotate( 45deg );  } #form .item-list .remove:after { transform: rotate( -45deg );  } #form .item { position: relative; display: block; margin: 0 0 0 0; padding: 17px 20px 20px 60px; background-color: #f5f7f9; border-radius: 3px; border: 2px solid #e0e0e0;  } #form .item figure { position: absolute; top: 20px; left: 10px; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;  } #form .item figure img { display: block; width: 100%; height: 100%;  } #form .item p { margin: 0 0 10px 0; clear: both; line-height: 20px; font-weight: bold; color: #7e809c;  } #form .item .remove { position: absolute; bottom: 20px; left: 5px; width: 50px; height: 50px; cursor: pointer; opacity: 0.7;  } #form .item .remove:hover { opacity: 1;  } #form .item .remove::after { position: absolute; top: -25px; right: -25px; display: block; width: 100px; height: 100px; background: url( "../images/cp/cp.png?2" ) no-repeat -1900px -500px; content: ""; transform: scale( 0.5 );  } #form .item .row { display: block;  } #form .item .row input { float: left; width: calc( 50% - 10px ); clear: none;  } #form .item .row input:first-child { margin: 0 10px 0 0;  } #form .item .row input:last-child { margin: 0 0 0 10px;  } #form .item .row span { display: block; float: left; width: calc( 50% - 10px ); clear: none; line-height: 20px; color: #aaaaaa; font-size: 10px; text-transform: uppercase;  } #form .item .row span:first-child { margin: 0 10px 0 0;  } #form .item .row span:last-child { margin: 0 0 0 10px;  } #form .maci { min-height: 44px; border: 2px solid #e0e0e0; border-radius: 3px;  } #form .maci:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #form .maci input { display: block; float: left; width: 33%; height: 42px; max-width: 600px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 0; clear: none; background-color: transparent;  } #form .maci span { position: relative; display: block; float: left; height: 30px; line-height: 30px; margin: 5px 5px 5px 5px; padding: 0 40px 0 15px; background-color: #f0f0f0; border-radius: 5px; color: #666688; cursor: pointer;  } #form .maci .edit-color { background-color: #5b5e7f; color: #ffffff;  } #form .maci span > span { position: absolute; top: 5px; right: 10px; display: block; width: 20px; height: 20px; margin: 0; padding: 0; opacity: 0.6; border-radius: 50%; background-color: transparent; cursor: pointer;  } #form .maci span span:hover { opacity: 1; background-color: #ed1c24;  } #form .maci span span:before,#form .maci span span:after { position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; content: ""; background-color: #2b2e4f;  } #form .maci span span:before { transform: rotate( -45deg );  } #form .maci span span:after { transform: rotate( 45deg );  } #form .maci .edit-color span:before,#form .maci .edit-color span:after { background-color: #ffffff;  } #form .maci span span:hover:before,#form .maci span span:hover:after { background-color: #ffffff;  } #form .maci ol { display: none; z-index: 5; width: 100%; padding: 0 0 0 0; overflow: hidden; list-style-type: none; background-color: #ffffff; border-radius: 0 0 3px 3px; border-top: 0 solid #e0e0e0;  } #form .maci li { display: block; line-height: 40px; width: 100%; padding: 0 0 0 10px; color: #666666; cursor: pointer; border-top: 2px dotted #e8e8e8;  } #form .maci li:first-child {  } #form .maci li:hover { background-color: #f7f6f9;  } #form .maci .sel { color: #2b2e4f; background-color: #f7f6f9;  } #form .media { position: relative; display: block; min-height: 154px; margin: 0 20px 20px 20px; background-color: #f5f5f7; border-radius: 4px; border: 2px dashed #e5e5e7;  } #form .media ul { position: relative; display: block; min-height: 150px; padding: 10px; clear: both; overflow: hidden; list-style: none;  } #form .add:before,#form .add:after { position: absolute; top: 50%; left: 50%; display: block; background-color: #e0e0e0; position: absolute; content: "";  } #form .add:before { width: 50px; height: 2px; margin: -1px 0 0 -25px;  } #form .add:after { width: 2px; height: 50px; margin: -25px 0 0 -1px;  } #form .media ul li { position: relative; display: block; float: left; width: 25%; height: 0; padding: 0 0 25% 0; opacity: 0.3;  } #form .media ul li:nth-child(-n+20) { opacity: 1;  } #form .media ul figure { position: absolute; top: 10px; left: 10px; display: block; width: calc( 100% - 20px ); height: calc( 100% - 20px ); cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: cover; border: 2px solid #e5e5e7; border-radius: 4px;  } #form .media ul li span { position: absolute; top: 0; right: 0; width: 20px; height: 20px; background-color: #ed1c24; border-radius: 50%; cursor: pointer; opacity: 0.7;  } #form .media ul li span:hover { opacity: 1;  } #form .media ul li span:before,#form .media ul li span:after { position: absolute; top: 50%; left: 50%; display: block; width: 2px; height: 12px; margin: -6px 0 0 -1px; content: ""; background-color: #ffffff;  } #form .media ul li span:before { transform: rotate( -45deg );  } #form .media ul li span:after { transform: rotate( 45deg );  } #form .media input { position: absolute; top: 100%; left: 0; opacity: 0; width: 10px; height: 10px; overflow: hidden;  } #form .media ul .placeholder { border: 2px dashed #ed1c24; opacity: 0.5;  } #form .media ul .dropcell { border: 2px dashed #6ac259;  } #form .minput { min-height: 44px; border: 2px solid #e0e0e0; border-radius: 3px;  } #form .minput:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #form .minput input { display: block; float: left; width: 33%; height: 42px; max-width: 600px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 0; clear: none; background-color: transparent;  } #form .minput span { position: relative; display: block; float: left; height: 30px; line-height: 30px; margin: 5px 5px 5px 5px; padding: 0 40px 0 15px; background-color: #f0f0f0; border-radius: 5px; color: #666688; cursor: pointer;  } #form .minput .edit-color { background-color: #5b5e7f; color: #ffffff;  } #form .minput span > span { position: absolute; top: 5px; right: 10px; display: block; width: 20px; height: 20px; margin: 0; padding: 0; opacity: 0.6; border-radius: 50%; background-color: transparent; cursor: pointer;  } #form .minput span span:hover { opacity: 1; background-color: #ed1c24;  } #form .minput span span:before,#form .minput span span:after { position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; content: ""; background-color: #2b2e4f;  } #form .minput span span:before { transform: rotate( -45deg );  } #form .minput span span:after { transform: rotate( 45deg );  } #form .minput .edit-color span:before,#form .minput .edit-color span:after { background-color: #ffffff;  } #form .minput span span:hover:before,#form .minput span span:hover:after { background-color: #ffffff;  } #form .permissions { position: relative; display: block; clear: both; list-style: none; border: 1px solid #f0f0f0; border-radius: 5px;  } #form .permissions:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #form .permissions li { position: relative; display: block; height: 41px; padding: 0 0 0 120px; text-align: center; border-bottom: 1px solid #f0f0f0;  } #form .permissions li:before { position: absolute; top: 0; left: 10px; width: 110px; height: 40px; overflow: hidden; white-space: nowrap; content: attr( data-label ); color: #9da3a8; font-size: 14px; line-height: 40px; text-transform: uppercase; text-align: left; text-overflow: ellipsis;  } #form .permissions li:first-child { line-height: 40px; color: #9da3a8; text-transform: uppercase; font-weight: bold;  } #form .permissions li:last-child { border-bottom: 0;  } #form .permissions li > div { position: relative; float: left; width: 16.66%; float: left; height: 40px;  } #form .permissions span { position: absolute; top: 50%; left: 50%; display: block; transform: translate( -50%, -50% );  } #form .order { position: relative; display: block; margin: 0 0 0 0; padding: 17px 20px 20px 60px; background-color: #f5f7f9; border-radius: 3px; border: 2px solid #e0e0e0;  } #form .order figure { position: absolute; top: 20px; left: 10px; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;  } #form .order figure img { display: block; width: 100%; height: 100%;  } #form .order p { margin: 0 0 10px 0; clear: both; line-height: 20px; font-weight: bold; color: #7e809c;  } #form .order .remove { position: absolute; bottom: 20px; left: 5px; width: 50px; height: 50px; cursor: pointer; opacity: 0.7;  } #form .order .remove:hover { opacity: 1;  } #form .order .remove:after { position: absolute; top: -25px; right: -25px; display: block; width: 100px; height: 100px; background: url( "../images/cp/cp.png" ) no-repeat -1500px -500px; content: ""; transform: scale( 0.5 );  } #form .select { position: relative; display: block; width: 100%; height: 44px; margin: 0; cursor: pointer; background-color: transparent; border: 2px solid #e0e0e0; border-radius: 5px;  } #form .select:after { position: absolute; top: 0; left: 10px; width: calc( 100% - 52px ); padding: 0; content: attr( data-name ); color: #454545; line-height: 40px; text-align: left; white-space: nowrap; overflow: hidden; border-right: 2px solid #e0e0e0; text-overflow: ellipsis;  } #form .select:before { position: absolute; top: 11px; right: 14px; display: block; width: 12px; height: 12px; content: ""; border-right: 2px solid #e0e0e0; border-bottom: 2px solid #e0e0e0; box-sizing: border-box; transform: rotate( 45deg );  } #form .select select { position: absolute; z-index: 3; top: 0; left: 0; display: block; width: 100%; height: 40px; padding: 0 0 0 10px; font-size: 14px; color: #717478; outline: 0; text-indent: 0.01px; text-overflow: ""; appearance: none; -webkit-appearance: none; -moz-appearance: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; opacity: 0;  } #form .select select::-ms-expand { display: none;  } #form .select select:focus { background-color: #ffffff; border: 1px solid #d5d5d5;  } #form .select option { line-height: 40px;  } .showpass,.hidepass { position: absolute; bottom: 2px; right: 2px; width: 38px; height: 38px; cursor: pointer; overflow: hidden;  } .showpass:after,.hidepass:after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; content: ""; background: url( "../images/cp/cp.png" ) no-repeat; transform: translate( -50%, -50% ) scale( 0.4 ); opacity: 0.5;  } .showpass:after { background-position: -1000px -500px;  } .hidepass:after { background-position: -900px -500px;  } #form .timepicker { display: none; margin: 0; padding: 10px 0 10px 0; overflow: hidden; background-color: #ffffff;  } #form .timepicker .select { float: left; width: 100px; margin: 0 20px 0 0;  } #form .timepicker .select::after { left: 0; width: calc( 100% - 42px ); text-align: center;  } #form .timepicker .labels { display: block; height: 16px; font-size: 12px;  } #form .timepicker .labels span { display: block; float: left; width: 100px; margin: 0 20px 0 0; line-height: 16px; color: #9da3a8;  } html, body { width: 100%; height: 100%; min-height: 100%; background-color: #ffffff; overflow-x: hidden;  } html { position: relative; overflow: auto; background: radial-gradient(at right 0%, var( --primary-color-light ), var( --primary-color-very-dark ) );  } strong, b { font-weight: bold;  } em, i { font-style: italic;  } table { border-collapse: collapse; border-spacing: 0;  } body { font-size: 14px; font-family: roboto, helvetica, arial; text-align: left; background: radial-gradient(at right 0%, var( --primary-color-light ), var( --primary-color-very-dark ) );  } textarea:focus, input:focus { outline: none;  } form { display: inline; margin: 0; padding: 0;  } #all { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; height: auto; margin: 0; overflow: auto; background-color: #ffffff; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; transition: all 0.25s; transform-origin: 100% 50%;  } #all:before {  } #all:after { display: block; width: 100%; height: 700px; content: ""; clear: both;  } #all.open { height: 100%; overflow: hidden; transform: perspective( 1500px ) rotateY( -15deg );  } #loadtime { position: fixed; z-index: 5; width: 73px; bottom: 0px; left: -70px; padding: 9px 0px 9px 0px; background-color: #000000; color: #ffffff; text-align: center; font-weight: bold;  } #loadtime:hover { left: 0px;  } .nosel {  } #header .form ul { position: absolute; top: 40px; left: 0; display: none; width: 100%; list-style: none; background-color: #ffffff; border: 2px solid #f0f0f0; overflow: hidden; border-radius: 5px;  } #header .form ul li { position: relative; display: block; height: 40px; padding: 0 0 0 45px; line-height: 40px; overflow: hidden;  } #header .form ul .sel { background-color: #fafafa;  } #header .form ul li:before {  } #header .form ul figure { position: absolute; top: 5px; left: 5px; width: 30px; height: 30px; overflow: hidden; border-radius: 4px;  } #header .form ul img { display: block; width: 100%; height: 100%;  } #header { position: fixed; z-index: 10; top: 0; left: 0; display: block; width: 100%; height: 75px; padding: 10px 20px 0 20px;  } #header > div { position: relative; max-width: 1440px; height: 64px; margin: 0 auto 0 auto; padding: 0 10px 0 10px; background-color: var( --primary-color ); border-radius: 10px;  } #header .logo { position: relative; display: block; float: left; height: 50px; margin: 7px 0 0 0;  } #header .logo-mobile { position: absolute; top: 5px; left: 5px; display: none; width: 50px; height: 50px; overflow: hidden;  } #header .logo-mobile::after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat 0 0; content: ""; transform: translate( -50%, -50% ) scale( 0.5 );  } #header ul { display: block; float: right; height: 40px; margin: 12px 0 0 0; list-style: none;  } #header.sel ul {  } #header ul li { display: block; float: left; height: 40px; margin: 0 0 0 20px; color: rgba( 255, 255, 255, 0.8 ); font-size: 16px; line-height: 40px; cursor: pointer; transition: all 0.25s ease-in-out;  } #header ul li a { display: block; transition: all 0.25s ease-in-out;  } #header ul li a:hover,#header ul li:hover { color: var( --secondary-color );  } #header ul .cart { position: relative; width: 50px; overflow: hidden; transition: all 0.25s ease-in-out;  } #header ul .cart::before { position: absolute; top: 50%; left: 50%; display: block; width: 100px; height: 100px; background: url( "../images/web/web.png?1" ) no-repeat -2600px -200px; content: ""; transform: translate( -50%, -50% ) scale( 0.5 );  } #header ul .items::after { position: absolute; z-index: 10; top: 2px; right: 2px; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #ed1c24; content: attr( data-items ); text-align: center; line-height: 16px; font-size: 10px; color: #ffffff; border: 2px solid #ffffff;  } #header ul .read { position: relative; padding: 0 15px 0 45px; border: 2px solid var( --primary-color-lighter ); border-radius: 10px; overflow: hidden; transition: all 0.25s ease-in-out;  } #header ul .read::before { position: absolute; top: 50%; left: -27px; display: block; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat -1300px -200px; content: ""; transform: translate( 0, -50% ) scale( 0.44 );  } #header ul .read:hover { color: var( --secondary-color ); border-color: var( --secondary-color );  } #header ul .read:hover::before { background-position: -1300px -400px;  } #header ul .read img { display: none; width: 60px; margin: 0 auto 0 auto;  } #header ul .read span { display: block; text-transform: uppercase; line-height: 36px;  } #header ul .read i { display: none; text-align: center; font-style: normal; color: #ffffff; font-size: 14px;  } #header .mm { position: absolute; right: 20px; top: 12px; display: none; width: 40px; height: 40px; background-color: var( --primary-color-darker ); cursor: pointer; border-radius: 5px;  } #header .mm i { position: absolute; top: 19px; left: 12px; display: block; width: 16px; height: 2px; background-color: #ffffff; font-style: normal; transition: all 0.25s ease-in-out;  } #header .mm i::before,#header .mm i::after { position: absolute; top: 0; left: 0; display: block; width: 16px; height: 2px; background-color: #ffffff; content: ""; transition: all 0.25s ease-in-out;  } #header .mm i::before { top: -6px;  } #header .mm i::after { top: 6px;  } #header.sel .mm i { background-color: transparent;  } #header.sel .mm i::before { top: 0px; transform: rotate( 45deg );  } #header.sel .mm i::after { top: 0px; transform: rotate( -45deg );  } #static-header { position: fixed; z-index: 1; top: 0; left: 0; visibility: hidden; display: block; width: 210px; height: 100%; transition: all 0.25s; opacity: 0; overflow: hidden;  } #static-header.active { visibility: visible; opacity: 1;  } #static-header-mask { position: fixed; z-index: 5; top: 0; right: 0; display: none; width: calc( 100% - 210px ); height: 100%; opacity: 0;  } #static-header-mask.active { display: block; opacity: 1;  } #static-header > div { position: absolute; top: 0; left: 0; width: 230px; height: 100%; overflow: auto; padding: 0 0 300px 0;  } #static-header .logo { display: block; width: 200px; margin: 0 0 0 0; padding: 20px 20px 20px 20px;  } #static-header .logo img { display: block; width: 100%;  } #static-header h5 { position: relative; margin: 0 0 0 0; padding: 0 0 0 40px; line-height: 30px; font-size: 14px; border-bottom: 1px solid rgba( 255, 255, 255, 0.1 ); color: rgba( 255, 255, 255, 1 ); cursor: pointer; overflow: hidden;  } #static-header h5::before { position: absolute; top: -35px; left: -30px; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat 0 0; content: ""; transform: scale( 0.3 );  } #static-header .cart::before { background-position: -2600px -200px;  } #static-header .items::after { position: absolute; z-index: 10; top: 0px; left: 2px; display: block; width: 18px; height: 18px; border-radius: 50%; background-color: #ed1c24; content: attr( data-items ); text-align: center; line-height: 16px; font-size: 10px; color: #ffffff; border: 1px solid #ffffff;  } #static-header .settings::before { background-position: -1400px -200px;  } #static-header .notes::before { background-position: -200px -200px;  } #static-header .profile::before { background-position: -1500px -200px;  } #static-header .hidden { display: none;  } #static-header h6 { margin: 0 0 0 0; padding: 0 0 0 10px; font-size: 14px; line-height: 30px; border-bottom: 1px solid rgba( 255, 255, 255, 0.1 ); color: rgba( 255, 255, 255, 0.2 );  } #static-header ol { display: block; width: 210px; list-style: none; max-height: 31px; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden;  } #static-header ol.sel { max-height: 3000px; overflow: visible;  } #static-header ol li { position: relative; display: block; width: 180px; max-height: 31px; margin: 0 0 0 20px; padding: 0 0 0 0; overflow: hidden; transition: all 0.25s ease-in-out; border-bottom: 1px solid rgba( 255, 255, 255, 0.1 ); cursor: pointer;  } #static-header ol li:first-child { width: 190px; padding: 0 0 0 0; margin: 0 0 0 10px; color: rgba( 255, 255, 255, 1 ); line-height: 30px;  } #static-header ol .disabled { opacity: 0.2; cursor: default;  } #static-header ol .disabled span { cursor: default;  } #static-header ol li::before { position: absolute; z-index: 1; top: 8px; right: 5px; width: 10px; height: 10px; border-color: rgba( 255, 255, 255, 1 ); border-style: solid; border-width: 0 1px 1px 0; transform: rotate( 45deg ); content: "";  } #static-header ol .disabled::before { display: none;  } #static-header ol > .sel { max-height: 600px; overflow: visible;  } #static-header ol li::after { width: 100%; height: 0; clear: both; content: "";  } #static-header ol li > span { position: relative; z-index: 2; display: block; width: 100%; margin: 0 0 0 0; line-height: 30px; clear: both; color: #ffffff; font-weight: normal; font-size: 12px; cursor: pointer;  } #static-header ol li .chapters { display: block;  } #static-header ol li .chapters:after { display: block; clear: both; width: 100%; height: 0; clear: both;  } #static-header ol li > div { position: relative; display: block; float: left; width: 36px; height: 36px; border-radius: 5px 5px 0 0; text-align: center; cursor: pointer;  } #static-header ol li > div.sel { background-color: #ffffff;  } #static-header ol li > div > span { display: block; margin: 5px 5px 5px 5px; line-height: 26px; color: #ffffff; font-size: 12px; border-radius: 5px; background-color: var( --primary-color-light );  } #static-header ol li > div.sel span {  } #static-header ol li > div > div { position: absolute; z-index: 3; width: 200px; top: 100%; left: 50%; display: none; padding: 10px 10px 0 10px; background-color: #ffffff; border-radius: 5px 5px 5px 5px; overfow: hidden;  } #static-header ol li > div.sel > div { display: block;  } #static-header ol li > div:nth-of-type( 5n + 1 ) > div { left: -10px;  } #static-header ol li > div:nth-of-type( 5n + 2 ) > div { left: -46px;  } #static-header ol li > div:nth-of-type( 5n + 3 ) > div { left: -82px;  } #static-header ol li > div:nth-of-type( 5n + 4 ) > div { left: -118px;  } #static-header ol li > div:nth-of-type( 5n + 5 ) > div { left: -154px;  } #static-header ol li > div > div p { text-align: center; color: var( --primary-color ); line-height: 20px;  } #static-header ol li > div > div span { display: block; float: left; width: 36px; height: 36px; color: var( --primary-color ); text-align: center; line-height: 36px; cursor: pointer;  } #footer { position: absolute; z-index: 1; left: 0; bottom: 0; display: block; width: 100%; height: 700px; padding: 150px 20px 0 20px; background-color: #fcf9f9; letter-spacing: 0.2px; border-top: 1px solid #f0f0f0;  } #footer::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #footer nav { position: relative; max-width: 1400px; margin: 0 auto 50px auto;  } #footer nav::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #footer nav aside { display: block; float: left; width: 60%; overflow: hidden;  } #footer nav aside figure { display: block; max-width: 200px; margin: 0 0 50px 0;  } #footer nav aside figure img { display: block; width: 100%;  } #footer nav aside p { max-width: 500px; font-size: 18px; line-height: 30px; color: #656565;  } #footer nav ul { display: block; float: left; width: 20%; list-style: none;  } #footer nav ul::after { display: none; width: 100%; height: 0; clear: both; content: "";  } #footer nav ul li { position: relative; display: block; font-size: 16px; line-height: 46px;  } #footer nav ul li:first-child { margin: 0 0 10px 0; text-transform: uppercase; color: #333333; font-weight: bold;  } #footer nav ul li a { display: block; color: #333333; cursor: pointer;  } #footer nav ul li a:hover { color: var( --secondary-color );  } #footer footer { max-width: 1400px; margin: 0 auto 0 auto; padding: 50px 0 0 0; border-top: 1px solid #e0e0e5;  } #footer footer::after {  } #footer footer p { position: relative; float: left; margin: 0 20px 0 0; color: rgba( 0, 0, 0, 0.8 ); line-height: 40px; font-size: 14px;  } #footer footer p br { display: none; clear: none;  } #footer footer ul { display: block; float: left; margin: 0 0 0 0; list-style: none;  } #footer footer ul::after { display: none; width: 100%; height: 0; clear: both; content: "";  } #footer footer ul li { position: relative; display: block; float: left; margin: 0 20px 0 0; padding: 0 0 0 20px; line-height: 40px; color: rgba( 0, 0, 0, 0.8 );  } #footer footer ul li::before { position: absolute; top: 10px; left: 0; display: block; width: 2px; height: 20px; content: ""; background-color: #e0e0e0;  } #footer footer ul li a:hover { color: var( --secondary-color );  } #footer footer ol { position: relative; display: block; float: right; height: 40px; margin: 0 auto 0 auto; list-style: none; text-align: center;  } #footer footer ol:after { display: none; width: 100%; height: 0; clear: both; content: "";  } #footer footer ol li { display: block; float: left; width: 40px; height: 40px; overflow: hidden;  } #footer footer ol li a { position: relative; display: block; width: 40px; height: 40px;  } #footer footer ol li a::after { position: absolute; top: -30px; left: -30px; display: block; width: 100px; height: 100px; content: ""; background: url( "../images/web/web.png" ) no-repeat; opacity: 0.5; transform: scale( 0.35 );  } #footer footer ol li a:hover::after { opacity: 1;  } #footer footer ol .fb a::after { background-position: -500px -300px;  } #footer footer ol .ig a::after { background-position: -600px -300px;  } #footer footer ol .tw a::after { background-position: -700px -300px;  } #footer footer ol .li a::after { background-position: -800px -300px;  } #main-about { position: relative; display: block; padding: 50px 10px 0 10px; margin: 0 auto 50px auto; background-color: #ffffff;  } #main-about::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-about > div { position: relative; max-width: 1400px; margin: 0 auto 0 auto; overflow: hidden;  } #main-about p { max-width: 800px; margin: 0 auto 20px auto; color: rgba( 255, 255, 255, 0.8 ); font-size: 22px; line-height: 32px; color: var( --primary-color ); text-align: center;  } #main-about span { display: block; clear: both; max-width: 200px; margin: 0 auto 0 auto; color: var( --primary-color ); background-color: var( --secondary-color ); border-radius: 5px;  } #main-about span:hover { color: var( --primary-color-darker ); background-color: var( --secondary-color-lighter );  } #main-about span a { display: block; padding: 0 25px 0 25px; text-transform: uppercase; font-weight: bold; line-height: 50px; text-align: center;  } #main-ad { position: relative; display: block; margin: 0 0 50px 0; padding: 50px 0 50px 0; border-bottom: 1px dashed #e5e5e5; border-top: 1px dashed #e5e5e5;  } #main-ad:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-ad > div { position: relative; display: block; margin: 0 auto 0 auto; text-align: center;  } #main-ad > div:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-ad figure { position: relative; display: inline-block; max-width: 250px; margin: 0 10px 0 10px;  } #main-ad figure:after { position: absolute; bottom: -12px; left: 0; width: 100%; line-height: 10px; font-size: 10px; color: #aaaaaa; text-transform: uppercase; content: attr( data-label );  } #main-ad figure a { display: block;  } #main-ad figure img { display: block; width: 100%;  } #main-favourites { position: relative; display: block; min-height: 600px; padding: 50px 0 50px 0; margin: 0 auto 50px auto; background-color: #ffffff;  } #main-favourites:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-favourites h2 { max-width: 1440px; margin: 0 auto 50px auto; color: var( --primary-color-darker ); line-height: 100%; font-size: 33px; font-weight: bold; text-align: center;  } #main-favourites > div { position: relative; max-width: 1440px; margin: 0 auto 0 auto;  } #main-favourites > div:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-favourites ul { display: block; list-style: none;  } #main-favourites ul:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-favourites ul li { position: relative; display: block; float: left; width: 25%; height: 170px; padding: 20px 10px 10px 90px; border-radius: 5px; cursor: pointer; transition: all 0.2s ease-in-out;  } #main-favourites ul li:hover { background-color: #fffaf5; box-shadow: 0 0 20px 0 rgba( 127, 127, 127, 0.2 );  } #main-favourites ul li figure { position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; overflow: hidden; border-radius: 5px;  } #main-favourites ul li figure img { display: block; width: 100%; height: 100%;  } #main-favourites ul li h3 { height: 30px; margin: 0 0 0 0; font-size: 22px; line-height: 100%; color: var( --primary-color-lighter ); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  } #main-favourites ul li h6 { margin: 0 0 10px 0; font-size: 14px; line-height: 100%; color: #7090aa; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  } #main-favourites ul li p { height: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  } #main-favourites ul li p span { display: block; float: left; margin: 0 10px 10px 0; padding: 0 10px 0 10px; font-size: 10px; line-height: 20px; color: #50708a; background-color: #f5f8fa; border-radius: 10px; transition: all 0.2s ease-in-out;  } #main-favourites ul li:hover p span { background-color: #ffe5d5;  } #main-intro { position: relative; display: block; padding: 60px 20px 0 20px; margin: 0 auto 50px auto; background-color: var( --primary-color-lighter ); background: url( "../images/web/main/intro-background-1.jpg?1" ) no-repeat center center / cover; background-attachment: fixed;  } #main-intro::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: var( --primary-color-lighter ); content: ""; opacity: 0.5;  } #main-intro::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-intro > div { position: relative; max-width: 1400px; height: 460px; margin: 0 auto 0 auto;  } #main-intro aside { position: absolute; top: 50%; left: 0; transform: translate( 0, -50% );  } #main-intro aside h2 { margin: 0 0 30px 0; font-size: 48px; line-height: 100%; color: rgba( 255, 255, 255, 0.8 ); font-weight: bold;  } #main-intro aside p { margin: 0 0 30px 0; font-size: 28px; line-height: 150%; color: rgba( 255, 255, 255, 0.8 );  } #main-intro aside .apps { min-height: 50px; margin: 0 0 20px 0;  } #main-intro aside .apps .google,#main-intro aside .apps .apple { display: block; float: left; height: 50px; margin: 0 20px 0 0;  } #main-intro aside .apps .apple {  } #main-intro aside .apps::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-intro aside .read { display: inline-block; margin: 0 20px 20px 0; padding: 0 15px 0 15px; color: var( --primary-color ); background-color: var( --secondary-color ); line-height: 50px; border-radius: 10px; font-weight: bold; text-transform: uppercase; cursor: pointer;  } #main-intro aside .read:hover { color: var( --primary-color-darker ); background-color: var( --secondary-color-lighter );  } #main-intro aside .shop { display: inline-block; margin: 0 20px 0 0; padding: 0 15px 0 15px; color: var( --secondary-color ); line-height: 46px; border-radius: 10px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: 2px solid var( --secondary-color );  } #main-intro aside .shop:hover { color: var( --primary-color ); background-color: var( --secondary-color );  } #main-intro aside .register { display: inline-block; padding: 0 15px 0 15px; color: var( --secondary-color ); line-height: 46px; border-radius: 10px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: 2px solid var( --secondary-color );  } #main-intro aside .register:hover { color: var( --primary-color ); background-color: var( --secondary-color );  } #main-join { position: relative; display: block; padding: 50px 0 50px 0; margin: 0 auto 50px auto; background-color: #ffffff; overflow: hidden; background: url( "../images/web/main/join-background-1.jpg" ) no-repeat center center / cover;  } #main-join::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: linear-gradient( 90deg, rgba( 0, 0, 0, 0.5 ) 0%, rgba( 0, 0, 0, 0 ) 100% ); content: "";  } #main-join::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-join > div { position: relative; max-width: 1440px; height: 500px; margin: 0 auto 0 auto;  } #main-join > div::before {  } #main-join header { position: absolute; z-index: 1; top: 50%; left: 20px; width: 40%; transform: translate( 0, -50% );  } #main-join header h2 { margin: 0 0 20px 0; color: var( --secondary-color ); font-size: 58px; line-height: 58px;  } #main-join header p { margin: 0 0 20px 0; color: #ffffff; font-size: 22px; line-height: 32px;  } #main-join header span { display: inline-block; clear: both; padding: 0 25px 0 25px; color: var( --primary-color ); background-color: var( --secondary-color ); line-height: 50px; border-radius: 5px; font-weight: bold; text-transform: uppercase; cursor: pointer;  } #main-join header span:hover { color: var( --primary-color-darker ); background-color: var( --secondary-color-lighter );  } #main-join video { position: absolute; top: 50%; left: 50%; width: calc( 50% - 20px ); border-radius: 5px; transform: translate( 0, -50% );  } #main-news { position: relative; display: block; padding: 20px 0 0 0; margin: 0 auto 50px auto; background-color: #ffffff; overflow: hidden;  } #main-news::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-news h2 { position: relative; max-width: 1440px; margin: 0 auto 50px auto; padding: 0 0 0 20px; color: var( --primary-color ); font-weight: bold;  } #main-news h2 span { display: block; font-size: 32px; line-height: 100%;  } #main-news h2 i { position: absolute; top: 50%; right: 20px; display: block; padding: 0 20px 0 0; font-size: 16px; line-height: 16px; color: var( --primary-color ); transform: translate( 0, -50% ); cursor: pointer; font-style: normal;  } #main-news h2 i:hover { color: var( --secondary-color );  } #main-news h2 i::after { position: absolute; top: 0; right: 0; width: 16px; height: 16px; border-width: 0 2px 2px 0; border-style: solid; border-color: var( --primary-color ); content: ""; transform: rotate( -45deg );  } #main-news h2 i:hover::after { border-color: var( --secondary-color );  } #main-news > div { position: relative; max-width: 1440px; margin: 0 auto 0 auto; aspect-ratio: 4 / 1;  } #main-news > div > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;  } #main-news > div > div::before,#main-news > div > div::after {  } #main-news > div ul { position: absolute; top: 0; left: -100%; width: 400%; height: 100%; list-style: none;  } #main-news > div .slide-back { left: -80%; transition: all 0.2s ease-in-out;  } #main-news > div .slide-next { left: -120%; transition: all 0.2s ease-in-out;  } #main-news > div .slide { transition: all 0.2s ease-in-out;  } #main-news > div .slide-back img,#main-news > div .slide-next img {  } #main-news > div ul li { position: relative; display: block; float: left; width: 5%; height: 100%; overflow: hidden;  } #main-news > div ul li figure { position: absolute; top: 5px; left: 20px; width: calc( 100% - 40px ); height: calc( 100% - 10px ); overflow: hidden; border-radius: 5px; box-shadow: 0 0 5px rgba( 0, 0, 0, 0.3 ); cursor: pointer;  } #main-news > div ul li figure::before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: linear-gradient( 180deg, rgba( 46, 71, 86, 0.8 ) 0%, rgba( 0, 0, 0, 0 ) 100% );  } #main-news > div ul li figure img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; transition: all 0.2s ease-in-out; object-fit: cover; object-position: center center;  } #main-news > div ul li figure:hover img { filter: brightness( 120% );  } #main-news > div ul li h3 { position: absolute; z-index: 1; top: 36px; width: calc( 100% - 60px ); left: 40px; color: var( --secondary-color ); font-weight: bold; line-height: 26px; font-size: 20px;  } #main-news > div ul li h4 { position: absolute; z-index: 1; top: 20px; left: 40px; color: #ffffff; font-weight: bold; line-height: 100%; font-size: 12px; text-transform: uppercase; opacity: 0.8;  } #main-news .back,#main-news .next { position: absolute; z-index: 1; top: 50%; display: block; width: 50px; height: 50px; margin: -25px 0 0 0; border-radius: 50%; background-color: #ffffff; box-shadow: 0 0 5px 0 rgba( 127, 127, 127, 0.3 ); cursor: pointer;  } #main-news .back { left: -5px;  } #main-news .next { right: -5px;  } #main-news .back:before,#main-news .next:before { position: absolute; display: block; top: 18px; left: 20px; width: 14px; height: 14px; border-width: 0 2px 2px 0; border-color: #666666; border-style: solid; content: "";  } #main-news .back:before { transform: rotate( 135deg );  } #main-news .next:before { left: 14px; transform: rotate( -45deg );  } #main-news .back:after,#main-news .next:after { position: absolute; display: block; top: 50%; left: 50%; width: 70px; height: 70px; border: 5px solid #ffffff; content: ""; transform: translate( -50%, -50% ); border-radius: 50%; opacity: 0.2;  } #main-subscribe { position: relative; display: block; margin: 0 auto 0 auto; padding: 50px 0 50px 0; overflow: hidden; max-width: 1400px;  } #main-subscribe::before,#main-subscribe::after {  } #main-subscribe::before { top: 0;  } #main-subscribe::after { bottom: 0;  } #main-subscribe h2 { display: block; float: left; width: 40%; margin: 0 0 50px 0; padding: 30px 50px 0 0; line-height: 40px; font-weight: normal; font-size: 30px; color: var( --secondary-color-darker );  } #main-subscribe aside { float: left; width: 60%; padding: 40px; background-color: var(--primary-color ); border-radius: 5px; overflow: hidden;  } #main-subscribe aside > div { position: relative; display: block; height: 50px; margin: 0 0 20px 0; padding: 0 120px 0 0; border-radius: 5px; overflow: hidden; background-color: #ffffff;  } #main-subscribe aside div > input { display: block; float: left; width: 50%; height: 50px; padding: 0 20px 0 20px; border-right: 1px solid var( --primary-color ); background-color: transparent;  } #main-subscribe aside div > span { position: absolute; top: 0; right: 0; width: 120px; line-height: 50px; cursor: pointer; text-align: center; background-color: var( --secondary-color ); color: var( --primary-color ); text-transform: uppercase; font-weight: bold; font-size: 12px;  } #main-subscribe aside div > span:hover { background-color: var( --secondary-color-lighter );  } #main-subscribe aside > span { float: left; margin: 0 10px 0 0 ;  } #main-subscribe aside > .cb,#main-subscribe aside > .cbs { border-color: rgba( 255, 255, 255, 0.8 );  } #main-subscribe aside > .cbs { background-color: var( --secondary-color );  } #main-subscribe aside > p { float: left; max-width: calc( 100% - 50px ); line-height: 20px; color: rgba( 255, 255, 255, 0.8 );  } #main-subscribe aside > p a { color: var( --secondary-color );  } #main-tags { position: relative; display: block; padding: 50px 0 50px 0; margin: 0 auto 50px auto; background-color: #ffffff; overflow: hidden;  } #main-tags:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #main-tags h2 { max-width: 1440px; margin: 0 auto 50px auto; padding: 0 0 0 20px; color: var( --primary-color-darker ); line-height: 100%; font-size: 33px; font-weight: bold;  } #main-tags > div { position: relative; max-width: 1440px; margin: 0 auto 0 auto; aspect-ratio: 4 / 1;  } #main-tags > div > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;  } #main-tags > div > div:before,#main-tags > div > div:after {  } #main-tags > div ul { position: absolute; top: 0; left: -100%; width: 400%; height: 100%; list-style: none;  } #main-tags > div .slide-back { left: -80%; transition: all 0.2s ease-in-out;  } #main-tags > div .slide-next { left: -120%; transition: all 0.2s ease-in-out;  } #main-tags > div .slide { transition: all 0.2s ease-in-out;  } #main-tags > div .slide-back img,#main-tags > div .slide-next img {  } #main-tags > div ul li { position: relative; display: block; float: left; width: 5%; height: 100%; overflow: hidden;  } #main-tags > div ul li figure { position: absolute; top: 0; left: 20px; width: calc( 100% - 40px ); height: 100%; overflow: hidden; border-radius: 5px;  } #main-tags > div ul li figure img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; transition: all 0.2s ease-in-out; object-fit: cover; object-position: center center;  } #main-tags > div ul li figure:hover img { filter: brightness( 120% );  } #main-tags > div ul li h3 { position: absolute; top: 20px; left: 40px; color: #ffffff; font-weight: bold; line-height: 100%; font-size: 20px;  } #main-tags > div ul li h4 { position: absolute; top: 45px; left: 40px; color: #ffffff; line-height: 100%; font-size: 14px;  } #main-tags .back,#main-tags .next { position: absolute; top: 50%; display: block; width: 50px; height: 50px; margin: -25px 0 0 0; border-radius: 50%; background-color: #ffffff; box-shadow: 0 0 5px 0 rgba( 127, 127, 127, 0.3 ); cursor: pointer;  } #main-tags .back { left: -5px;  } #main-tags .next { right: -5px;  } #main-tags .back:before,#main-tags .next:before { position: absolute; display: block; top: 18px; left: 20px; width: 14px; height: 14px; border-width: 0 2px 2px 0; border-color: #666666; border-style: solid; content: "";  } #main-tags .back:before { transform: rotate( 135deg );  } #main-tags .next:before { left: 14px; transform: rotate( -45deg );  } #main-tags .back:after,#main-tags .next:after { position: absolute; display: block; top: 50%; left: 50%; width: 70px; height: 70px; border: 5px solid #ffffff; content: ""; transform: translate( -50%, -50% ); border-radius: 50%; opacity: 0.2;  } .custom-js-player { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 20px; padding: 30px; width: 100%; max-width: 400px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);  } .custom-js-player .progress-container { margin-bottom: 15px;  } .custom-js-player .progress-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 3px; cursor: pointer; position: relative; overflow: hidden;  } .custom-js-player .progress-fill { height: 100%; background: linear-gradient(90deg, var(--secondary-color), var(--secondary-color-darker)); border-radius: 3px; width: 0%; transition: width 0.1s ease; position: relative;  } .custom-js-player .progress-fill::after { content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: white; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.2s ease;  } .custom-js-player .progress-container:hover .progress-fill::after { opacity: 1;  } .custom-js-player .time-display { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.7); font-size: 14px; margin-bottom: 25px;  } .custom-js-player .controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 25px;  } .custom-js-player .play-button { width: 60px; height: 60px; background: linear-gradient(145deg, var(--secondary-color), var(--secondary-color-darker)); border: none; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);  } .custom-js-player .play-button:hover { transform: scale(1.05); box-shadow: 0 12px 25px rgba(255, 107, 107, 0.4);  } .custom-js-player .play-button:active { transform: scale(0.95);  } .custom-js-player .play-icon,.custom-js-player .pause-icon { width: 20px; height: 20px; fill: white;  } .custom-js-player .volume-container { display: flex; align-items: center; gap: 15px;  } .custom-js-player .volume-icon { width: 20px; height: 20px; fill: rgba(255, 255, 255, 0.8); flex-shrink: 0;  } .custom-js-player .volume-slider { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; cursor: pointer; position: relative;  } .custom-js-player .volume-fill { height: 100%; background: linear-gradient(90deg, var(--secondary-color), var(--secondary-color-darker)); border-radius: 2px; width: 100%; transition: width 0.1s ease; position: relative;  } .custom-js-player .volume-fill::after { content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.2s ease;  } .custom-js-player .volume-container:hover .volume-fill::after { opacity: 1;  } .custom-js-player .hidden { display: none;  } #read-final { top: 61px; left: 50%;  } #read-final.none { display: none;  } #read-final.full { position: relative; top: 0; left: auto; width: 100%; max-width: 800px; margin: 0 auto 0 auto; padding: 20px 20px 10px 20px;  } #read-final h3 { width: 100%; float: none; clear: both; line-height: 25px; font-size: 12px; padding: 0 0 0 0; margin: 0 0 0 0; color: #222222; font-weight: normal; text-transform: uppercase; font-family: linguisticspro;  } #read-final.font-2 h3 { font-size: 18px; line-height: 33px; font-family: linguisticspro;  } #read-final.font-3 h3 { font-size: 24px; line-height: 30px; font-family: linguisticspro;  } #read-final h3:first-of-type { padding: 0 0 0 0;  } #read-final.notitle h3 { display: none;  } #read-final.notitle h6 { display: none;  } #read-final.notitle .start::before { display: none;  } #read-final .paragraph { display: block; width: 100%; padding: 0 0 0 80px;  } #read-final .paragraph::after {  } #read-final .paragraph-more { padding: 0 0 0 120px;  } #read-final .newline { display: block; float: none; width: 100%; clear: both;  } #read-final .newline::after { clear: both; content: "";  } #read-final .cell { position: relative; display: inline-block; height: 24px; margin: 0 0 0 0; padding: 0 2px 0 2px; cursor: pointer; line-height: 22px; font-size: 14px;  } #read-final .break { margin: 0 0 0 30px; clear: right;  } #read-final .bold { font-weight: bold;  } #read-final [class='cell'] { -webkit-user-select: none; -webkit-touch-callout: none; user-select: none;  } #read-final.font-2 .cell { height: 36px; font-size: 21px; line-height: 33px;  } #read-final.font-3 .cell { height: 48px; font-size: 28px; line-height: 44px;  } #read-final .sef { padding: 0 7px 0 2px;  } #read-final .sef::before { position: absolute; top: 0; right: 0; display: block; content: "†"; font-size: 14px; line-height: 14px; color: #1495e3; font-weight: bold;  } #read-final.font-2 .sef::before { font-size:      17px; line-height: 17px;  } #read-final.font-3 .sef::before { font-size:      22px; line-height: 22px;  } #read-final.nosef .sef,#read-final.font-2.nosef .sef,#read-final.font-3.nosef .sef { padding: 0 2px 0 2px;  } #read-final.nosef .sef::before,#read-final.font-2.nosef .sef::before,#read-final.font-3.nosef .sef::before { display: none; content: ""; opacity: 0;  } #read-final .cell i { font-weight: 100;  } #read-final h6 { display: block; float: left; margin: 0 5px 0 0; padding: 5px 0 0 0; font-size: 60px; line-height: 47px; color: var( --secondary-color ); font-weight: normal;  } #read-final.font-2 h6 { font-size: 90px; line-height: 70px;  } #read-final.font-3 h6 { font-size: 120px; line-height: 94px;  } #read-final .start {  } #read-final .start::before { display: block; float: left; margin: 0 2px 0 2px; font-size: 8px; color: var( --secondary-color ); content: attr( data-label ); line-height: 10px; font-weight: bold;  } #read-final.font-2 .start::before { font-size: 12px; line-height: 15px;  } #read-final.font-3 .start::before { font-size: 16px; line-height: 20px;  } #read-final .cell:hover { background-color: #f0f0f5;  } #read-final .note::after { position: absolute; bottom: 2px; left: 0; display: block; width: 100%; height: 1px; background-color: var( --secondary-color ); content: ""; position: absolute; bottom: 2px; left: 0; display: block; width: 100%; height: 2px; background-color: #1495e3; content: "";  } #read-final.nopublicnotes .note::after { display: none;  } #read-final .case::after { position: absolute; bottom: 2px; left: 0; display: block; width: 100%; height: 2px; background-color: #ff0000; content: "";  } #read-final .note-case::after { position: absolute; bottom: 2px; left: 0; display: block; width: 100%; height: 2px; background: linear-gradient( to right, #ff0000 50%, #1495e3 50% ); content: "";  } #read-final .tab { margin: 0 0 0 30px;  } #read-final .sel,#read-final .sel:hover { color: #ffffff; background-color: var( --primary-color );  } #read-final .verse { display: block; margin: 0 0 30px 0;  } #read-final .verse::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-final .verse .title { position: relative; display: block; height: 40px; padding: 0 0 0 35px; margin: 0 0 20px 0; border: 1px solid #f0f0f0; border-radius: 5px;  } #read-final .verse .title h5 { position: absolute; top: 0; left: 10px; display: block; line-height: 38px; color: var( --secondary-color );  } #read-final .verse .title input { display: block; width: calc( 100% - 60px ); padding: 0 10px 0 0; line-height: 38px;  } #read-final .verse .title h4 { position: absolute; top: 0; right: 10px; display: none; line-height: 38px; color: var( --secondary-color ); cursor: pointer;  } #read-final.edit .verse .title h4 { display: block;  } #read-final.edit .verse .title .unmatch { right: 60px;  } #read-final .verse .words { display: inline-block; width: 100%; min-height: 30px; line-height: 28px; white-space: pre-wrap;  } #read-final .verse .words::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-final .verse .words .word { display: inline-block; min-width: 5px; margin: 0 0 10px 0; padding: 0 0 0 0; border: 1px solid transparent; border-radius: 14px; height: 30px; line-height: 28px;  } #read-final .verse .words .nolink { font-style: italic;  } #read-final.edit .verse .words .nolink { border-color: var( --secondary-color-darker );  } #read header { position: relative; height: 61px; padding: 10px 70px 0 20px; border-bottom: 1px solid #f5f5f5;  } #read header h2 { float: left; margin: 0 20px 0 0;  } #read header h2 span { display: block; margin: 0 0 4px 0; font-size: 16px; line-height: 20px; color: var( --primary-color ); font-family: orthos;  } #read header h2 .rtl { font-family: "Times New Roman", Times, serif;  } #read header h2 i { display: block; font-size: 14px; line-height: 100%; color: var( --secondary-color ); font-style: normal;  } #read header .audio { position: relative; z-index: 5; display: block; float: left; width: 40px; height: 40px; margin: 0 5px 0 0;  } #read header .audio span { position: absolute; top: 0; left: 0; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; cursor: pointer;  } #read header .audio span:hover { background-color: #f5f5f5;;  } #read header .audio span::after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url( "../images/web/web.png?1" ) no-repeat -2400px -400px; content: ""; transform: translate( -50%, -50% ) scale( 0.4 ); opacity: 0.8;  } #read header .audio span:hover::after { opacity: 1;  } #read header .audio div#audio-id { position: absolute; top: 45px; left: -100px; display: none; width: 240px; margin: 0 0 0 0; padding: 10px; background-color: rgba(46, 71, 86, 1); border-radius: 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);  } #read header .audio div#audio-id::before { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin: 0 0 0 -5px; background-color: var(--secondary-color); content: ""; transform: rotate( 45deg );  } #read header .audio ol { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #e0e0e0;  } #read header .audio ol li { display: block; height: 30px; line-height: 30px; color: #ffffff; cursor: pointer;  } #read header .audio ol li:hover { color: var( --secondary-color );  } #read header audio { display: block; width: 100%; border-radius: 10px; filter: sepia( 20% ) saturate( 70% ) grayscale( 1 ) contrast( 99% ) invert( 12% );  } #read header .audio ol li.share-audio { color: var( --secondary-color );  } #read header .audio ol li.share-audio:hover { color: var( --secondary-color-darker );  } #read header .reload { position: absolute; top: 10px; right: 120px; display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #f8f8f8; cursor: pointer; box-shadow: 0 0 8px rgba( 0, 0, 0, 0.1 );  } #read header .reload:hover { background-color: var( --secondary-color );  } #read header .reload::after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat -1700px -500px; content: ""; transform: translate( -50%, -50% ) scale( 0.4 ); opacity: 0.8;  } #read header .reload:hover::after { opacity: 1;  } #read header .set { position: absolute; top: 10px; right: 120px; display: none; width: 40px; height: 40px; border-radius: 50%; background-color: #f8f8f8; cursor: pointer; box-shadow: 0 0 8px rgba( 0, 0, 0, 0.1 );  } #read header .set:hover { background-color: var( --secondary-color );  } #read header .set::after { position: absolute; top: 12px; left: 16px; display: block; width: 8px; height: 16px; border-style: solid; border-width: 0 2px 2px 0; border-color: var( --primary-color ); content: ""; transform: rotate( 35deg ); opacity: 0.8;  } #read header .set:hover::after { opacity: 1;  } #read header .comment { position: absolute; top: 10px; right: 70px; display: none; width: 40px; height: 40px; border-radius: 50%; background-color: #f8f8f8; cursor: pointer; box-shadow: 0 0 8px rgba( 0, 0, 0, 0.1 );  } #read header .comment:hover { background-color: var( --secondary-color );  } #read header .comment-std { right: 170px;  } #read header .comment::after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url( "../images/web/web.png?1" ) no-repeat -100px -500px; content: ""; transform: translate( -50%, -50% ) scale( 0.5 ); opacity: 0.8;  } #read header .link { position: absolute; top: 10px; right: 70px; display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #f8f8f8; cursor: pointer; box-shadow: 0 0 8px rgba( 0, 0, 0, 0.1 );  } #read header .link::after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat -1600px -500px; content: ""; transform: translate( -50%, -50% ) scale( 0.5 ); opacity: 0.8;  } #read header .link:hover::after { opacity: 1;  } #read header .edit { background-color: var( --secondary-color );  } #read header .menu { position: relative; display: block; float: left; height: 40px; margin: 0 20px 0 0; padding: 0 15px 0 45px; border: 2px solid var( --primary-color-lighter ); border-radius: 5px; overflow: hidden; background-color: #f8f8f8; cursor: pointer;  } #read header .menu::before { position: absolute; top: 50%; left: -30px; display: block; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat -1300px -200px; content: ""; transform: translate( 0, -50% ) scale( 0.44 ); background-position: -1300px -400px;  } #read header .menu:hover { color: var( --secondary-color ); border-color: var( --secondary-color );  } #read header .menu i { font-style: normal; line-height: 36px;  } #read header .menu i:last-child { position: absolute; display: none; top: 17px; left: 10px; width: 18px; height: 2px; background-color: var( --secondary-color );  } #read header .menu i:last-child::before,#read header .menu i:last-child::after { position: absolute; left: 0; width: 100%; height: 2px; content: ""; background-color: var( --secondary-color );  } #read header .menu i:last-child::before { bottom: 4px;  } #read header .menu i:last-child::after { top: 4px;  } #read header .chapters { float: left; height: 40px; margin: 0 10px 0 0;  } #read header .chapters span { position: relative; display: block; float: left; width: 30px; height: 40px; cursor: pointer;  } #read header .chapters span::before { position: absolute; top: 15px; width: 10px; height: 10px; content: ""; border-color: var( --primary-color ); border-style: solid; border-width: 0 2px 2px 0;  } #read header .chapters .back::before { transform: rotate( 135deg ); left: 10px;  } #read header .chapters .next::before { transform: rotate( -45deg ); right: 10px;  } #read header .chapters .disabled { opacity: 0.5; cursor: auto;  } #read header .text-version { float: left; height: 40px; margin: 0 10px 0 0;  } #read header .text-version i { position: relative; top: 10px; font-style: normal; background: var(--primary-color); color: var(--secondary-color); border-radius: 5px; padding: 10px;  } #read header .search { position: relative; display: block; float: right; width: 40px; height: 40px; cursor: pointer; overflow: hidden;  } #read header .search::after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat -1100px -500px; content: ""; transform: translate( -50%, -50% ) scale( 0.5 ); opacity: 0.8;  } #read header .pos-2 { right: 70px;  } #read header .pos-3 { right: 120px;  } #read header .pos-4 { right: 170px;  } #read header .pos-5 { right: 220px;  } #read header .mm { position: absolute; z-index: 1; top: 8px; right: 20px; display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #f8f8f8; box-shadow: 0 0 8px rgba( 0, 0, 0, 0.1 );  } #read header .mm::before,#read header .mm::after { position: absolute; z-index: 1; top: 18px; left: 18px; width: 4px; height: 4px; background-color: var( --primary-color ); border-radius: 50%; content: "";  } #read header .mm::before { margin: -8px 0 0 0;  } #read header .mm::after { margin: 8px 0 0 0;  } #read header .mm span { position: absolute; z-index: 2; top: 0; right: 0; display: block; width: 40px; height: 40px; cursor: pointer;  } #read header .mm span::after { position: absolute; z-index: 1; top: 18px; left: 18px; width: 4px; height: 4px; background-color: var( --primary-color ); border-radius: 50%; content: "";  } #read header .mm ul { position: absolute; top: 45px; right: 0; display: none; list-style: none; width: 200px; border-radius: 5px 5px 5px 5px; background-color: #f5f5f5; overflow: hidden; box-shadow: 2px 2px 5px 0 rgba( 0, 0, 0, 0.1 );  } #read header .mm ul li { position: relative; display: block; height: 31px; padding: 0 10px 0 10px; line-height: 30px; border-bottom: 1px solid #e5e5e5; color: #333333; cursor: pointer; font-weight: bold;  } #read header .mm ul li:last-child { border-bottom: 0;  } #read header .mm ul li:hover { background-color: #e5e5e5;  } #read header .mm ul li .minus,#read header .mm ul li .plus { position: relative; display: block; float: left; width: 50%; height: 30px; cursor: pointer; font-style: normal;  } #read header .mm ul li .plus { border-right: 1px solid #e5e5e5;  } #read header .mm ul li .minus:hover,#read header .mm ul li .plus:hover { background-color: #c5c5c5;  } #read header .mm ul li .plus::before,#read header .mm ul li .plus::after,#read header .mm ul li .minus::before { position: absolute; top: 14px; left: 50%; width: 10px; height: 2px; background-color: #676767; content: ""; transform: translate( -50%, 0 );  } #read header .mm ul li .plus::after { transform: translate( -50%, 0 ) rotate( 90deg );  } #read header .mm ul .options { padding: 0 10px 0 40px;  } #read header .mm ul .cb,#read header .mm ul .cbs { position: absolute; top: 5px; left: 10px;  } #read-info { position: fixed; z-index: 11; right: 20px; bottom: 20px; display: none; max-width: 400px; width: 100%; padding: 50px 10px 10px 10px; background: rgba( 46, 71, 86, 0.9 ); overflow: hidden; border-radius: 5px; box-shadow: 0 0 10px 0 rgba( 0, 0, 0, 0.8 );  } #read-info.letrari { left: 20px; right: auto;  } #read-info header { position: absolute; top: 0; left: 0; width: 100%; height: 40px; border-bottom: 1px solid rgba( 46, 71, 86, 0.8 );  } #read-info header .close { position: absolute; top: 0; right: 0; display: block; width: 40px; height: 40px; cursor: pointer;  } #read-info header .close::before,#read-info header .close::after { position: absolute; top: 19px; left: 10px; width: 20px; height: 2px; background-color: var( --secondary-color ); content: "";  } #read-info header .close::before { transform: rotate( 45deg );  } #read-info header .close::after { transform: rotate( -45deg );  } #read-info header ul { display: bock; list-style: none; height: 40px;  } #read-info header ul li { display: block; float: left; height: 40px; padding: 0 20px 0 20px; border-right: 1px solid rgba( 46, 71, 86, 0.8 ); cursor: pointer; line-height: 40px; color: rgba( 251, 157, 97, 0.4 ); font-weight: bold;  } #read-info header ul .sel { color: rgba( 251, 157, 97, 1 );  } #read-info header ul .search { color: rgba( 251, 251, 251, 1 );  } #read-info .morph { overflow: auto; display: none;  } #read-info .morph h2 { margin: 0 20px 10px 10px; line-height: 14px;  } #read-info .morph h2::after { display: block; height: 0; clear: both; content: "";  } #read-info .morph h2 span { display: block; float: left; margin: 0 10px 0 0; color: #ffffff; font-weight: normal; font-size: 14px;  } #read-info .morph h2 em { display: block; float: left; color: #ffffff; text-transform: none; font-style: normal; font-size: 12px; font-weight: bold;  } #read-info .morph ul { display: block; width: 100%; clear: both; list-style: none; border-top: 1px solid rgba( 46, 71, 86, 0.8 ); border-left: 1px solid rgba( 46, 71, 86, 0.8 ); border-radius: 5px;  } #read-info .morph ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-info .morph ul li { display: block; float: left; width: 33.33%; height: 45px; padding: 5px 10px 5px 10px; border-right: 1px solid rgba( 46, 71, 86, 0.8 ); border-bottom: 1px solid rgba( 46, 71, 86, 0.8 );  } #read-info .morph ul label { display: block; margin: 0 0 5px 0; color: rgba( 255, 255, 255, 0.5 ); line-height: 10px; font-size: 10px;  } #read-info .morph ul span { display: block; color: rgba( 255, 255, 255, 1 ); line-height: 20px; font-weight: bold; text-transform: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  } #read-info .label { display: block; width: 100%; padding: 0 0 0 10px; line-height: 20px; color: rgba( 255, 255, 255, 0.5 );  } #read-info .glossary { overflow: auto; display: none;  } #read-info .glossary h2 { margin: 0 20px 10px 10px; line-height: 14px;  } #read-info .glossary h2::after { display: block; height: 0; clear: both; content: "";  } #read-info .glossary h2 span { display: block; float: left; margin: 0 10px 0 0; color: #ffffff; font-weight: normal; font-size: 14px;  } #read-info .glossary h2 em { display: block; float: left; color: #ffffff; text-transform: none; font-style: normal; font-size: 12px; font-weight: bold;  } #read-info .glossary pre { display: block; max-height: 150px; color: #ffffff; line-height: 150%; padding: 10px; border: 1px solid rgba( 46, 71, 86, 0.8 ); border-radius: 5px; white-space:  normal;  } #read-info .notes { display: none; overflow: auto; max-height: 300px; font-size: 14px; color: rgba( 255, 255, 255, 0.8 ); line-height: 20px; font-family: roboto;  } #read-info .notes .note-row { overflow: auto; margin: 0 10px 10px 10px; padding: 10px 10px 10px 10px; border-bottom: 1px solid rgba( 255, 255, 255, 0.2 ); background-color: #f0f0f0; border-radius: 5px;  } #read-info .notes .note-row:first-of-type { margin: 10px 10px 10px 10px;  } #read-info .notes .note-row:last-of-type { border-bottom: 0;  } #read-info .notes .reply { margin: 0 10px 10px 30px;  } #read-info .notes p { font-size: 14px; color: rgba( 255, 255, 255, 0.8 ); line-height: 20px; padding: 0 10px 0 10px;  } #read-info .notes .note-row p { color: #272831; padding: 0 0 0 0;  } #read-info .notes .note-row > span:first-child { display: block; height: 20px; margin: 0 0 5px 0; line-height: 20px; font-size: 14px; color: rgba( 255, 255, 255, 0.8 ); line-height: 20px; padding: 0 0 0 0;  } #read-info .notes .note-row > span:first-child strong { float: left; color: var( --primary-color );  } #read-info .notes .note-row > span:first-child time { float: right; font-size: 12px; color: var( --primary-color-lighter );  } #read-info .show { display: block;  } #read-list { position: relative; display: block; padding: 84px 20px 20px 20px; margin: 0 auto 50px auto; background-color: #ffffff;  } #read-list::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-list > div { max-width: 1440px; margin: 0 auto 0 auto; padding: 0 20px 0 20px;  } #read-list > div::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-list article { position: relative; min-height: 100px; margin: 0 0 30px 0; padding: 10px 0 0 120px;  } #read-list article::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-list article figure { position: absolute; top: 0; left: 0; width: 100px; height: 100px; overflow: hidden;  } #read-list article figure img { display: block; width: 100%;  } #read-list article h2 { font-size: 18px; font-family: minionpro;  } #read-list article p { margin: 0 0 10px 0; font-size: 16px; font-family: minionpro;  } #read-list article ul { display: block; list-style: none; font-family: minionpro;  } #read-list article ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-list article li { display: block; float: left; width: 30px; margin: 0 10px 10px 0; line-height: 30px; text-align: center; color: #ffffff; background-color: var( --primary-color ); cursor: pointer; border-radius: 5px;  } #read-list article li:hover { background-color: var( --secondary-color );  } #read-original { top: 61px; left: 0; border-right: 1px solid #f5f5f5;  } #read-original.none { display: none;  } #read-original.full { position: relative; position: relative; top: 0; left: auto; width: 100%; max-width: 1000px; margin: 0 auto 0 auto; padding: 20px 20px 10px 20px; border-right: 0;  } #read-original .newline { display: block; float: left; width: 100%; height: 1px; clear: both;  } #read-original .cell { position: relative; height: 34px; float: left; margin: 0 0 0 0; padding: 0 2px 0 2px; cursor: pointer; text-align: center; border-radius: 5px; -webkit-user-select: none; -webkit-touch-callout: none; user-select: none;  } #read-original.font-2 .cell { height: 51px;  } #read-original.font-3 .cell { height: 68px;  } #read-original .sef { padding: 0 7px 0 2px;  } #read-original .sef::after { position: absolute; top: 0; right: 0; display: block; content: "†"; font-size: 12px; line-height: 12px; color: #1495e3; font-weight: bold;  } #read-original.nosef .sef,#read-original.font-2.nosef .sef,#read-original.font-3.nosef .sef { padding: 0 2px 0 2px;  } #read-original.nosef .sef::after,#read-original.font-2.nosef .sef::after,#read-original.font-3.nosef .sef::after { display: none; content: ""; opacity: 0;  } #read-original input { position: absolute; display: block; width: 100%; font-style: normal; text-align: center; line-height: 16px; color: #696969; font-size: 10px; vertical-align: middle; background-color: transparent;  } #read-original.rtl .cell { float: right; height: 34px; margin: 0 0 0 0;  } #read-original.rtl.font-2 .cell { height: 51px;  } #read-original.rtl.font-3 .cell { height: 68px;  } #read-original .note i {  } #read-original .note i::after { position: absolute; bottom: 1px; left: 0; display: block; width: 100%; height: 2px; background-color: #1495e3; content: "";  } #read-original.nopublicnotes .note i::after { display: none;  } #read-original .case i {  } #read-original .case i::after { position: absolute; bottom: 1px; left: 0; display: block; width: 100%; height: 2px; background-color: #ff0000; content: "";  } #read-original .note-case i {  } #read-original .note-case i::after { position: absolute; bottom: 1px; left: 0; display: block; width: 100%; height: 2px; background: linear-gradient( to right, #ff0000 50%, #1495e3 50% ); content: "";  } #read-original .start::before { display: block; float: left; height: 36px; margin: 0 2px 0 2px; text-align: left; font-size: 10px; color: var( --secondary-color ); content: attr( data-label ); line-height: 18px; font-weight: bold;  } #read-original.font-2 .start::before { height: 48px; font-size: 20px; line-height: 27px;  } #read-original.font-3 .start::before { height: 68px; font-size: 30px; line-height: 36px;  } #read-original.notitle .start::before { display: none;  } #read-original.rtl .start::before { float: right; margin: 0 2px 0 2px; line-height: 20px;  } #read-original.rtl.font-2 .start::before { line-height: 30px;  } #read-original.rtl.font-3 .start::before { line-height: 40px;  } #read-original .cell:hover { background-color: #f0f0f5;  } #read-original .cell span { position: relative; float: left; height: 36px;  } #read-original .cell em { position: absolute; z-index: 1; top: 0px; right: 0px; display: none; width: 16px; height: 16px; background-color: #aa2323; border-radius: 50%; font-style: nornal;  } #read-original.edit .sel em { display: block;  } #read-original .cell em::before,#read-original .cell em::after { position: absolute; top: 7px; left: 4px; display: block; width: 8px; height: 2px; content: ""; background-color: #ffffff;  } #read-original .cell em::before { transform: rotate( 45deg );  } #read-original .cell em::after { transform: rotate( -45deg );  } #read-original .with-map { padding: 0 20px 0 2px;  } #read-original .cell b { position: absolute; display: block; width: 20px; height: 20px; bottom: 0; right: 0;  } #read-original .cell b::after { position: absolute; top: 50%; left: 50%; display: block; width: 100px; height: 100px; overflow: hidden; content: ""; background: url( "../images/web/web.png?4" ) no-repeat -2500px -400px; transform: translate( -50%, -50% ) scale( 0.30 );  } #read-original.font-2 .cell b::after { transform: translate( -50%, -50% ) scale( 0.45 );  } #read-original.font-3 .cell b::after { transform: translate( -50%, -50% ) scale( 0.65 );  } #read-original.rtl .cell span { float: right; height: 36px;  } #read-original.rtl.font-2 .cell span { height: 48px;  } #read-original.rtl.font-3 .cell span { height: 68px;  } #read-original .cell strong { display: block; font-weight: 400; text-align: center; font-size: 14px; line-height: 16px; color: #333333; font-family: orthos; margin: 0 auto 2px auto;  } #read-original.font-2 .cell strong { font-size: 24px; line-height: 24px;  } #read-original.font-3 .cell strong { font-size: 30px; line-height: 36px;  } #read-original.rtl .cell strong { font-size: 16px; color: #606060; font-family: ezrasil2, "Times New Roman", Times, serif; font-weight: normal;  } #read-original.rtl.font-2 .cell strong { font-size: 24px;  } #read-original.rtl.font-3 .cell strong { font-size: 32px;  } #read-original .cell i { position: relative; display: inline-block; min-width: 20px; height: 16px; margin: 0 auto 0 auto; font-style: normal; text-align: center; line-height: 16px; color: #696969; font-size: 14px; vertical-align: middle; overflow: hidden;  } #read-original.font-2 .cell i { height: 24px; font-size: 18px; line-height: 24px;  } #read-original.font-3 .cell i { height: 32px; font-size: 24px; line-height: 32px;  } #read-original .cell .suggestions { position: absolute; z-index: 2; top: 100%; left: 0; display: none; min-width: 100px; max-height: 200px; overflow: auto; list-style: none; background-color: #f5f5f5; box-shadow: 2px 2px 5px 0 rgba( 0, 0, 0, 0.1 ); text-align: left;  } #read-original .cell > .show { display: block;  } #read-original .cell .suggestions li { position: relative; display: block; min-height: 21px; border-bottom: 1px solid #e5e5e5;  } #read-original .cell .suggestions li p { margin: 0 10px 0 30px; line-height: 20px; color: #333333; white-space: nowrap;  } #read-original .cell .suggestions li .similar { color: var( --secondary-color ); font-weight: bold;  } #read-original .cell .suggestions li > span { position: absolute; z-index: 2; top: 0; left: 0; width: 20px; height: 20px;  } #read-original .cell .suggestions li > span:hover { background-color: #f0f0f0;  } #read-original .cell .suggestions li > span::before,#read-original .cell .suggestions li > span::after { position: absolute; top: 9px; left: 5px; display: block; width: 10px; height: 2px; background-color: var( --primary-color ); content: ""; transition: all 0.25s ease-in-out;  } #read-original .cell .suggestions li > span::after { transform: rotate( 90deg ); position: absolute; top: 9px; left: 5px; display: block; width: 10px; height: 2px; background-color: var( --primary-color ); content: "";  } #read-original .cell .suggestions .show > span::after { transform: rotate( 0 );  } #read-original .cell .suggestions li > div { display: none; background-color: #ffffff;  } #read-original .cell .suggestions .show > div { display: block;  } #read-original .cell .suggestions li > div span { display: block; float: none; height: 20px; padding: 0 10px 0 30px; font-size: 12px; line-height: 20px; white-space: nowrap; color: #333333;  } #read-original .cell .suggestions li > div span:hover { background-color: var( --primary-color ); color: #ffffff;  } #read-original.rtl .cell i {  } #read-original .sel,#read-original .sel:hover { color: #ffffff; background-color: var( --primary-color );  } #read-original.edit .nolink { box-shadow: 0 0 0 2px var( --secondary-color-darker );  } #read-original .sel input { color: #ffffff;  } #read-original .sel strong { color: #ffffff;  } #read-original .sel i { color: #e5e5e5;  } #read-original.rtl .sel strong { color: #ffffff;  } #read-original div[data-morphdifference="1"] span strong { color: red !important;  } #read-verse { position: fixed; z-index: 12; top: 50%; left: 50%; display: none; width: 100%; max-width: 480px; background: rgba(46, 71, 86, 0.9); transform: translate(-50%, -50%); border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);  } #read-verse header { position: relative; height: 51px; margin: 0 0 15px 0; border-bottom: 1px solid #e0e0e0;  } #read-verse header h3 { padding: 0 0 0 20px; line-height: 50px; overflow: hidden; color: var(--secondary-color); font-weight: bold; font-size: 16px;  } #read-verse header span { position: absolute; top: 0; right: 0; display: block; width: 50px; height: 50px; cursor: pointer;  } #read-verse header span:before,#read-verse header span:after { position: absolute; top: 24px; left: 15px; width: 20px; height: 2px; background-color: var(--secondary-color); content: "";  } #read-verse header span:before { transform: rotate(45deg);  } #read-verse header span:after { transform: rotate(-45deg);  } #read-verse ul { display: block; margin: 0 20px 0 20px; list-style: none;  } #read-verse ul:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-verse ul li { display: block; float: left; margin: 0 10px 10px 0;  } #read-verse ul li > div {  } #read-verse ul li span,#read-verse ul li strong { display: block; height: 20px; text-align: center; line-height: 20px; color: #ffffff; cursor: pointer;  } #read-verse ul li strong { font-weight: bold; font-weight: bold;  } #read-verse ul li strong:nth-child(2) { opacity: 0.5; opacity: 0.5;  } #read-verse ul li span:nth-child(2) { opacity: 0.5; opacity: 0.5;  } #read-verse footer { heigth: 51px; padding: 0 20px 0 10px; border-top: 1px solid #e0e0e0;  } #read-verse footer .go { display: block; float: right; line-height: 50px; color: var(--secondary-color); font-weight: bold; cursor: pointer;  } #read-verse footer .go:hover { color: var(--secondary-color);  } #read-verse footer .back,#read-verse footer .next { position: relative; display: block; float: left; width: 50px; height: 50px; overflow: hidden; cursor: pointer;;  } #read-verse footer .back:before,#read-verse footer .next:before { position: absolute; top: 15px; left: 15px; width: 20px; height: 20px; border-width: 0 2px 2px 0; border-color: var(--secondary-color); border-style: solid; content: "";  } #read-verse footer .back:before { transform: rotate(135deg);  } #read-verse footer .next:before { transform: rotate(-45deg);  } #read-verse footer .disabled { opacity: 0.3; cursor: auto;  } .flash-verse-elements { background-color: #fffdb8;  } .flash-verse-standard-elements { color: var(--secondary-color) !important;  } .flash-read-verse-chosen-elements { color: var(--secondary-color) !important;  } #read-verse ol { display: block; margin: 10px 20px 0 20px; list-style: none;  } #read-verse ol:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-verse ol li { display: block; float: left; margin: 0 10px 10px 0;  } #read-verse ol li span,#read-verse ol li strong { display: block; height: 20px; text-align: center; line-height: 20px; color: #ffffff; cursor: pointer;  } #read { position: fixed; z-index: 10; top: 0; left: 0; display: none; width: 100%; height: 100%; padding: 0 0 0 0; background-color: #ffffff; overflow: hidden; transition: all 0.25s ease-in-out;  } #read::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read .no-result { position: absolute; top: 50%; left: 50%; display: block; max-width: 300px; transform: translate( -50%, -50% );  } #read .actions { position: absolute; z-index: 10; top: 100px; left: 100px; display: none; padding: 0 5px 0 5px; background: #ffffff; box-shadow: 0 0 5px 0 rgba( 60, 60, 60, 0.4 ); background: rgba( 46, 71, 86, 0.9 ); border-radius: 5px;  } #read .actions ul { position: relative; z-index: 10; display: block; width: 150px; list-style: none; overflow: hidden;  } #read .actions ul li { position: relative; display: block; width: 50px; height: 50px; float: left; padding: 0 10px 0 10px; cursor: pointer;  } #read .actions ul li:hover {  } #read .actions ul li::after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -5px 0 0 0; background: url( "../images/web/web.png?1" ) no-repeat; transform: translate( -50%, -50% ) scale( 0.4 ); content: "";  } #read .actions ul .task::after { background-position: -2100px -200px;  } #read .actions ul .highlight { opacity: 0.3;  } #read .actions ul .highlight::after { background-position: -1800px -200px;  } #read .actions ul .books::after { background-position: -1300px -200px; transform: translate( -50%, -50% ) scale( 0.5 );  } #read .actions ul .comment::after { background-position: -2200px -200px;  } #read .actions ul .copy::after { background-position: -2200px -200px;  } #read .actions ul .copy:active::after { background-position: -2200px -400px;  } #read .actions ul .shf::after { background-position: -1900px -200px; transform: translate( -50%, -50% ) scale( 0.6 );  } #read .actions ul .search::after { background-position: -1100px -200px;  } #read .actions ul .info::after { background-position: -2000px -200px;  } #read .actions ul .share {  } #read .actions ul .share::after { background-position: -2300px -200px;  } #read .actions::after { position: absolute; bottom: -4px; left: 50%; width: 10px; height: 10px; background: linear-gradient( -45deg, rgba( 46, 71, 86, 0.9 ) 50%, rgba( 0, 0, 0, 0 ) 50%); box-shadow: 0 0 2px 0 rgba( 60, 60, 60, 0.1 ); content: ""; transform: translate( -50%, 0 ) rotate( 45deg );  } #read .actions i { position: absolute; bottom: 5px; left: 0; width: 100%; font-style: normal; font-size: 9px; font-weight: bold; line-height: 9px; color: #f0f0f0; text-align: center; font-family: brandon;  } #read .actions li:hover i { color: var( --secondary-color );  } #read .left::after { left: 15px; right: auto;  } #read .right::after { left: auto; right: 15px;  } #read .top {  } #read .top::after { top: -4px; bottom: auto; transform: translate( -50%, 0 ) rotate( -135deg );  } #read .show-sef { position: fixed; z-index: 10; bottom: -50px; left: 50%; display: block; width: 100px; padding: 5px; transform: translate( -50%, 0 ); background-color: #ffffff; border-radius: 5px; box-shadow: 0 0 15px 0 rgba( 127, 127, 127, 0.5 ); cursor: pointer; transition: all 0.25s ease-in-out;  } #read .show-sef img { display: block; width: 100%;  } #read .show-sef-up { bottom: 20px;  } #read .show-map { position: fixed; z-index: 10; bottom: -50px; left: 50%; display: block; width: 40px; height: 40px; margin: 0 0 0 100px; transform: translate( -50%, 0 ); background-color: #2e4756; box-shadow: 0 0 15px 0 rgba( 127, 127, 127, 0.5 ); cursor: pointer; transition: all 0.25s ease-in-out; border-radius: 50%;  } #read .show-map::after { position: absolute; top: 50%; left: 50%; display: block; width: 100px; height: 100px; overflow: hidden; content: ""; background: url( "../images/web/web.png?4" ) no-repeat -2500px -200px; transform: translate( -50%, -50% ) scale( 0.6 );  } #read .show-map-up { bottom: 20px;  } #read-map { position: fixed; z-index: 11; top: 0; right: 0; display: none; width: 40%; height: 100%; box-shadow: 0 0 15px 0 rgba( 127, 127, 127, 0.5 );  } #read-map > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  } #read-map .close { position: absolute; z-index: 12; top: 10px; right: 60px; width: 40px; height: 40px; cursor: pointer; border-radius: 5px; background-color: rgba( 255, 255, 255, 0.8 );  } #read-map .close::before,#read-map .close::after { position: absolute; top: 19px; left: 10px; width: 20px; height: 2px; background-color: #aa2222; content: "";  } #read-map .close::before { transform: rotate( 45deg );  } #read-map .close::after { transform: rotate( -45deg );  } #read > div { position: absolute; width: 50%; height: calc( 100% - 61px ); overflow: auto; padding: 20px 20px 10px 20px; font-family: linguisticspro;  } #win-sep { position: fixed; top: calc( 50% + 26px ); left: 0; display: none; width: 100%; height: 10px; content: ""; background: #f0f0f0; cursor: ns-resize;  } #win-sep.none { display: none;  } #win-sep::before,#win-sep::after { position: absolute; top: 4px; left: 50%; width: 20px; height: 2px; background-color: #e0e0e0; content: "";  } #win-sep::before { margin: -2px 0 0 -10px;  } #win-sep::after { margin: 2px 0 0 -10px;  } #read-search { position: fixed; z-index: 11; right: -480px; top: 0; display: block; width: 480px; max-width: 100%; height: 100%; background: rgba( 46, 71, 86, 0.95 ); overflow: auto; transition: all 0.25s ease-in-out;  } #read-search.active { right: 0;  } #read-search .verse { position: relative; display: block; list-style: none; margin: 0 0 0 5px; padding: 5px 0 5px 0;  } #read-search .verse::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-search .verse li { display: block; float: left; margin: 5px 5px 5px 5px; padding: 0 5px 0 5px; text-align: center; line-height: 26px; color: #ffffff; cursor: pointer; border-radius: 5px; border: 1px solid rgba( 255, 255, 255, 0.2 );  } #read-search .verse .sel { background-color: var( --secondary-color ); color: #ffffff;  } #read-search .link-words { height: 70px; padding: 10px 0 10px 20px;  } #read-search .link-words > span { float: left; margin: 12px 10px 0 0; background-color: var( --secondary-color );  } #read-search .link-words .off { background-color: rgba( 255, 255, 255, 0.3 );  } #read-search .link-words .on {  } #read-search .link-words .on::before { background-color: var( --secondary-color-darker );  } #read-search .link-words .on::after { background-color: var( --secondary-color-darker );  } #read-search .link-words > label { display: block; float: left; margin: 12px 0 0 0; line-height: 16px; color: #ffffff;  } #read-search .link-words .select { float: right; width: 150px; height: 40px; margin: 0 10px 0 0;  } #read-search .link-words .select::after { top: -2px; color: #ffffff;  } #read-search header { position: relative; top: 0; left: 0; width: 100%; min-height: 52px; margin: 0 0 0 0; padding: 0 100px 0 20px; color: #ffffff; border-top: 1px solid rgba( 255, 255, 255, 0.2 ); border-bottom: 1px solid rgba( 255, 255, 255, 0.2 );  } #read-search header:after { display: block; width: 100%; height: 0; content: ""; clear: both;  } #read-search header > ul { display: block; float: left; list-style: none;  } #read-search header > ul li { position: relative; float: left; margin: 10px 10px 10px 0; padding: 0 20px 0 10px; border-radius: 15px; height: 30px; background-color: #f5f5f5; border-radius: 10px;  } #read-search header > ul li span { color: #333333; line-height: 30px; cursor: pointer;  } #read-search header > ul li i { position: absolute; top: 8px; right: 5px; display: block; width: 14px; height: 14px; cursor: pointer; opacity: 0.5; font-style: normal;  } #read-search header > ul li i:hover { opacity: 1;  } #read-search header > ul li i:before,#read-search header > ul li i:after { position: absolute; top: 6px; left: 2px; display: block; width: 10px; height: 2px; background-color: #aa3333; content: "";  } #read-search header > ul li i:before { transform: rotate( 45deg );  } #read-search header > ul li i:after { transform: rotate( -45deg );  } #read-search header input { display: block; float: left; width: 100px; height: 50px; padding: 0 0 0 0; background-color: transparent; color: #ffffff;  } #read-search header input::placeholder { color: rgba( 255, 255, 255, 0.5 );  } #read-search header .submit { position: absolute; top: 5px; right: 80px; display: block; float: right; width: 40px; height: 40px; cursor: pointer; overflow: hidden;  } #read-search header .submit:after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat -1100px -400px; content: ""; transform: translate( -50%, -50% ) scale( 0.5 ); opacity: 0.8;  } #read-search header .submit:hover:after { opacity: 1;  } #read-search header .filter { position: absolute; top: 5px; right: 40px; display: block; float: right; width: 40px; height: 40px; cursor: pointer; overflow: hidden;  } #read-search header .filter i { position: absolute; top: 19px; left: 15px; display: block; width: 10px; height: 2px; background-color: #ffffff; opacity: 0.8; font-style: normal;  } #read-search header .filter:hover i { opacity: 1;  } #read-search header .filter i:before,#read-search header .filter i:after { position: absolute; display: block; height: 2px; background-color: #ffffff; content: "";  } #read-search header .filter i:before { top: -4px; left: -4px; width: 18px;  } #read-search header .filter i:after { bottom: -4px; width: 3px; left: 4px;  } #read-search header .close { position: absolute; top: 5px; right: 0; display: block; width: 40px; height: 40px; cursor: pointer;  } #read-search header .close:before,#read-search header .close:after { position: absolute; top: 19px; left: 10px; width: 20px; height: 2px; background-color: var( --secondary-color ); content: "";  } #read-search header .close:before { transform: rotate( 45deg );  } #read-search header .close:after { transform: rotate( -45deg );  } #read-search header .morph { position: absolute; z-index: 11; top: 100%; left: 0; display: none; width: 100%; padding: 20px 0 0 0; min-height: 300px; background-color: var( --primary-color );  } #read-search header .morph h3 { margin: 0 0 10px 20px; font-size: 14px; line-height: 100%; color: #ffffff; font-weight: bold;  } #read-search header .morph ul { display: block; margin: 0 0 10px 0; padding: 0 0 10px 10px; list-style: none; clear: both; border-bottom: 1px solid rgba( 255, 255, 255, 0.2 );  } #read-search header .morph ul:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-search header .morph ul:last-child { border-bottom: 0;  } #read-search header .morph ul li { display: block; float: left; line-height: 30px; margin: 0 0 10px 10px; padding: 0 10px 0 10px; border-radius: 15px; color: #ffffff; background-color: var( --primary-color-darker ); cursor: pointer;  } #read-search header .morph ul .sel { background-color: var( --secondary-color-darker );  } #read-search header .books { position: absolute; z-index: 11; top: 100%; left: 0; display: none; width: 100%; padding: 20px 0 0 0; min-height: 300px; background-color: var( --primary-color );  } #read-search header .books h3 { margin: 0 20px 10px 20px; font-size: 14px; line-height: 100%; color: #ffffff; font-weight: bold;  } #read-search header .books h3 span { float: right; cursor: pointer;  } #read-search header .books ul { display: block; margin: 0 0 10px 0; padding: 0 0 10px 10px; list-style: none; clear: both; border-bottom: 1px solid rgba( 255, 255, 255, 0.2 );  } #read-search header .books ul:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-search header .books ul:last-child { border-bottom: 0;  } #read-search header .books ul li { display: block; float: left; line-height: 30px; margin: 0 0 10px 10px; padding: 0 10px 0 10px; border-radius: 15px; color: #ffffff; background-color: var( --primary-color-darker ); cursor: pointer;  } #read-search header .books ul .sel { background-color: var( --secondary-color-darker );  } #read-search section {  } #read-search section h2 { padding: 0 0 0 20px; font-weight: bold; line-height: 40px; color: #ffffff;  } #read-search section article { position: relative; display: block; min-height: 60px; padding: 10px 20px 0 100px; border-bottom: 1px dotted rgba( 255, 255, 255, 0.5 ); overflow: hidden;  } #read-search section article:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-search section article h3 { position: absolute; top: 0; left: 0; margin: 0 0 10px 0; padding: 10px 0 0 0; cursor: pointer; width: 80px; height: 100%; cursor: pointer; background-color: var( --secondary-color );  } #read-search section article h3 span { display: block; line-heigth: 20px; font-size: 16px; color: #333333; text-align: center;  } #read-search section article h3 i { display: block; font-style: normal; line-heigth: 20px; font-size: 12px; color: #333333; text-align: center;  } #read-search section ul { display: block; margin: 0 0 0 0; list-style: none;  } #read-search section ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-search section ul li { display: block; float: left; margin: 0 10px 0 0;  } #read-search section ul li > div {  } #read-search section ul li span,#read-search section ul li strong { display: block; height: 20px; text-align: center; line-height: 20px; color: #ffffff; cursor: pointer;  } #read-search section ul li strong { font-weight: bold; color: var( --secondary-color );  } #read-search section ul li strong:nth-child(2) { opacity: 0.5;  } #read-search section ul li span:nth-child(2) { opacity: 0.5;  } #read-search section ol { display: block; margin: 10px 0 0 0; padding: 10px 0 10px 0; list-style: none; border-top: 1px dotted rgba( 255, 255, 255, 0.4 );  } #read-search section ol::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-search section ol li { display: block; float: left; margin: 0 10px 0 0;  } #read-search section ol li > div {  } #read-search section ol li span,#read-search section ol li strong { display: block; height: 20px; text-align: center; line-height: 20px; color: #9ec4dc; cursor: pointer;  } #read-search section ol li strong { font-weight: bold; color: var( --secondary-color );  } #read-search section ol li strong:nth-child(2) { opacity: 0.5;  } #read-search section ol li span:nth-child(2) { opacity: 0.5;  } #share-verse { position: fixed; z-index: 11; top: 50%; left: 50%; display: none; width: 100%; max-width: 480px; padding: 0 0 20px 0; background-color: #f0f0f0; transform: translate( -50%, -50% ); border-radius: 5px; box-shadow: 0 0 15px 0 rgba( 0, 0, 0, 0.2 );  } #share-verse header { position: relative; margin: 0 0 15px 0; padding: 15px 0 15px 0;  } #share-verse header p { padding: 0 0 0 20px; line-height: 20px; overflow: hidden; color: var( --primary-color ); font-weigth: bold; font-size: 14px;  } #share-verse header span { position: absolute; top: 0; right: 0; display: block; width: 50px; height: 50px; cursor: pointer;  } #share-verse header span::before,#share-verse header span::after { position: absolute; top: 24px; left: 15px; width: 20px; height: 2px; background-color: var( --secondary-color ); content: "";  } #share-verse header span::before { transform: rotate( 45deg );  } #share-verse header span::after { transform: rotate( -45deg );  } #share-verse > p { margin: 0 20px 10px 20px; padding: 10px 0 0 0; border-top: 1px solid #e0e0e0; color: #565656;  } #share-verse article { position: relative; height: 0; margin: 0 20px 15px 20px; padding: 0 0 56.25% 0; background-color: #2e4756;  } #share-verse article > div { position: absolute; top: 50%; left: 0; width: 100%; overflow: hidden; transform: translate( 0, -50% );  } #share-verse article ul { display: block; width: 100%; margin: 0 0 10px 0; list-style: none; text-align: center;  } #share-verse article ul::after { width: 100%; width: 100%; height: 0; content: ""; clear: both;  } #share-verse article .rtl { direction: rtl;  } #share-verse article ul li { display: inline-block; margin: 5px 5px 5px 5px;  } #share-verse article ul li > div {  } #share-verse article ul li span,#share-verse article ul li strong { display: block; height: 16px; text-align: center; line-height: 16px; color: #ffffff; cursor: pointer;  } #share-verse article ul li strong { font-weight: bold;  } #share-verse article .rtl li strong:nth-child(1) { font-family: ezrasil2, "Times New Roman", Times, serif;  } #share-verse article ul li strong:nth-child(2) { opacity: 0.5;  } #share-verse article ul li span:nth-child(2) { opacity: 0.5;  } #share-verse article ul .sel { background-color: var( --primary-color );  } #share-verse article ul .sel span,#share-verse article ul .sel strong { color: #ffffff;  } #share-verse article p { padding: 10px 0 0 0; color: rgba( 255, 255, 255, 0.5 ); text-align: center;  } #share-verse .color { display: block; margin: 0 0 15px 0; list-style: none; text-align: center;  } #share-verse .color li { position: relative; display: inline-block; width: 40px; height: 40px; margin: 0 5px 0 5px; border-radius: 50%; cursor: pointer;  } #share-verse .color li::before { position: absolute; top: 50%; left: 50%; display: none; width: 8px; height: 16px; margin: -2px 0 0 0; border-style: solid; border-width: 0 2px 2px 0; border-color: #ffffff; content: ""; transform: translate( -50%, -50% ) rotate( 40deg );  } #share-verse .color .sel::before { display: block;  } #share-verse .bg-color-0 { background-color: var( --primary-color );  } #share-verse .bg-color-1 { background-color: var( --secondary-color );  } #share-verse .bg-color-1 strong { color: #333333;  } #share-verse .bg-color-1 p { color: rgba( 51, 51, 51, 0.6 );  } #share-verse .bg-color-2 { background-color: #000000;  } #share-verse .bg-color-3 { background-color: #565656;  } #share-verse .bg-color-4 { background-color: #e24061;  } #share-verse .bg-color-5 { background-color: #75a1b2;  } #share-verse .bg-color-6 { background-color: #486a4a;  } #share-verse input { display: block; width: calc( 100% - 40px ); margin: 0 0 20px 20px; height: 44px; border: 2px solid #e0e0e0; background-color: transparent; border-radius: 5px; text-align: center;  } #share-verse .share { display: block; margin: 0 auto 0 auto; list-style: none; text-align: center;  } #share-verse .share::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #share-verse .share li { position: relative; display: inline-block; width: 50px; height: 50px; margin: 0 10px 0 10px; overflow: hidden; border-radius: 50%;  } #share-verse .share li::before { position: absolute; top: -25px; left: -25px; display: block; width: 100px; height: 100px; content: ""; background: url( "../images/web/web.png" ) no-repeat; opacity: 0.8; transform: scale( 0.4 );  } #share-verse .share li:hover::before { opacity: 1;  } #share-verse .share .fb::before { background-position: -500px -400px;  } #share-verse .share .tw::before { background-position: -700px -400px;  } #share-verse .share .wu::before { background-position: -1000px -400px;  } #share-verse .share li a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;  } #share-verse .submit { display: block; margin: 0 20px 0 20px; height: 46px; border-radius: 5px; line-height: 46px; font-weight: bold; text-transform: uppercase; text-align: center; color: #ffffff; background-color: var( --primary-color ); cursor: pointer;  } #share-verse .submit:hover { background-color: var( --primary-color-lighter );  } #read-comments { position: fixed; z-index: 11; right: -480px; top: 0; display: block; width: 480px; max-width: 100%; height: 100%; background: rgba( 46, 71, 86, 0.95 ); overflow: auto; transition: all 0.25s ease-in-out;  } #read-comments.active { right: 0;  } #read-comments > header { position: relative; top: 0; left: 0; width: 100%; min-height: 51px; margin: 0 0 0 0; padding: 0 50px 0 0; color: #ffffff; border-bottom: 1px solid rgba( 255, 255, 255, 0.2 );  } #read-comments > header ul { display: block; list-style: none; height: 51px;  } #read-comments > header ul li { position: relative; display: block; float: left; width: 33.33%; height: 51px; padding: 0 0 0 0; line-height: 50px; text-align: center; cursor: pointer; border-right: 1px solid rgba( 255, 255, 255, 0.2 );  } #read-comments > header ul .sel:after { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: var( --secondary-color ); content: "";  } #read-comments > header img { position: absolute; top: 50%; left: 50%; display: block; max-width: 100%; max-height: 30px; transform: translate( -50%, -50% );  } #read-comments > header .close { position: absolute; top: 5px; right: 5px; display: block; width: 40px; height: 40px; cursor: pointer;  } #read-comments > header .close:before,#read-comments > header .close:after { position: absolute; top: 19px; left: 10px; width: 20px; height: 2px; background-color: var( --secondary-color ); content: "";  } #read-comments > header .close:before { transform: rotate( 45deg );  } #read-comments > header .close:after { transform: rotate( -45deg );  } #read-comments section { padding: 20px 0 0 0;  } #read-comments section:after { display: block; width: 100%; height: 100%; content: ""; clear: both;  } #read-comments section article { margin: 0 20px 20px 20px; padding: 20px 0 0 0; background-color: #f0f0f0; border-radius: 5px; font-family: roboto;  } #read-comments section article > header { position: relative; display: block; margin: 0 20px 0 20px; padding: 30px 0 10px 0; cursor: pointer; font-family: roboto;  } #read-comments section article > header h4 { position: absolute; top: 5px; left: 45px; display: block; height: 20px; color: var( --primary-color ); line-height: 20px; font-weight: bold; font-style: normal; font-size: 12px; text-transform: uppercase;  } #read-comments section article > header span { position: absolute; top: 5px; right: 0; display: block; height: 20px; color: #787878; line-height: 20px; font-weight: bold; font-style: normal; font-size: 11px; text-transform: uppercase;  } #read-comments section article > header i { position: absolute; top: 5px; left: 0; display: block; padding: 0 10px 0 10px; background-color: var( --primary-color ); line-height: 20px; font-weight: bold; font-style: normal; font-size: 10px; border-radius: 5px; color: #ffffff; text-transform: uppercase;  } #read-comments section article > header h5 { display: block; font-weight: bold; overflow: hidden; color: var( --primary-color ); font-weight: bold; line-height: 100%;  } #read-comments section article footer { margin: 0 20px 0 20px; padding: 5px 0 20px 0;  } #read-comments section article footer:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-comments section article footer h4 { position: relative; display: block; float: left; margin: 0 10px 0 0; color: var( --primary-color ); line-height: 20px; cursor: pointer; transition: color 0.25s ease-in-out; overflow: hidden; font-size: 14px;  } #read-comments section article footer h4:after { position: absolute; bottom: 0; left: -110px; width: 100%; height: 1px; display: block; content: ""; transition: left 0.25s ease-in-out;  } #read-comments section article footer h4:hover:after { left: 0;  } #read-comments section article footer .blue {  } #read-comments section article footer .blue:hover { color: #0c34a6;  } #read-comments section article footer .blue:after { background-color: #0c34a6;  } #read-comments section article footer .green {  } #read-comments section article footer .green:hover { color: #40a119;  } #read-comments section article footer .green:after { background-color: #40a119;  } #read-comments section article footer .orange {  } #read-comments section article footer .orange:hover { color: #e09c1a;  } #read-comments section article footer .orange:after { background-color: #e09c1a;  } #read-comments section article footer .red {  } #read-comments section article footer .red:hover { color: #dd4444;  } #read-comments section article footer .red:after { background-color: #dd4444;  } #read-comments section article > .comment { display: block; margin: 0 20px 0 20px; color: #272831; font-size: 16px; line-height: 26px; clear: both; cursor: pointer;  } #read-comments section article ul { display: none; list-style: none; margin: 0 0 0 0; padding: 20px 20px 20px 20px; border-top: 1px solid #d9d8dd; background-color: #f3f3f5; border-radius: 0 0 5px 5px;  } #read-comments section article ul:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-comments section article ul li { display: block; margin: 0 0 20px 0;  } #read-comments section article ul li:last-of-type { margin: 0 0 0 0;  } #read-comments section article ul li .cell { margin: 0 0 0 0; padding: 20px 0 15px 20px; border: 1px solid #d9d8dd; border-radius: 5px; background-color: #ffffff;  } #read-comments section article ul li .cell:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-comments section article ul li .cell:hover { box-shadow: 0 0 5px 0 rgba(127, 127, 127, 0.2 );  } #read-comments section article ul li .comment { display: block; margin: 0 20px 20px 0; color: #272831; font-size: 14px; line-height: 26px; clear: both;  } #read-comments section article ul li .comment span { background-color: rgba( 57, 80, 95, 0.1 ); color: #272831; border-radius: 5px; line-height: 26px; font-size: 12px; padding: 0 5px 0 5px;  } #read-comments section article ul li header { position: relative; display: block; margin: 0 20px 15px 0; padding: 0 0 0 0;  } #read-comments section article ul li header span { position: absolute; top: 0; right: 0; display: block; height: 20px; color: #787878; line-height: 20px; font-weight: bold; font-style: normal; font-size: 11px; text-transform: uppercase;  } #read-comments section article ul li footer { margin: 0 0 0 0; padding: 0;  } #read-comments section article ul li header h5 { display: block; font-weight: bold; overflow: hidden; color: var( --primary-color ); font-weight: bold; line-height: 20px;  } #read-comments section article ul ol { display: block; list-style: none; margin: 0 0 0 50px; padding: 20px 0 0 0;  } #read-comments section article ol:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #read-comments section article ul ol li { margin: 0 0 20px 0;  } #read-comments section article ul ol li:last-of-type { margin: 0 0 0 0;  } #read-comments .form { position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;  } #read-comments .form textarea { display: block; width: 100%; height: 150px; resize: none;  } #read-comments .form .submit { display: block; height: 40px; margin: 0 20px 0 20px; line-height: 40px; background-color: var( --primary-color ); text-align: center; font-weight: bold; color: #ffffff; border-radius: 5px;  } #read-comments .form .submit:hover { background-color: var( --primary-color-lighter );  } #reply-comment { position: fixed; z-index: 11; top: 50%; left: 50%; display: none; width: 100%; max-width: 480px; padding: 0 0 20px 0; background-color: #f0f0f0; transform: translate( -50%, -50% ); border-radius: 5px; box-shadow: 0 0 15px 0 rgba( 0, 0, 0, 0.2 );  } #reply-comment header { position: relative; height: 51px; margin: 0 0 15px 0; padding: 10px 0 10px 0; border-bottom: 1px solid #e0e0e0;  } #reply-comment header p { padding: 0 0 0 20px; line-height: 30px; overflow: hidden; color: var( --primary-color ); font-weigth: bold; font-size: 14px;  } #reply-comment header span { position: absolute; top: 0; right: 0; display: block; width: 50px; height: 50px; cursor: pointer;  } #reply-comment header span:before,#reply-comment header span:after { position: absolute; top: 24px; left: 15px; width: 20px; height: 2px; background-color: var( --secondary-color ); content: "";  } #reply-comment header span:before { transform: rotate( 45deg );  } #reply-comment header span:after { transform: rotate( -45deg );  } #reply-comment > p { margin: 0 20px 10px 20px; padding: 0 0 0 0; color: #565656;  } #reply-comment textarea { display: block; width: calc( 100% - 40px ); height: 150px; margin: 0 0 20px 20px; padding: 10px; resize: none; border-top: 1px solid #e0e0e0; border-radius: 5px;  } #reply-comment .submit { display: block; margin: 0 20px 0 20px; height: 46px; border-radius: 5px; line-height: 46px; font-weight: bold; text-transform: uppercase; text-align: center; color: #ffffff; background-color: var( --primary-color ); cursor: pointer;  } #reply-comment .submit:hover { background-color: var( --primary-color-lighter );  } #single-comment { position: fixed; z-index: 11; top: 50%; left: 50%; display: none; width: 100%; max-width: 480px; padding: 0 0 20px 0; background-color: #f0f0f0; transform: translate( -50%, -50% ); border-radius: 5px; box-shadow: 0 0 15px 0 rgba( 0, 0, 0, 0.2 );  } #single-comment header { position: relative; margin: 0 0 15px 0; padding: 10px 0 10px 0;  } #single-comment header p { padding: 0 0 0 20px; line-height: 20px; overflow: hidden; color: var( --primary-color ); font-weigth: bold; font-size: 14px;  } #single-comment header span { position: absolute; top: 5px; right: 0; display: block; width: 50px; height: 50px; cursor: pointer;  } #single-comment header span::before,#single-comment header span::after { position: absolute; top: 24px; left: 15px; width: 20px; height: 2px; background-color: var( --secondary-color ); content: "";  } #single-comment header span::before { transform: rotate( 45deg );  } #single-comment header span::after { transform: rotate( -45deg );  } #single-comment > p { margin: 0 20px 10px 20px; padding: 10px 0 0 0; border-top: 1px solid #e0e0e0; color: #565656;  } #single-comment > ul { display: block; margin: 0 20px 0 20px; list-style: none;  } #single-comment > ul::after { display: block; width: 100%; height: 0; clear: both; content: ""; text-align: center;  } #single-comment .rtl { direction: rtl;  } #single-comment > ul li { display: inline-block; margin: 0 5px 5px 5px; padding: 5px 5px 5px 5px; border-radius: 5px;  } #single-comment > ul li > div {  } #single-comment > ul li span,#single-comment > ul li strong { display: block; height: 16px; text-align: center; line-height: 16px; color: #333333; cursor: pointer;  } #single-comment > ul li strong { font-weight: bold;  } #single-comment > .rtl li strong:nth-child(1) { font-family: ezrasil2, "Times New Roman", Times, serif;  } #single-comment > ul li strong:nth-child(2) { opacity: 0.5;  } #single-comment > ul li span:nth-child(2) { opacity: 0.5;  } #single-comment > ul .sel { background-color: var( --primary-color );  } #single-comment > ul .sel span,#single-comment > ul .sel strong { color: #ffffff;  } #single-comment .rte { margin: 0 20px 20px 20px;  } #single-comment .rte > header { margin: 0; padding: 0;  } #single-comment .rte > header ul { margin: 0;  } #single-comment .rte > header ul li { margin: 0;  } #single-comment .submit { display: block; margin: 0 20px 0 20px; height: 46px; border-radius: 5px; line-height: 46px; font-weight: bold; text-transform: uppercase; text-align: center; color: #ffffff; background-color: var( --primary-color ); cursor: pointer;  } #single-comment .submit:hover { background-color: var( --primary-color-lighter );  } #acc { position: fixed; z-index: 12; top: 50%; left: 50%; width: 0; height: 0; background-color: rgba( 0, 0, 0, 0.2 ); overflow: hidden; transition: all 0.25s ease-in-out; opacity: 0; transform: translate( -50%, -50% );  } #acc.visible { width: 100%; height: 100%; opacity: 1;  } #acc > div { position: absolute; top: 50%; left: 50%; width: 400px; max-height: calc( 100% - 20px ); background-color: #ffffff; padding: 50px 0 0 0; overflow: hidden; box-shadow: 0 0 20px 0 rgba( 0, 0, 0, 0.2 ); border-radius: 10px; transition: all 0.25s ease-in-out; transform: translate( -50%, -50% );  } #acc.visible > div {  } #acc section { position: relative; max-height: calc( 100vh - 70px ); padding: 20px 0 0 0; overflow: auto;  } #acc header { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 50px; padding: 0 0 0 20px; overflow: hidden; background-color: var( --primary-color ); line-height: 50px; color: #ffffff; font-weight: bold;  } #acc header span { position: absolute; top: 0; right: 0; width: 50px; height: 50px; cursor: pointer;  } #acc header span:before,#acc header span:after { position: absolute; top: 24px; left: 23px; display: block; width: 14px; height: 2px; background-color: var( --secondary-color-light ); content: ""; transition: all 0.25s ease-in-out;  } #acc header span:before { transform: rotate( 45deg );  } #acc header span:after { transform: rotate( -45deg );  } #acc header span:hover:before,#acc header span:hover:after { background-color: var( --secondary-color-lighter );  } #acc h2 { display: block; margin: 0 20px 20px 20px; clear: both; color: var( --primary-color ); font-size: 32px; line-height: 100%;  } #acc p { display: block; margin: 0 20px 30px 20px; clear: both; color: var( --primary-color );  } #acc p a,#acc p span { color: var( --secondary-color ); cursor: pointer;  } #acc p a:hover,#acc p span:hover { color: var( --secondary-color-lighter );  } #acc fieldset { display: block; margin: 0 20px 20px 20px; clear: both;  } #acc fieldset:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #acc label { display: block; margin: 0 0 5px 0; clear: both; color: #9da3a8; line-height: 100%; font-size: 12px; text-transform: uppercase; font-weight: bold;  } #acc label img { display: block; height: 12px;  } #acc .label-inline { float: left; margin: 0 0 0 0; clear: none; line-height: 20px; text-transform: none;  } #acc input,#acc textarea { display: block; width: 100%; height: 44px; padding: 0 10px 0 10px; color: #333333; border: 2px solid var( --primary-color-lighter ); border-radius: 5px; line-height: 40px;  } #acc textarea { padding: 10px 10px 10px 10px; min-height: 150px; resize: vertical; line-height: 22px;  } #acc input:focus,#acc textarea:focus { border: 2px solid var( --primary-color-light );  } #acc input:disabled { color: #aaaaaa; background-color: #f0f0f0; border: 2px solid #e0e0e0;  } #acc .cb,#acc .cbs { float: left; margin: 0 10px 0 0;  } #acc .on,#acc .off { float: left; margin: 2px 10px 0 0;  } #acc .submit { display: block; margin: 0 20px 20px 20px; clear: both; font-size: 14px; font-weight: bold; color: #ffffff; line-height: 100px; line-height: 44px; cursor: pointer; text-align: center; text-transform: uppercase; clear: both; background-color: #3e6270; border-radius: 5px;  } #acc .submit:hover { background-color: #4e7280;  } #acc footer { display: block; margin: 0 20px 20px 20px; clear: both;  } #acc footer::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #acc footer span { display: block; float: left; margin: 0 20px 0 0; line-height: 100%; color: var( --secondary-color ); cursor: pointer;  } #acc footer span:last-child { margin: 0 0 0 0;  } #acc footer span:hover { color: var( --secondary-color-lighter );  } #acc .avatar { position: relative; display: block; clear: both; height: 0; margin: 0 20px 20px 20px; padding: 0 0 calc( 100% - 40px ) 0; background: center center / cover #f0f5fa; border-radius: 5px; overflow: hidden;  } #acc .avatar:before,#acc .avatar:after { position: absolute; z-index: 1; top: 50%; left: 50%; display: block; background-color: rgba( 0, 0, 0, 0.2 ); content: ""; cursor: pointer; transform: translate( -50%, -50% );  } #acc .avatar:before { width: 100px; height: 6px;  } #acc .avatar:after { width: 6px; height: 100px;  } #acc .avatar:hover:before,#acc .avatar:hover:after { background-color: rgba( 0, 0, 0, 1 );  } #acc .avatar input { position: absolute; z-index: 2; display: block; width: 100%; height: 100%; opacity: 0; cursor: pointer;  } #acc .locations { position: relative;  } #acc .locations > div { position: absolute; top: 100%; left: 0; width: 100%; display: none; background-color: #f8f8f8; border: 2px solid #aaaaaa; border-radius: 3px;  } #acc .locations > div span { display: block; height: 32px; width: 100%; padding: 0 0 0 10px; line-height: 30px; color: #666666; border-bottom: 2px dotted #e8e8e8; white-space: nowrap; overflow: hidden; cursor: pointer; text-overflow: ellipsis;  } #acc .locations > div span:last-child { border-bottom: 0;  } #acc .locations > div .sel { background-color: #f0f0f0;  } #search aside { position: absolute; z-index: 10; top: 0; left: 200px; display: block; width: 291px; height: 100%; margin: 0 0 0 0; border-right: 2px solid rgba( 62, 98, 112, 0.1 ); background-color: #ffffff; transition: all 0.2s ease-in-out; overflow: hidden;  } #search aside > div { width: 280px; height: 100%; overflow: auto;  } #search aside h2 { position: relative; display: block; width: 260px; height: 51px; margin: 0 0 20px 20px; font-size: 18px; line-height: 50px; font-weight: bold; color: #333333; text-transform: uppercase; border-bottom: 1px solid rgba( 62, 98, 112, 0.1 );  } #search aside h2 span { position: absolute; top: 5px; right: 10px; display: none; width: 40px; height: 40px; cursor: pointer; transition: all 0.2s ease-in-out;  } #search aside h2 span:before,#search aside h2 span:after { position: absolute; top: 19px; left: 13px; display: block; width: 16px; height: 2px; background-color: #333333; content: "";  } #search aside h2 span:before { transform: rotate( 45deg );  } #search aside h2 span:after { transform: rotate( -45deg );  } #search aside h2 span:hover:before,#search aside h2 span:hover:after { background-color: #ed1c24;  } #search aside fieldset { width: 260px; display: block; margin: 0 0 20px 20px; padding: 0 0 0 0; overflow: hidden; border-bottom: 1px solid rgba( 62, 98, 112, 0.1 );  } #search aside fieldset:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #search aside fieldset:last-child { margin: 0 0 0 20px; border-bottom: 0;  } #search aside header { position: relative; display: block; margin: 0 0 20px 0; padding: 0 0 0 0; font-weight: bold; color: var( --primary-color ); text-transform: uppercase; font-size: 14px; line-height: 20px;  } #search aside header span { position: absolute; top: 1px; right: 0; width: 18px; display: block; height: 18px; border: 2px solid var( --primary-color ); border-radius: 50%; cursor: pointer; opacity: 0.5;  } #search aside header span:hover { opacity: 1;  } #search aside header span:before { position: absolute; top: 50%; left: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; content: ""; background-color: var( --primary-color );  } #search aside header span:after { position: absolute; top: 50%; left: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; content: ""; background-color: var( --primary-color ); transition: all 0.2s ease-in-out;  } #search aside .min ul { max-height: 0;  } #search aside .min header span:after { transform: rotate( 90deg );  } #search aside .tags { display: block; width: 250px; padding: 0 20px 0 0; list-style: none;  } #search aside .tags:after { display: none; width: 100%; height: 0; clear: both; content: "";  } #search aside .tags li { display: block; float: left; margin: 0 10px 10px 0; padding: 0 10px 0 10px; border-radius: 13px; line-height: 26px; background-color: #f5f5f5; font-size: 10px; font-weight: bold; cursor: pointer;  } #search aside .tags .sel { color: #ffffff; background-color: var( --primary-color );  } #search aside .cblist { display: block; list-style: none; margin: 0 0 0 0; max-height: 2000px; overflow: hidden; transition: all 0.2s ease-in-out;  } #search aside .cblist li { position: relative; display: block; height: 20px; margin: 0 0 20px 0; padding: 0 0 0 40px; font-weight: bold; color: #7e8795; font-size: 14px; line-height: 20px;  } #search aside .cblist li:last-child { margin: 0 0 30px 0;  } #search aside .cblist .cb,#search aside .cblist .cbs { position: absolute; top: 1px; left: 0; border-color: #a5b0bf;  } #search aside .cblist .cbs { background-position: -116px -116px;  } #search aside .cblist label { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  } #search aside .select { margin: 0 0 20px 0;  } #search aside .selbox { position: relative; display: block; height: 40px; margin: 0 30px 30px 0; cursor: pointer; border: 1px solid #e0e5ea; border-radius: 3px;  } #search aside .selbox:before { position: absolute; display: block; top: 0; right: 0; width: 40px; height: 40px; content: ""; background: url( "../images/website/blunavi.png" ) -205px -55px no-repeat; border-left: 1px solid #a0a5aa; opacity: 0.3;  } #search aside .selbox span { position: absolute; top: 0; left: 10px; width: 250px; padding: 0; font-size: 14px; color: #7e8795; line-height: 40px;  } #search aside .selbox ol { position: absolute; z-index: 3; top: 40px; left: -1px; width: 100%; display: none; list-style: none; background-color: #ffffff; border: 1px solid #e0e5ea; overflow: hidden; border-radius: 0 0 3px 3px;  } #search aside .selbox ol li { display: block; padding: 0 0 0 10px; color: #7e8795; line-height: 40px; border-bottom: 1px solid #e0e5ea;  } #search aside .selbox ol li:last-child { border: 0;  } #search aside .range { position: relative; display: block; height: 4px; margin: 0 0 15px 0; background-color: var( --primary-color );  } #search aside .range span,#search aside .range i { position: absolute; top: -8px; display: block; width: 20px; height: 20px; margin: 0 0 0 0; background-color: var( --primary-color ); border-radius: 50%; box-shadow: 1px 1px 2px 1px rgba( 0, 0, 0, 0.2 ); cursor: pointer;  } #search aside .range i { right: 0;  } #search aside .range span:before { position: absolute; top: 8px; right: 20px; display: block; width: 300px; height: 4px; content: ""; background-color: #e0e0e0;  } #search aside .range i:before { position: absolute; top: 8px; left: 20px; display: block; width: 300px; height: 4px; content: ""; background-color: #e0e0e0;  } #search aside .min-range,#search aside .max-range { float: left; margin: 0 0 30px 0; color: #7e8795; text-transform: uppercase; font-weight: bold; line-height: 20px;  } #search aside .max-range { float: right;  } #search aside .min-range:after,#search aside .max-range:after { display: inline; content: attr( data-currencylabel );  } #search aside sub { padding: 0 0 0 2px; font-size: 10px; vertical-align: super;  } #search > header { position: fixed; z-index: 10; top: 0; left: 290px; display: block; width: calc( 100% - 290px ); height: 61px; padding: 0 0 0 0; background-color: #f5f5f5; border-bottom: 1px solid #e5e5e5;  } #search > header > div { position: absolute; top: 0; left: 0; display: none; width: 61px; height: 60px; cursor: pointer; border-right: 1px solid #e5e5e5;  } #search > header > div:hover { background-color: #ffffff;  } #search > header > div span { position: absolute; top: 29px; left: 25px; display: block; width: 10px; height: 2px; background-color: #333333; opacity: 0.8;  } #search > header > div:hover span { opacity: 1;  } #search > header > div span:before,#search > header > div span:after { position: absolute; top: 0; left: 50%; display: block; height: 2px; background-color: #333333; content: ""; transform: translate( -50%, 0% );  } #search > header > div span:before { width: 18px; margin: -4px 0 0 0;  } #search > header > div span:after { width: 4px; margin: 4px 0 0 0;  } #search > header input { display: block; width: 100%; height: 60px; padding: 0 70px 0 20px; background-color: transparent;  } #search > header input:focus { background-color: #ffffff;  } #search > header > span { position: absolute; top: 0; right: 0; display: block; width: 61px; height: 60px; cursor: pointer; border-left: 1px solid #e5e5e5;  } #search > header > span:hover { background-color: #ffffff;  } #search > header > span:before,#search > header > span:after { position: absolute; top: 29px; left: 20px; display: block; width: 20px; height: 2px; background-color: #ed1c24; content: ""; transform: rotate( 45deg ); transition: all ease-in-out .2s;  } #search > header > span:after { transform: rotate( -45deg );  } #search > header > span:hover:before { transform: rotate( -40deg );  } #search > header > span:hover:after { transform: rotate( 40deg );  } #search > header > span:hover:before,#search > header > span:hover:after { transform-origin: 100% 1px;  } #search > header ul { position: absolute; top: 61px; left: 0; display: none; width: 100%; list-style: none; background-color: #ffffff; border-bottom: 1px solid #e5e5e5; overflow: hidden;  } #search > header ul li { position: relative; display: block; height: 50px; padding: 0 0 0 55px; line-height: 50px; overflow: hidden;  } #search > header ul .sel { background-color: #fafafa;  } #search > header ul li:before {  } #search > header ul figure { position: absolute; top: 5px; left: 5px; width: 40px; height: 40px; overflow: hidden; border-radius: 4px;  } #search > header ul img { display: block; width: 100%; height: 100%;  } #search section > header { position: relative; display: block; width: 510px; height: 51px; margin: 0 0 0 0; padding: 0 0 0 20px; text-transform: uppercase; background-color: #ffffff; border-bottom: 1px solid rgba( 62, 98, 112, 0.1 );  } #search section > header h4 { display: block; float: left; line-height: 50px; font-weight: bold; color: #333333;  } #search section > header span { position: absolute; top: 5px; right: 0; display: block; width: 40px; height: 40px; cursor: pointer; transition: all 0.2s ease-in-out;  } #search section > header span:before,#search section > header span:after { position: absolute; top: 19px; left: 13px; display: block; width: 16px; height: 2px; background-color: #000000; content: "";  } #search section > header span:before { transform: rotate( 45deg );  } #search section > header span:after { transform: rotate( -45deg );  } #search section > header span:hover:before,#search section > header span:hover:after { background-color: #ed1c24;  } #search section { position: absolute; z-index: 10; top: 0; left: 491px; width: calc( 100% - 291px ); height: 100%; overflow-y: auto; border-right: 1px solid rgba( 62, 98, 112, 0.1 );  } #search section .logo-search { position: absolute; top: 50%; left: 50%; display: block; max-width: 300px; width: 60%; margin: 0 0 0 0; opacity: 0.2; transform: translate( -50%, -50% );  } #search section > ul { position: relative; display: block; width: 510px; margin: 0 0 0 0; list-style-type: none;  } #search section > ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #search section > ul > li { position: relative; display: block; clear: both; overflow: hidden; background-color: #ffffff; border-bottom: 2px solid rgba( 62, 98, 112, 0.1 ); cursor: pointer;  } #search section > ul > li::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #search section > ul > li:last-child { border-bottom: 0;  } #search section > ul > li:hover { background-color: #fafaff;  } #search section > ul > li header { position: relative; height: 90px; padding: 25px 0 25px 90px;  } #search section > ul > li figure { position: absolute; display: block; top: 20px; left: 20px; width: 50px; height: 50px; overflow: hidden; background-color: #ffffff; border: 2px solid #f0f0f0; border-radius: 5px;  } #search section > ul > li figure i { display: block; line-height: 46px; color: #606b8b; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 14px; font-style: normal;  } #search section > ul > li figure img { position: absolute; top: 50%; left: 50%; display: block; width: 100%; transform: translate( -50%, -50% );  } #search section > ul > li .link { position: absolute; top: 25px; right: 25px; display: block; width: 20px; height: 20px; border: 2px solid rgba( 62, 98, 112, 0.1 ); transition: all 0.2s ease-in-out;  } #search section > ul > li .link:before { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border: 2px solid rgba( 62, 98, 112, 0.1 ); content: ""; background-color: #ffffff; transition: all 0.2s ease-in-out;  } #search section > ul > li .link:after { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-top: 2px solid rgba( 62, 98, 112, 0.1 ); border-right: 2px solid rgba( 62, 98, 112, 0.1 ); content: ""; transition: all 0.2s ease-in-out;  } #search section > ul > li .link:hover,#search section > ul > li .link:hover:before,#search section > ul > li .link:hover:after { border-color: var( --secondary-color );  } #search section > ul > li h3 { max-height: 20px; overflow: hidden; line-height: 20px; font-size: 14px; font-weight: bold; color: var( --primary-color );  } #search section > ul > li h4 { max-height: 20px; overflow: hidden; line-height: 20px; font-size: 12px; color: #565656;  } #search section > ul > li p { margin: 0 20px 15px 20px; font-size: 12px; line-height: 22px; color: #333333;  } #search section > ul > li p:after { content: attr( data-label );  } #search section > ul > li footer { position: relative; min-height: 67px; padding: 20px 60px 10px 20px; border-top: 1px dotted rgba( 62, 98, 112, 0.1 );  } #search section > ul > li footer:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #search section > ul > li footer ul { display: block; list-style: none; padding: 0 0 20px 0;  } #search section > ul > li footer ul:after { display: none; width: 100%; height: 0; clear: both; content: "";  } #search section > ul > li footer ul li { display: block; float: left; margin: 0 10px 10px 0; padding: 0 12px 0 12px; border-radius: 13px; line-height: 26px; background-color: #f5f5f5; font-size: 10px; font-weight: bold;  } #search section > ul > li footer .like { position: absolute; top: 13px; right: 10px; display: block; width: 40px; height: 40px; cursor: pointer; overflow: hidden; border-radius: 50%; opacity: 0.5;  } #search section > ul > li footer .like:hover { background-color: #f0f0f0;  } #search section > ul > li footer .like:after { position: absolute; top: 50%; left: 50%; display: block; width: 100px; height: 100px; content: ""; background: url( "../images/web/web.png" ) no-repeat 0px -300px; transform: translate( -50%, -50% ) scale( 0.4 );  } #search section > ul > li footer .liked:after { background-position: -1200px -400px;  } #search section > ul > li footer .like:hover,#search section > ul > li footer .likesd { opacity: 0.8;  } #search section > ul > li footer .like:before { position: absolute; bottom: 0; left: -5px; width: 50px; text-align: center; line-height: 100%; font-size: 12px; color: #333344; content: attr( data-count );  } #search article { position: absolute; top: 0; right: 0; display: none; width: calc( 100% - 760px ); height: 100%; background-color: #332211;  } #search article header { display: block; overflow: hidden; border-radius: 5px 5px 5px 5px;  } #search section nav { display: block; margin: 0 0 0 0; margin: 0 20px 0 0; padding: 20px 0 20px 20px; width: 510px; clear: both; background-color: #ffffff; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  } #search section nav:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #search section nav div { float: left; height: 32px; overflow: hidden; border-radius: 4px;  } #search section nav span,#search section nav i { display: block; float: left; min-width: 32px; height: 32px; padding: 0 10px 0 10px; margin: 0 10px 0 0; color: #7b7e9f; line-height: 30px; font-weight: bold; background-color: #ffffff; border: 1px solid #e5e5e5; font-style: normal; border-radius: 5px;  } #search section nav span:first-child,#search section nav i:first-child {  } #search section nav span:last-child,#search section nav i:last-child { margin: 0 10px 0 0;  } #search section nav span:hover { background-color: #f5f5f5; cursor: pointer;  } #search section nav i { color: #ed1c24;  } #search section nav h4 { float: right; margin: 0 20px 0 0; font-weight: bold; font-size: 14px; line-height: 32px; color: #2b2e4f;  } #search { position: fixed; z-index: 8; top: 60px; left: 0; display: none; width: 100%; height: calc( 100% - 60px );  } #search:before { position: absolute; z-index: 8; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba( 127, 127, 127, 0.5 ); backdrop-filter: blur(10px); content: "";  } #impressum { padding: 90px 20px 50px 20px; margin: 0 auto 0 auto; max-width: 840px;  } #impressum:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #impressum header { position: relative; display: block; margin: 0 0 30px 0; padding: 0 0 30px 0; overflow: hidden; border-bottom: 2px dashed #e0e0e0;  } #impressum header h2 { position: relative; display: inline-block; margin: 0 0 20px 0; font-weight: bold; color: #505050; font-size: 34px; line-height: 100%;  } #impressum header p { color: #052030; font-size: 18px; line-height: 180%; opacity: 0.5;  } #impressum article {  } #impressum article h3 { margin: 0 0 20px 0; font-weight: bold; color: #505050; font-size: 18px; text-transform: uppercase; line-height: 200%;  } #impressum article p { margin: 0 0 30px 0; font-size: 16px; text-align: justify; color: #2b2b4b; line-height: 200%;  } #impressum br { display: block; clear: both;  } #impressum .dblbr { display: block; clear: both; margin: 0 0 40px 0;  } #impressum a { color: #af0706; cursor: pointer;  } #impressum a:hover { text-decoration: underline;  } #impressum article ol { list-style: none; margin: 0 0 30px 0;  } #impressum article ol li { position: relative; margin: 0 0 10px 0; padding: 0 0 0 20px; text-align: justify; color: #2b2b4b; line-height: 200%; font-size: 16px;  } #impressum article ol li:before { position: absolute; top: 0; left: 0; display: block; content: "•"; line-height: 200%; color: #052850;  } #impressum article ol p { margin: 0 0 10px 0;  } #impressum i { color: #052850; font-size: 16px; line-height: 16px; opacity: 0.5; font-style: normal;  } #legal { padding: 0 0 50px 0;  } #legal::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #legal header { position: relative; display: block; height: 500px; margin: 0 0 30px 0; padding: 60px 0 30px 0; overflow: hidden; background-color:  var( --primary-color-lighter ); background: url( "../images/web/legal/background.jpg" ) no-repeat center center / cover;  } #legal header::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: rgba( 0, 0, 0, 1 ); content: ""; opacity: 0.5;  } #legal header > div { position: absolute; top: 50%; left: 0; width: 100%; margin: 30px 0 0 0; padding: 0 20px 0 20px; transform: translate( 0, -50% );  } #legal header h2 { position: relative; display: block; margin: 0 0 0 0; font-weight: bold; color: rgba( 255, 255, 255, 0.8 ); text-align: center; font-size: 44px; line-height: 130%;  } #legal header p { color: rgba( 255, 255, 255, 0.8 ); font-size: 20px; line-height: 180%; text-align: center;  } #legal article { max-width: 840px; margin: 0 auto 0 auto; padding: 0 20px 0 20px;  } #legal article h3 { margin: 0 0 20px 0; font-weight: bold; color: #505050; font-size: 18px; text-transform: uppercase; line-height: 200%;  } #legal article p { margin: 0 0 30px 0; font-size: 16px; text-align: justify; color: #052030; line-height: 200%;  } #legal br { display: block; clear: both;  } #legal .dblbr { display: block; clear: both; margin: 0 0 40px 0;  } #legal a { color: #af0706; cursor: pointer;  } #legal a:hover { text-decoration: underline;  } #legal article ul { list-style: none; margin: 0 0 30px 0;  } #legal article ul li { position: relative; margin: 0 0 10px 0; padding: 0 0 0 20px; text-align: justify; color: #2b2b4b; line-height: 200%; font-size: 16px;  } #legal article ul li:before { position: absolute; top: 0; left: 0; display: block; content: "•"; line-height: 200%; color: #052850;  } #legal article ul p { margin: 0 0 10px 0;  } #legal i { color: #052850; font-size: 16px; line-height: 16px; opacity: 0.5; font-style: normal;  } #about-description { position: relative; display: block; margin: 0 auto 0 auto; padding: 0 0 100px 0;  } #about-description:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #about-description > div { max-width: 840px; margin: 0 auto 0 auto; padding: 0 20px 0 20px;  } #about-description > div:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #about-description h2 { margin: 0 0 10px 0; text-align: center; overflow: hidden;  } #about-description h2 span { position: relative; display: inline-block; font-size: 30px; line-height: 30px; font-weight: bold; color: var( --primary-color );  } #about-description h2 span::before,#about-description h2 span::after { position: absolute; top: 50%; display: block; width: 500px; height: 2px; margin: -1px 0 0 0; background-color: var( --primary-color ); content: ""; opacity: 0.5;  } #about-description h2 span::before { right: calc( 100% + 10px );  } #about-description h2 span::after { left: calc( 100% + 10px );  } #about-description .center { text-align: center;  } #about-description p { margin: 0 0 30px 0; font-size: 18px; color: #333333; line-height: 32px;  } #about-description ol { display: block; margin: 0 0 30px 0; list-style: none;  } #about-description ol::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #about-description ol li { position: relative; display: block; padding: 0 0 0 20px; color: #333333; font-size: 18px; line-height: 32px;  } #about-description ol li:last-child {  } #about-description ol li::before { position: absolute; top: 13px; left: 0; width: 6px; height: 6px; border-radius: 50%; text-align: center; background-color: var( --secondary-color ); content: "";  } #about-description a { color: var( --secondary-color );  } #about-description a:hover { color: var( --secondary-color-lighter  );  } #about-intro { position: relative; display: block; height: 0; margin: 0 auto 100px auto; padding: 0 0 30% 0; background-color: var( --tertiary-color ); background: url( "../images/web/about/intro-1.jpg" ) no-repeat center center / cover;  } #about-intro::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: var( --primary-color-lighter ); content: ""; opacity: 0.2;  } #about-intro::after { position: relative; width: 100%; height: 0; clear: both; content: "";  } #about-intro header { position: absolute; bottom: 0; left: 50%; width: 100%; max-width: 800px; padding: 10px 10px 10px 10px; background-color: rgba( 46, 73, 86, 0.9 ); border-radius: 10px; transform: translate( -50%, 50% ); box-shadow: 0 0 20px 0 rgba( 0, 0, 0, 0.8 );  } #about-intro header h2 { margin: 0 0 10px 0; font-size: 28px; line-height: 130%; color: rgba( 255, 255, 255, 0.8 ); text-align: center; font-weight: bold;  } #about-intro header p { margin: 0 0 10px 0; font-size: 22px; line-height: 130%; color: var( --secondary-color ); text-align: center;  } #contact-form { max-width: 840px; margin: 0 auto 0 auto; padding: 0 0 50px 0;  } #contact-form h3 { margin: 0 20px 20px 20px; padding: 30px 0 0 0; border-top: 2px dashed #f0f0f0; font-size: 18px; line-height: 100%; font-weight: bold; text-transform: uppercase; color: var( --primary-color );  } #contact-form fieldset { display: block; min-height: 50px; margin: 0 20px 20px 20px; clear: both;  } #contact-form fieldset:after { display: block; width: 100%; height: 0; content: ""; clear: both;  } #contact-form p { font-size: 18px; color: #404040;  } #contact-form label { display: block; margin: 0 0 5px 0; clear: both; line-height: 100%; text-transform: uppercase; font-size: 12px; color: #aaaaaa;  } #contact-form input,#contact-form textarea { display: block; width: 100%; height: 44px; padding: 0 10px 0 10px; clear: both; line-height: 40px; border-radius: 4px; color: #333333; border: 2px solid var( --primary-color-lighter );  } #contact-form textarea { min-height: 150px; padding: 10px; line-height: 180%; resize: vertical;  } #contact-form input:focus,#contact-form textarea:focus { border: 2px solid var( --primary-color );  } #contact-form .submit { display: block; margin: 0 20px 0 20px; line-height: 40px; text-align: center; background-color: var( --primary-color ); color: #ffffff; text-transform: uppercase; border-radius: 4px; font-size: 14px; font-weight: bold; cursor: pointer;  } #contact-form .submit:hover { background-color: var( --primary-color-light );  } #contact-info { position: relative; display: block; max-width: 840px; margin: 0 auto 30px auto; padding: 0 20px 0 20px; clear: both;  } #contact-info:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #contact-info h3 { position: relative; margin: 0 0 20px 0; font-size: 18px; line-height: 100%; font-weight: bold; color: var( --primary-color ); text-transform: uppercase;  } #contact-info p { margin: 0 0 20px 0; font-size: 16px; line-height: 26px; color: #052030;  } #contact-info p:last-of-type { margin: 0;  } #contact-info label { display: block; margin: 0 0 0 0; clear: both; line-height: 100%; text-transform: uppercase; font-size: 12px; color: #999999;  } #contact-info a { color: var( --secondary-color );  } #contact-intro { position: relative; display: block; height: 0; margin: 0 auto 50px auto; padding: 0 0 25% 0; background-color: var( --tertiary-color ); background: url( ../images/web/contact/intro.jpg ) no-repeat center center / cover;  } #contact-intro::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: var( --primary-color-lighter ); content: ""; opacity: 0.5;  } #contact-intro::after { position: relative; width: 100%; height: 0; clear: both; content: "";  } #contact-intro header { position: absolute; top: 50%; left: 0; width: 100%; margin: 20px 0 0 0; padding: 0 20px 0 20px; transform: translate( 0, -50% );  } #contact-intro header h2 { margin: 0 0 10px 0; font-size: 58px; line-height: 100%; color: rgba( 255, 255, 255, 0.8 ); text-align: center; font-weight: bold;  } #contact-intro header p { margin: 0 0 10px 0; font-size: 22px; line-height: 120%; color: rgba( 255, 255, 255, 0.9 ); text-align: center;  } #sources-list { position: relative; display: block; margin: 0 auto 0 auto; padding: 0 0 100px 0;  } #sources-list::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #sources-list > div { max-width: 840px; margin: 0 auto 0 auto; padding: 0 20px 0 20px;  } #sources-list > div:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #sources-list h2 { margin: 0 0 20px 0; text-align: center; overflow: hidden;  } #sources-list h2 span { position: relative; display: inline-block; font-size: 30px; line-height: 40px; font-weight: bold; color: var( --primary-color );  } #sources-list h2 span::before,#sources-list h2 span::after { position: absolute; top: 50%; display: block; width: 500px; height: 2px; margin: -1px 0 0 0; background-color: var( --primary-color ); content: ""; opacity: 0.5;  } #sources-list h2 span::before { right: calc( 100% + 10px );  } #sources-list h2 span::after { left: calc( 100% + 10px );  } #sources-list .center { text-align: center;  } #sources-list p { margin: 0 0 30px 0; font-size: 18px; color: #333333; line-height: 32px;  } #sources-list ol { display: block; margin: 0 0 30px 0; list-style: none;  } #sources-list ol::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #sources-list ol li { position: relative; display: block; padding: 0 0 0 20px; color: #333333; font-size: 18px; line-height: 32px;  } #sources-list ol li:last-child {  } #sources-list ol li::before { position: absolute; top: 13px; left: 0; width: 6px; height: 6px; border-radius: 50%; text-align: center; background-color: var( --secondary-color ); content: "";  } #sources-list a { color: var( --primary-color );  } #sources-list a:hover { color: var( --primary-color-lighter  );  } #sources-intro { position: relative; display: block; height: 0; margin: 0 auto 50px auto; padding: 0 0 25% 0; background-color: var( --tertiary-color ); background: url( ../images/web/sources/intro.jpg ) no-repeat center center / cover;  } #sources-intro::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: var( --primary-color-lighter ); content: ""; opacity: 0.5;  } #sources-intro::after { position: relative; width: 100%; height: 0; clear: both; content: "";  } #sources-intro header { position: absolute; top: 50%; left: 0; width: 100%; margin: 20px 0 0 0; padding: 0 20px 0 20px; transform: translate( 0, -50% );  } #sources-intro header h2 { margin: 0 0 10px 0; font-size: 58px; line-height: 100%; color: rgba( 255, 255, 255, 0.8 ); text-align: center; font-weight: bold;  } #sources-intro header p { margin: 0 0 10px 0; font-size: 22px; line-height: 130%; color: rgba( 255, 255, 255, 0.9 ); text-align: center;  } #pos-intro { position: relative; display: block; height: 0; margin: 0 auto 50px auto; padding: 0 0 25% 0; background-color: var( --tertiary-color ); background: url( ../images/web/pos/intro.jpg ) no-repeat center center / cover;  } #pos-intro::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: var( --primary-color-lighter ); content: ""; opacity: 0.5;  } #pos-intro::after { position: relative; width: 100%; height: 0; clear: both; content: "";  } #pos-intro header { position: absolute; top: 50%; left: 0; width: 100%; margin: 20px 0 0 0; padding: 0 20px 0 20px; transform: translate( 0, -50% );  } #pos-intro header h2 { margin: 0 0 10px 0; font-size: 58px; line-height: 100%; color: rgba( 255, 255, 255, 0.8 ); text-align: center; font-weight: bold;  } #pos-intro header p { margin: 0 0 10px 0; font-size: 22px; line-height: 130%; color: rgba( 255, 255, 255, 0.9 ); text-align: center;  } #pos-list { position: relative; display: block; margin: 0 auto 0 auto; padding: 0 0 100px 0;  } #pos-list::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #pos-list > div { max-width: 840px; margin: 0 auto 0 auto; padding: 0 20px 0 20px;  } #pos-list > div::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #pos-list ol { display: block; margin: 0 0 30px 0; list-style: none;  } #pos-list ol::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #pos-list ol li { position: relative; display: block; float: left; width: 33.33%; padding: 0 20px 0 20px; font-size: 18px; line-height: 32px;  } #pos-list a { position: relative; display: block; padding: 100px 0 20px 0; color: var( --primary-color ); box-shadow: 0 0 10px 0 rgba( 0, 0, 0, 0.2 ); text-align: center; border-radius: 10px; overflow: hidden;  } #pos-list a::before { position: absolute; top: 50%; left: 50%; width: 512px; height: 512px; display: block; margin: -15px 0 0 0; background: url( ../images/web/pos/placeholder.png ) no-repeat; content: ""; transition: all 0.25s; transform: translate( -50%, -50% ) scale( 0.08 );  } #pos-list a:hover { background-color: #f8f8fa; color: var( --primary-color-lighter  );  } #pos-list a:hover::before { margin: -25px 0 0 0;  } #shop-intro { position: relative; display: block; padding: 60px 20px 0 20px; margin: 0 auto 50px auto; background-color: var( --primary-color-lighter ); background: url( "../images/web/shop/intro.jpg" ) no-repeat center center / cover; height: 400px;  } #shop-intro::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: var( --primary-color-lighter ); content: ""; opacity: 0.5;  } #shop-intro::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-intro > div { position: relative; max-width: 1400px; height: 460px; margin: 0 auto 0 auto;  } #shop-intro aside { position: absolute; top: 50%; left: 0; transform: translate( 0, -50% );  } #shop-intro aside h2 { margin: 0 0 30px 0; font-size: 48px; line-height: 100%; color: rgba( 255, 255, 255, 0.8 ); font-weight: bold;  } #shop-intro aside p { margin: 0 0 30px 0; font-size: 28px; line-height: 150%; color: rgba( 255, 255, 255, 0.8 );  } #shop-intro aside .read { display: inline-block; margin: 0 20px 0 0; padding: 0 15px 0 15px; color: var( --primary-color ); background-color: var( --secondary-color ); line-height: 50px; border-radius: 5px; font-weight: bold; text-transform: uppercase; cursor: pointer;  } #shop-intro aside .read:hover { color: var( --primary-color-darker ); background-color: var( --secondary-color-lighter );  } #shop-intro aside .register { display: inline-block; padding: 0 15px 0 15px; color: var( --primary-color ); background-color: var( --secondary-color ); line-height: 50px; border-radius: 5px; font-weight: bold; text-transform: uppercase; cursor: pointer;  } #shop-intro aside .register:hover { color: var( --primary-color-darker ); background-color: var( --secondary-color-lighter );  } #shop-list {  } #shop-list::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-list > div { position: relative; max-width: 1400px; margin: 0 auto 0 auto;  } #shop-list > div::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-list ul { position: relative; display: block; max-width: 1400px; margin: 0 auto 0 auto; list-style: none;  } #shop-list ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-list ul li { display: block; float: left; width: 25%;  } #shop-list ul figure { margin: 0 10px 10px 10px; overflow: hidden; border-radius: 5px;  } #shop-list ul img { display: block; width: 100%;  } #shop-list ul footer { display: block; height: 140px;  } #shop-list ul h2 { margin: 0 0 10px 0; line-height: 20px; text-align: center; font-weight: bold; max-height: 40px; overflow: hidden;  } #shop-list ul h6 { margin: 0 0 10px 0; line-height: 20px; text-align: center;  } #shop-list ul h5 { display: block; width: 150px; margin: 0 auto 0 auto; text-align: center; border-radius: 5px; border: 2px solid var( --primary-color ); line-height: 40px; cursor: pointer; color: var( --primary-color ); transition: all ease-in-out 0.3s;  } #shop-list ul h5:hover { background-color: var( --primary-color ); color: #ffffff;  } #shop-view-details { margin: 0 0 20px 0; padding: 0 20px 0 20px;  } #shop-view-details::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-view-details > div { position: relative; max-width: 1400px; margin: 0 auto 0 auto; padding: 20px 0 0 0; border-top: 2px solid #f0f0f0;  } #shop-view-details > div::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-view-details > div label { display: block; margin: 0 0 5px 0; line-height: 100%; clear: both; font-weight: bold;  } #shop-view-details > div p { margin: 0 0 20px 0; padding: 0 0 20px 0; line-height: 20px; color: #454545; border-bottom: 1px solid #f0f0f0;  } #shop-view-details > div p:last-of-type { border-bottom: 0;  } #shop-view-general { margin: 0 0 20px 0; padding: 100px 20px 0 20px;  } #shop-view-general::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-view-general > div { position: relative; max-width: 1400px; margin: 0 auto 0 auto;  } #shop-view-general > div::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-view-general aside { position: relative; float: left; width: 50%; padding: 0 20px 0 0;  } #shop-view-general aside ul { position: relative; display: block; max-width: 1400px; margin: 0 auto 0 auto; list-style: none;  } #shop-view-general ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-view-general ul li { display: block;  } #shop-view-general ul figure { margin: 0 0 10px 0; overflow: hidden; border-radius: 5px;  } #shop-view-general ul img { display: block; width: 100%;  } #shop-view-general aside ol { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center;  } #shop-view-general aside ol li { display: inline-block; width: 50px; height: 50px; margin: 5px 5px 5px 5px; border-radius: 50%; overflow: hidden; cursor: pointer; box-shadow:  0 0 10px rgba( 127, 127, 127, 0.5 );  } #shop-view-general aside ol li img { display: block; width: 100%; height: 100%; object-fit: cover;  } #shop-view-general article { position: relative; float: left; width: 50%;  } #shop-view-general article h2 { margin: 0 0 10px 0; line-height: 20px; font-size: 20px; font-weight: bold; overflow: hidden;  } #shop-view-general article h3 { margin: 0 0 10px 0; line-height: 20px;  } #shop-view-general article p { margin: 0 0 30px 0; line-height: 20px;  } #shop-view-general article h6 { margin: 0 0 10px 0; line-height: 20px; font-weight: bold;  } #shop-view-general article h5 { display: block; margin: 0 auto 10px auto; text-align: center; border-radius: 5px; border: 2px solid var( --primary-color ); line-height: 46px; cursor: pointer; font-weight: bold; text-transform: uppercase; color: var( --primary-color ); transition: all ease-in-out 0.3s;  } #shop-view-general article h5:hover { background-color: var( --primary-color ); color: #ffffff;  } #shop-view-general article i { display: block; font-style: normal; opacity: 0.5; margin: 0 0 10px 0; line-height: 20px;  } #shop-view-general article .share { height: 40px; text-align: left;  } #shop-view-general article .share::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #shop-view-general article .share span { display: inline-block; height: 40px; margin: 0 5px 0 0; line-height: 40px; font-size: 14px; color: #333333; vertical-align: top;  } #shop-view-general article .share ul { display: inline-block; height: 40px; list-style: none;  } #shop-view-general article .share ul li { position: relative; display: block; float: left; width: 40px; height: 40px; margin: 0 0 0 0;  } #shop-view-general article .share ul li a { position: absolute; top: -30px; left: -30px; display: block; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat; transition: all ease-in-out 0.2s; opacity: 0.7; transform: scale( 0.4 ); cursor: pointer;  } #shop-view-general article .share ul li a:hover { opacity: 1; margin-top: -5px;  } #shop-view-general article .share ul .fb a { background-position: -500px -400px;  } #shop-view-general article .share ul .tw a { background-position: -700px -400px;  } #shop-view-general article .share ul .wu a { background-position: -1000px -400px;  } #shop-view-general article .share ul .link a { background-position: -1600px -500px;  } #shop-view-general article .share ul .link::before { position: absolute; top: 0; left: 50%; content: attr( data-message ); transform: translate( -50%, 0 ); font-size: 10px; color: #787878; transition: all ease-in-out 0.2s; white-space: nowrap; line-height: 40px; opacity: 0;  } #shop-view-general article .share ul .clicked::before { top: -20px; opacity: 1;  } #faq-intro { position: relative; display: block; height: 0; margin: 0 auto 50px auto; padding: 0 0 25% 0; background-color: var( --primary-color-lighter );  } #faq-intro:after { position: relative; width: 100%; height: 0; clear: both; content: "";  } #faq-intro header { position: absolute; top: 50%; left: 0; width: 100%; margin: 20px 0 0 0; padding: 0 20px 0 20px; transform: translate( 0, -50% );  } #faq-intro header h2 { margin: 0 0 10px 0; font-size: 58px; line-height: 100%; color: rgba( 255, 255, 255, 0.9 ); text-align: center; font-weight: bold;  } #faq-intro header p { margin: 0 0 10px 0; font-size: 22px; line-height: 120%; color: rgba( 255, 255, 255, 0.9 ); text-align: center;  } #faq-list { display: block; max-width: 800px; margin: 0 auto 50px auto; border-top: 1px solid #f0f0f0;  } #faq-list:after { display: block; width: 100%; height: 0; content: ""; clear: both;  } #faq-list p { margin: 0 auto 20px auto; font-size: 16px; color: #052030; line-height: 200%;  } #faq-list article { position: relative; display: block; padding: 0 0 0 20px; border-bottom: 1px solid #f0f0f0;  } #faq-list article > header { position: relative; display: block; padding: 15px 50px 15px 0; cursor: pointer;  } #faq-list article > header h2 { line-height: 20px; font-weight: bold; color: var( --primary-color );  } #faq-list article > header span { position: absolute; top: 50%; right: 0; width: 50px; height: 50px; margin: -25px 0 0 0;  } #faq-list article > header span::before,#faq-list article > header span::after { position: absolute; top: 23px; left: 15px; display: block; width: 20px; height: 4px; background-color: var( --primary-color ); content: ""; transition: all ease 0.1s;  } #faq-list article > header span::after { transform: rotate( 90deg );  } #faq-list article > div { position: relative; max-height: 1px; padding: 0 50px 0 0; overflow: hidden; transition: all ease 0.1s; opacity: 0;  } #faq-list .sel { background-color: #fafaff;  } #faq-list .sel > div { max-height: 2000px; transition: all ease 0.4s; opacity: 1;  } #faq-list .sel > header span::after { transform: rotate( 0 );  } #faq-list a { color: var( --secondary-color-darker ); cursor: pointer;  } #faq-list a:hover { color: var( --secondary-color-lighter );  } #press-intro { position: relative; display: block; height: 0; margin: 0 auto 30px auto; padding: 0 0 25% 0; background-color: var( --tertiary-color ); background: url( ../images/web/press/intro.jpg ) no-repeat center center / cover;  } #press-intro::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: var( --primary-color-lighter ); content: ""; opacity: 0.5;  } #press-intro::after { position: relative; width: 100%; height: 0; clear: both; content: "";  } #press-intro header { position: absolute; top: 50%; left: 0; width: 100%; margin: 20px 0 0 0; padding: 0 20px 0 20px; transform: translate( 0, -50% );  } #press-intro header h2 { margin: 0 0 10px 0; font-size: 58px; line-height: 100%; color: rgba( 255, 255, 255, 0.8 ); text-align: center; font-weight: bold;  } #press-intro header p { margin: 0 0 10px 0; font-size: 22px; line-height: 120%; color: rgba( 255, 255, 255, 0.9 ); text-align: center;  } #press-list { position: relative; display: block; margin: 0 auto 50px auto; padding: 0 0 50px 0; overflow: hidden;  } #press-list::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #press-list > div { position: relative; display: block; max-width: 840px; margin: 0 auto 0 auto; padding: 20px 20px 0 20px; overflow: hidden;  } #press-list > div::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #press-list > div ul { position: relative; display: block; padding: 0 0 0 0; list-style: none; clear: both;  } #press-list > div ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #press-list > div ul:first-child { margin: 0 0 20px 0;  } #press-list > div ul li { display: block; float: left; width: 50%; margin: 0 0 30px 0;  } #press-list > div ul li > div { position: relative; margin: 0 30px 0 0; padding: 0 0 20px 0; min-height: 400px; transition: all ease-in-out 0.2s; background-color: #ffffff; overflow: hidden; box-shadow: 0 0 15px 1px rgba( 0, 0, 0, 0.2 ); border-radius: 5px;  } #press-list > div ul figure { position: relative; display: block; height: 0; margin: 0 0 20px 0; padding: 0 0 60% 0; overflow: hidden; transition: all ease-in-out 0.2s; border-bottom: 1px solid rgba( 62, 98, 112, 0.1 );  } #press-list > div ul figure img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; transition: all ease-in-out 0.2s; object-fit: cover;  } #press-list > div ul figure:hover img { transform: scale( 1.1 );  } #press-list > div ul h2 { margin: 0 20px 5px 20px; font-size: 16px; line-height: 26px; color: var( --primary-color ); font-weight: bold; transition: color ease-in-out 0.2s;  } #press-list > div ul h2:hover { color: #e67302;  } #press-list > div ul time { display: block; margin: 0 0 10px 20px; color: rgba( 127, 127, 127, 1 ); text-transform: uppercase; font-size: 12px;  } #press-list > div ul p { height: 50px; padding: 0 20px 0 20px; font-size: 14px; line-height: 24px; color: #87878d; overflow: hidden; transition: color ease-in-out 0.2s;  } #press-list nav { max-width: 800px; margin: 0 auto 0 auto;  } #press-list nav ol { display: block; list-style: none; text-align: center;  } #press-list nav ol li { display: inline-block; width: 40px; height: 40px; margin: 0 5px 0 5px; border-radius: 5px; overflow: hidden;  } #press-list nav ol li a { display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; background-color: var( --primary-color ); color: #ffffff;  } #press-list nav ol a:hover { background-color: var( --secondary-color-lighter );  } #press-list nav ol .sel a { background-color: var( --secondary-color );  } #press-post { position: relative; display: block; min-height: 100vh; margin: 0 0 0 0;  } #press-post::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #press-post > div { max-width: 1200px; margin: 0 auto 0 auto; padding: 0 0 0 0; border-left: 20px solid var( --secondary-color-lighter );  } #press-post > div::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #press-post article { float: left; width: calc( 100% - 400px ); margin: 0 0 0 0; padding: 110px 50px 0 20px; box-shadow: 5px -10px 10px 0 rgba( 127, 127, 127, 0.1 );  } #press-post article > header { position: relative; margin: 0 0 10px 0;  } #press-post article > header::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #press-post article > header time { width: 100%; margin: 0 0 20px 0; text-align: center; color: var( --primary-color ); font-size: 14px; line-height: 100%; text-transform: uppercase;  } #press-post article > header h1 { margin: 0 0 10px 0; padding: 0 0 0 0; text-align: left; color: #000000; font-size: 36px; line-height: 46px; font-weight: bold;  } #press-post article > header ul { display: block; margin: 0 0 0 -10px; list-style: none; text-align: left;  } #press-post article > header ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #press-post article > header ul li { position: relative; display: inline-block; width: 40px; height: 40px; margin: 0 0 0 0; overflow: hidden; border-radius: 50%;  } #press-post article > header ul li::before { position: absolute; top: -30px; left: -30px; display: block; width: 100px; height: 100px; content: ""; background: url( "../images/web/web.png" ) no-repeat; opacity: 0.8; transform: scale( 0.4 );  } #press-post article > header ul li:hover::before { opacity: 1;  } #press-post article > header ul .fb::before { background-position: -500px -400px;  } #press-post article > header ul .tw::before { background-position: -700px -400px;  } #press-post article > header ul .wu::before { background-position: -1000px -400px;  } #press-post article > header ul li a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;  } #press-post article > header figure { position: relative; margin: 0 0 20px 0; padding: 0 0 0 0;  } #press-post article > header figure::before { position: absolute; bottom: -20px; right: -20px; width: 200px; height: 200px; background-color: var( --secondary-color-lighter ); content: "";  } #press-post article > header figure img { position: relative; z-index: 1; display: block; width: 100%;  } #press-post article > div { padding: 0 0 20px 0; color: #333333; font-size: 16px; line-height: 26px;  } #press-post article > div p { clear: both; margin: 0 0 20px 0; color: #333333; font-size: 16px; line-height: 26px;  } #press-post article > div ul,#press-post article > div ol { list-style-position: inside;  } #press-post aside { float: left; width: 400px; padding: 110px 20px 0 50px;  } #press-post aside h3 { margin: 0 0 30px 0; padding: 0 0 0 20px; border-left: 2px solid var( --secondary-color-lighter ); font-weight: bold; line-height: 100%; color: #333333;  } #press-post aside h3 a { display: block; text-transform: uppercase; font-size: 16px; line-height: 100%;  } #press-post aside h3 a:hover { color: var( --secondary-color );  } #press-post aside ul { position: relative; display: block; padding: 0 0 0 0; list-style: none; clear: both;  } #press-post aside ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #press-post aside ul li { position: relative; display: block; margin: 0 0 30px 0; padding: 0 0 30px 0;  } #press-post aside ul figure { position: relative; display: block; height: 0; margin: 0 0 20px 0; padding: 0 0 60% 0; transition: all ease-in-out 0.2s; overflow: hidden;  } #press-post aside ul li::before { position: absolute; top: -10px; right: -10px; width: 100px; height: 100px; border-style: solid; border-width: 2px 2px 0 0; border-color: var( --secondary-color-lighter ); content: "";  } #press-post aside ul li::after {  } #press-post aside ul figure img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; transition: all ease-in-out 0.2s; object-fit: cover;  } #press-post aside ul figure:hover img { transform: scale( 1.1 );  } #press-post aside ul footer { position: relative; padding: 0 0 20px 20px; border-left: 2px solid var( --secondary-color-lighter );  } #press-post aside ul footer::after { position: absolute; bottom: 0; left: 0; width: 100px; height: 2px; background-color: var( --secondary-color-lighter ); content: "";  } #press-post aside ul h2 { margin: 0 0 10px 0; font-size: 16px; line-height: 26px; color: var( --primary-color ); font-weight: bold; transition: color ease-in-out 0.2s;  } #press-post aside ul h2:hover { color: #e67302;  } #press-post aside ul time { display: block; margin: 0 0 0 0; color: rgba( 30, 30, 30, 1 ); text-transform: uppercase; font-size: 11px;  } #press-post aside ul p { font-size: 14px; line-height: 24px; color: #67676d; transition: color ease-in-out 0.2s;  } #press-post aside .join { margin: 0 0 20px 0;  } #press-post aside .join figure { display: block; overflow: hidden;  } #press-post aside .join figure img { display: block; width: 100%;  } #press-post aside .join p { padding: 20px; background-color: var( --primary-color ); color: #ffffff; font-size: 16px; line-height: 26px;  } #cart .billing { position: absolute; z-index: 10; top: 0; left: 0; display: block; width: 100%; height: calc( 100% - 230px ); padding: 81px 0 0 0; overflow: auto;  } #cart .billing > p { margin: 0 20px 20px 20px; padding: 0 0 20px 0; font-size: 14px; color: #343434; line-height: 24px; border-bottom: 1px dotted #e0e0e0;  } #cart .billing > i { display: block; margin: 0 20px 20px 20px; padding: 0 0 20px 0; font-size: 13px; color: #343434; line-height: 13px; font-style: normal;  } #cart .billing fieldset { position: relative; margin: 0 20px 20px 20px;  } #cart .billing fieldset::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #cart .billing .half { float: left; width: 50%;  } #cart .billing .half:first-child { padding: 0 10px 0 0;  } #cart .billing .half:last-child { padding: 0 0 0 10px;  } #cart .billing label { display: block; margin: 0 0 10px 0; color: #232323; width: 100%; line-height: 12px;  } #cart .billing input,#cart .billing textarea { display: block; width: 100%; height: 48px; padding: 0 10px 0 10px; border-radius: 5px; border: 1px solid #14110f;  } #cart .billing textarea { height: 150px; padding: 10px 10px 10px 10px; resize: none;  } #cart-mask {  } #cart { position: fixed; z-index: 11; top: 0; right: -600px; width: 600px; height: 100%; overflow: hidden; background-color: #ffffff; box-shadow: 0 0 20px 0 rgba( 0, 0, 0, 0.2 ); transition: all .25s ease-in-out; opacity: 0;  } #cart.active { right: 0; opacity: 1;  } #cart footer { position: absolute; z-index: 11; bottom: 0; left: 0; display: block; width: 100%; padding: 10px 0 20px 0; background-color: #fafafa;  } #cart footer .single { display: block; margin: 0 20px 0 20px; line-height: 46px; border: 2px solid var( --primary-color ); color: var( --primary-color ); text-align: center; cursor: pointer; border-radius: 5px; font-size: 14px; transition: all .25s ease-in-out; font-weight: bold; text-transform: uppercase;  } #cart footer .single:hover { background-color: var( --primary-color ); color: #ffffff;  } #cart footer ul { display: block; margin: 0 20px 20px 20px; list-style: none;  } #cart footer ul::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #cart footer ul li { display: block; height: 31px; border-bottom: 1px solid #f0f0f0;  } #cart footer ul li label { float: left; line-height: 30px;  } #cart footer ul li span { float: right; line-height: 30px;  } #cart footer ul li:last-child { height: 30px; font-weight: bold; border-bottom: 0;  } #cart header { position: absolute; z-index: 11; top: 0; left: 0; display: block; width: 100%; height: 50px; padding: 0 20px 0 20px; background-color: var( --primary-color ); line-height: 50px;  } #cart header h2 { line-height: 50px; font-weight: bold; color: rgba( 255, 255, 255, 0.9 );  } #cart header.center h2 { text-align: center;  } #cart header .back { position: absolute; top: 0; left: 20px; width: 50px; height: 50px; cursor: pointer;  } #cart header .back::before { position: absolute; top: 24px; left: 0; display: block; width: 18px; height: 2px; background-color: #ffffff; content: "";  } #cart header .back::after { position: absolute; top: 18px; left: 0; display: block; width: 14px; height: 14px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; content: ""; transform: rotate( 45deg );  } #cart header .close { position: absolute; top: 0; right: 26px; width: 50px; height: 50px; cursor: pointer; transition: all .25s ease-in-out;  } #cart header .close::before { position: absolute; top: 24px; right: 0; display: block; width: 18px; height: 2px; background-color: #ffffff; content: ""; transition: all .25s ease-in-out;  } #cart header .close:hover::before { right: 0; transform: rotate( -45deg ); background-color: #ee2323;  } #cart header .close::after { position: absolute; top: 18px; right: 0; display: block; width: 14px; height: 14px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; content: ""; transform: rotate( 45deg ); transition: all .25s ease-in-out; overflow: hidden;  } #cart header .close:hover::after { top: 24px; width: 18px; height: 2px; border-top: 2px solid #ee2323; border-right: 0;  } #cart .items { position: absolute; z-index: 10; top: 0; left: 0; display: block; width: 100%; height: calc( 100% - 200px ); padding: 51px 0 0 0; overflow: auto;  } #cart .items article { position: relative; display: block; height: 134px; clear: both; overflow: hidden; margin: 0 0 0 0; padding: 20px 160px 20px 130px; border-bottom: 1px dotted rgba( 0, 0, 0, 0.2 );  } #cart .items article::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #cart .items article figure { position: absolute; top: 20px; left: 20px; display: block; width: 90px; height: 90px; border-radius: 5px; overflow: hidden; cursor: pointer; background-color: #aaaaaa;  } #cart .items article img { display: block; width: 100%; height: 100%; opacity: 0.9;  } #cart .items article h2 { max-height: 40px; overflow: hidden; margin: 0 0 5px 0; clear: both; line-height: 20px; font-weight: normal; color: rgba( 0, 0, 0, 0.9 ); text-transform: lowercase;  } #cart .items article h5 { margin: 0 0 10px 0; line-height: 14px; color: rgba( 0, 0, 0, 0.7 );  } #cart .items article .qty { position: absolute; bottom: 20px; right: 20px; display: block; float: left; width: 100px; height: 30px; padding: 0 30px 0 30px; margin: 0 0 0 0;  } #cart .items article .qty input { display: block; width: 100%; height: 30px; line-height: 30px; text-align: center; background-color: transparent; font-weight: bold; font-size: 16px; color: rgba( 0, 0, 0, 0.8 );  } #cart .items article .qty span { position: absolute; top: 0; display: block; width: 30px; height: 30px; cursor: pointer; border-radius: 50%; border: 1px solid var( --primary-color );  } #cart .items article .qty span:active { background-color: rgba( 0, 0, 0, 0.2 );  } #cart .items article .qty .up { right: 0; background-color: var( --primary-color );  } #cart .items article .qty .down { left: 0;  } #cart .items article .qty span::before,#cart .items article .qty span::after { position: absolute; top: 13px; left: 8px; display: block; width: 12px; height: 2px; background-color: var( --primary-color ); content: "";  } #cart .items article .qty .up::after { transform: rotate( 90deg );  } #cart .items article .qty .up::before,#cart .items article .qty .up::after { background-color: #ffffff;  } #cart .items article h6 { position: relative; height: 20px; font-weight: bold; line-height: 20px;  } #cart .items article h6 span { position: relative; float: left; line-height: 20px; overflow: hidden; font-size: 18px; color: rgba( 0, 0, 0, 0.8 );  } #cart .items article h6 span::after {  } #cart .items article h6 sub {  } #cart .items article h6 i { position: relative; float: left; line-height: 20px; margin: 0 0 0 20px; padding: 0 5px 0 5px; overflow: hidden; font-size: 16px; color: rgba( 0, 0, 0, 0.8 ); font-style: normal; font-weight: normal;  } #cart .items article h6 i::after { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 1px; margin: -1px 0 0 0; background-color: rgba( 0, 0, 0, 0.8 ); content: "";  } #cart .items article .remove { position: absolute; top: 20px; right: 15px; width: 40px; height: 40px; cursor: pointer;  } #cart .items article .remove::before,#cart .items article .remove::after { position: absolute; top: 19px; left: 12px; display: block; width: 16px; height: 2px; background-color: #787878; content: "";  } #cart .items article .remove::before { transform: rotate( 45deg );  } #cart .items article .remove::after { transform: rotate( -45deg );  } #cart .items article .remove:hover::before,#cart .items article .remove:hover::after,#cart .items article .remove:active::before,#cart .items article .remove:active::after { background-color: #aa2323;  } #cart-notification { position: fixed; z-index: 12; left: 0; bottom: -80px; width: 100%; min-height: 60px; padding: 20px; background-color: var( --primary-color ); opacity: 0; transition: all .25s ease-in-out;  } #cart-notification.active { bottom: 0; opacity: 1;  } #cart-notification .cart { position: absolute; top: 10px; right: 60px; width: 40px; height: 40px; overflow: hidden; cursor: pointer;  } #cart-notification .cart::after { position: absolute; top: -30px; left: -30px; width: 100px; height: 100px; content: ""; background: url( "../images/web/web.png?1" ) no-repeat -2600px -200px; transform: scale( 0.6 );  } #cart-notification .close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; overflow: hidden; cursor: pointer;  } #cart-notification .close::before { position: absolute; top: 10px; left: 19px; display: block; width: 2px; height: 20px; background-color: #ffffff; content: "";  } #cart-notification .close::after { position: absolute; top: 14px; left: 13px; display: block; width: 14px; height: 14px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; content: ""; transform: rotate( -45deg );  } #cart-notification p { line-height: 20px; color: #ffffff;  } #cart .payment-selection {  } #cart .payment-selection ul { display: block; list-style: none; clear: both; width: 380px; margin: 0 10px 0 10px;  } #cart .payment-selection ul:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #cart .payment-selection li { position: relative; float: left; display: block; width: 50%; height: 120px; margin: 0 0 20px 0;  } #cart .payment-selection li:after { position: absolute; bottom: 15px; left: 50%; display: block; width: 300px; max-width: 200%; height: 100px; background: url( "../images/web/shopping.png" ) no-repeat; content: ""; transform: translate( -50%, 0 ) scale( 0.5 ); cursor: pointer;  } #cart .payment-selection .cash:after { background-position: 0 -700px;  } #cart .payment-selection .bank:after { background-position: -300px -600px;  } #cart .payment-selection .paypal:after { background-position: 0 -500px;  } #cart .payment-selection .openpay:after { background-position: -300px -500px;  } #cart .payment-selection .card:after { background-position: 0 -600px;  } #cart .payment-selection li > div { position: relative; height: 120px; margin: 0 10px 0 10px; background-color: #fafafa; border: 2px solid #e6e6e6; border-radius: 5px; cursor: pointer; filter: grayscale( 100% );  } #cart .payment-selection h3 { position: absolute; bottom: 10px; left: 0; display: block; width: 100%; font-size: 10px; color: #808080; font-weight: bold; text-align: center; text-transform: uppercase;  } #cart .payment-selection .sel > div { border: 2px solid #5b5e8f; filter: none;  } #cart .payment-selection .sel > div:before { position: absolute; top: -15px; right: -15px; display: block; width: 30px; height: 30px; background-color: #fafafa; border: 2px solid #5b5e8f; border-radius: 50%; content: "";  } #cart .payment-selection .sel > div:after { position: absolute; top: -5px; right: -2px; display: block; width: 5px; height: 10px; border-right: 2px solid #5b5e8f; border-bottom: 2px solid #5b5e8f; content: ""; transform: rotate( 45deg );  } #cart .shipping { position: absolute; z-index: 10; top: 0; left: 0; display: block; width: 100%; height: calc( 100% - 230px ); padding: 81px 0 0 0; overflow: auto;  } #cart .shipping > p { margin: 0 20px 20px 20px; padding: 0 0 20px 0; font-size: 14px; color: #343434; line-height: 24px; border-bottom: 1px dotted #353535;  } #cart .shipping fieldset { position: relative; margin: 0 20px 20px 20px;  } #cart .shipping fieldset::after { display: block; width: 100%; height: 0; clear: both; content: "";  } #cart .shipping label { display: block; margin: 0 0 10px 0; color: #232323; width: 100%; line-height: 12px;  } #cart .shipping input { display: block; width: 100%; height: 48px; padding: 0 10px 0 10px; border-radius: 5px; border: 1px solid #14110f;  } #cart .shipping .or { position: relative; display: block; width: 70px; height: 70px; margin: 50px auto 50px auto; border-radius: 50%; border: 1px solid #14110f; line-height: 68px; text-align: center; font-size: 16px;  } #cart .shipping .or::before,#cart .shipping .or::after { position: absolute; left: 34px; display: block; width: 2px; height: 14px; background-color: #14110f; content: "";  } #cart .shipping .or::before { top: -30px; transform: rotate( 45deg ); transform-origin: 1px 65px;  } #cart .shipping .or::after { bottom: -30px; transform: rotate( 45deg ); transform-origin: 1px -51px;  } #my-websites { position: fixed; z-index: 9; top: 60px; left: 0; display: none; width: 100%; height: calc( 100% - 61px ); background-color: #f5f5f5;  } #my-websites header { position: relative; height: 81px; max-width: 1400px; margin: 0 auto 10px auto; padding: 20px 60px 0 60px; border-bottom: 1px solid rgba( 127, 127, 127, 0.2 );  } #my-websites header .actions { position: absolute; top: 20px; left: 10px; display: block; width: 40px; height: 40px; margin: 0 0 0 0; cursor: pointer; border-radius: 50%; background-color: var( --primary-color );  } #my-websites header .actions:hover { background-color: var( --primary-color-light );  } #my-websites header .actions:before { position: absolute; top: -30px; left: -30px; display: block; width: 100px; height: 100px; background: url( "../images/web/web.png" ) no-repeat -300px -200px; content: ""; transform: scale( 0.4 );  } #my-websites header ol { z-index: 8; position: absolute; display: none; top: 51px; left: 0; width: 180px; padding: 0 0 0 0; list-style: none; border-radius: 5px; background-color: var( --primary-color-lighter ); border: 1px solid var( --primary-color-light );  } #my-websites header ol li { position: relative; display: block; padding: 0 20px 0 20px; margin: 0; height: 40px; line-height: 40px; color: #eeeeee; background-color: var( --primary-color-lighter ); word-break: keep-all; white-space: nowrap; text-transform: none; font-weight: bold; border-bottom: 1px solid var( --primary-color-light );  } #my-websites header ol li:hover { background-color: var( --primary-color-light );  } #my-websites header ol li:first-child { border-radius: 5px 5px 0 0;  } #my-websites header ol li:last-child { border-bottom: 0; border-radius: 0 0 5px 5px;  } #my-websites header ol li:first-child:after { position: absolute; top: -5px; left: 15px; display: block; width: 10px; height: 10px; border-top: 1px solid var( --primary-color-light ); border-left: 1px solid var( --primary-color-light ); transform: rotate( 45deg ); background-color: var( --primary-color-lighter ); content: "";  } #my-websites header ol li:first-child:hover:after { background-color: var( --primary-color-light );  } #my-websites header .filter { position: relative; display: block; float: right; height: 40px; max-width: 500px; width: 100%; padding: 0 180px 0 0; border: 2px solid var( --primary-color ); border-radius: 25px;  } #my-websites header .filter .select { position: absolute; top: 0; right: 0; width: 180px; height: 36px; border-width: 0 0 0 2px; border-radius: 0; border-color: var( --primary-color ); line-height: 36px;  } #my-websites header .filter .select:after { line-height: 36px; border-right: 0;  } #my-websites header .filter .select:before { top: 9px; border-color: var( --primary-color ); opacity: 0.5;  } #my-websites header .filter .select select { height: 36px;  } #my-websites header input { display: block; width: 100%; height: 36px; padding: 0 10px 0 10px; background-color: transparent;  } #my-websites header .create { position: absolute; top: 20px; right: 10px; display: block; width: 40px; height: 40px; background-color: var( --secondary-color ); overflow: hidden; border-radius: 50%; cursor: pointer;  } #my-websites header .create:before,#my-websites header .create:after { position: absolute; display: block; content: ""; background-color: #ffffff;  } #my-websites header .create:before { top: 19px; left: 10px; width: 20px; height: 2px;  } #my-websites header .create:after { top: 10px; left: 19px; width: 2px; height: 20px;  } #my-websites header .create:hover { background-color: var( --secondary-color-light );  } #my-websites section { position: relative; top: 0; left: 0; height: 100%; padding: 0 0 10px 0; overflow: auto;  } #my-websites section:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #my-websites section .labels { position: relative; display: block; height: 50px; max-width: 1400px; margin: 0 auto 10px auto; padding: 0 0 0 120px;  } #my-websites section .labels .cb,#my-websites section .labels .cbs { position: absolute; top: 15px; left: 20px;  } #my-websites section .labels label { position: relative; float: left; width: 25%; line-height: 50px; color: rgba( 127, 127, 127, 0.8 ); cursor: pointer;  } #my-websites section .labels label i { position: relative; display: block; float: left; padding: 0 20px 0 0; line-height: 50px; font-style: normal;  } #my-websites section .labels label i:after { position: absolute; top: 20px; right: 0px; display: none; content: ""; width: 8px; height: 8px; border-right: 1px solid #98a6ae; border-bottom: 1px solid #98a6ae;  } #my-websites section .labels .asc i:after { top: 24px; display: block; transform: rotate( -135deg );  } #my-websites section .labels .desc i:after { display: block; transform: rotate( 45deg );  } #my-websites section .labels .hide-sma {  } #my-websites section article { position: relative; height: 82px; max-width: 1400px; margin: 0 auto 10px auto; padding: 20px 0 0 120px; background-color: #ffffff; border-radius: 5px; border: 1px solid rgba( 127, 127, 127, 0.2 );  } #my-websites section article:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #my-websites section article > div { float: left; width: 25%;  } #my-websites section article footer { float: left; width: 50%;  } #my-websites section article footer > div { float: left; width: 50%;  } #my-websites section article .cb,#my-websites section article .cbs { position: absolute; top: 30px; left: 20px;  } #my-websites section article figure { position: absolute; top: 15px; left: 55px; width: 50px; height: 50px; overflow: hidden; border: 1px solid #f5f5f5; border-radius: 50%; cursor: pointer;  } #my-websites section article figure img { display: block; width: 100%;  } #my-websites section article h3 { float: left; width: 25%; height: 40px;  } #my-websites section article h3 span { display: block; line-height: 20px; font-weight: bold; color: #303f5f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  } #my-websites section article h3 a { display: block; line-height: 20px; color: #808faf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  } #my-websites section article .on,#my-websites section article .off { display: block; margin: 12px 0 0 0;  } #my-websites section article .likes {  } #my-websites section article .likes span,#my-websites section article .likes i { line-height: 40px; font-weight: bold; font-style: normal; color: var( --primary-color );  } #my-websites section article .active,#my-websites section article .inactive { position: relative; display: block; width: 16px; height: 16px; margin: 12px 0 0 0; border-radius: 50%;  } #my-websites section article .active { background-color: #6ac259;  } #my-websites section article .inactive { background-color: #fea931;  } #my-websites section article .edit { position: absolute; top: 15px; right: 0; display: block; width: 50px; height: 50px; cursor: pointer; opacity: 0.5;  } #my-websites section article .edit:hover { opacity: 1;  } #my-websites section article .edit:before { position: absolute; top: -25px; left: -25px; display: block; width: 100px; height: 100px; background: url( "../images/web/web.png" ) -200px -300px; content: ""; transform: scale( 0.5 );  } #my-websites section nav { min-height: 30px; max-width: 1400px; margin: 0 auto 0 auto;  } #my-websites section nav:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #my-websites section nav div { float: left;  } #my-websites section nav span,#my-websites section nav a { display: block; float: left; min-width: 30px; height: 30px; margin: 0 10px 0 0; padding: 0 5px 0 5px; line-height: 28px; text-align: center; background-color: #ffffff; color: #334455; font-size: 14px; border-radius: 5px; font-weight: bold; border: 1px solid rgba( 127, 127, 127, 0.2 );  } #my-websites section nav span { background-color: var( --primary-color ); color: #ffffff;  } #my-websites section nav a {  } #my-websites section nav h4 { float: right; line-height: 40px; font-weight: bold; color: var( --primary-color );  } #my-websites-form aside { position: absolute; z-index: 8; top: 0; left: 0; width: 300px; height: 100%; background-color: #18347a;  } #my-websites-form aside header { display: block; height: 120px; padding: 40px 0 0 43px; opacity: 0.8; cursor: pointer; border-bottom: 1px dotted #38549a;  } #my-websites-form aside header:hover { background-color: #28448a; opacity: 1; border-bottom: 1px dotted #28448a;  } #my-websites-form aside header span { position: relative; display: block; float: left; width: 40px; height: 40px; margin: 0 0 0 0; background: linear-gradient( to right, transparent 10px, #ffffff 10px, #ffffff 30px, transparent 30px ) 0 19px repeat-x; background-size: 40px 2px; box-shadow: 0 0 0 2px #ffffff; border-radius: 50%;  } #my-websites-form aside header span:before,#my-websites-form aside header span:after { position: absolute; top: 19px; left: 10px; display: block; width: 10px; height: 2px; background-color: #ffffff; content: ""; transform-origin: 0 0;  } #my-websites-form aside header span:before { transform: rotate( 40deg );  } #my-websites-form aside header span:after { transform: rotate( -40deg );  } #my-websites-form aside header h6 { position: absolute; top: 40px; left: 100px; line-height: 40px; color: #ffffff; opacity: 0.8; font-size: 16px; text-transform: uppercase;  } #my-websites-form aside nav { position: absolute; top: 50%; left: 0; display: block; width: 100%; margin: 40px 0 0 0; overflow: hidden; transform: translate( 0, -50% );  } #my-websites-form aside nav span { position: relative; display: block; height: 80px; margin: 0 0 0 0; padding: 0 0 0 90px; line-height: 80px; color: #a4a8c1; font-weight: bold; cursor: pointer;  } #my-websites-form aside nav span:hover { color: #ffffff;  } #my-websites-form aside nav i { font-style: normal;  } #my-websites-form aside nav span:before { position: absolute; z-index: 13; top: 27px; left: 50px; width: 26px; height: 26px; display: block; background-color: #08244a; border-radius: 50%; content: attr( data-label ); text-align: center; font-size: 12px; line-height: 26px; color: #a4a8c1; font-weight: bold;  } #my-websites-form aside nav span:after { position: absolute; z-index: 12; left: 62px; bottom: 50px; display: block; width: 2px; height: 60px; background-color: #08244a; content: "";  } #my-websites-form aside nav span:first-child:after { display: none;  } #my-websites-form aside nav .done:before { background-color: #6ac259; color: #ffffff;  } #my-websites-form aside nav .done:after { background-color: #6ac259;  } #my-websites-form aside nav .sel:before { top: 22px; left: 45px; width: 36px; height: 36px; background-color: #ffffff; border: 5px solid #08244a; color: #08244a; font-size: 14px;  } #my-websites-form { position: fixed; z-index: 12; display: none; top: 0; left: 0; width: 100%; height: 100%; padding: 0 0 0 300px; background-color: #ffffff; transition: all .25s ease-in-out;  } #my-websites-form:after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #my-websites-form section { position: absolute; top: 50%; left: 50%; display: block; max-width: 600px; width: 100%; overflow: hidden; border-radius: 3px; transform: translate( -50%, -50% );  } #my-websites-form article > header { position: relative; display: block; max-width: 600px; margin: 0 auto 20px auto; padding: 0 0 20px 0; border-bottom: 1px solid #f0f0f0;  } #my-websites-form article > header h2 { margin: 0 0 10px 0; font-size: 22px; line-height: 40px; color: #545871; font-weight: bold; text-transform: uppercase;  } #my-websites-form article > header p { margin: 0 0 0 0; font-size: 14px; line-height: 20px; color: #333333; overflow: hidden;  } #my-websites-form article { position: relative; display: block; max-height: calc( 100vh ); margin: 0 0 0 0; padding: 20px 20px 0 20px;; font-size: 16px; overflow: auto;  } #my-websites-form article:after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #my-websites-form .visible { display: block;  } #my-websites-form .hidden { display: none;  } #my-websites-form .uppercase { text-transform: uppercase;  } #my-websites-form .with-tabs article { max-height: calc( 100vh - 184px );  } #my-websites-form article .download { position: relative; display: block; height: 44px; padding: 10px 10px 10px 40px; border-radius: 5px; line-height: 20px; color: var( --primary-color ); background-color: #f5f5f5; border: 2px solid #f0f0f0;  } #my-websites-form article .download::before,#my-websites-form article .download::after { position: absolute; display: block; content: "";  } #my-websites-form article .download::before { top: 12px; left: 19px; width: 2px; height: 16px; background-color: #565656;  } #my-websites-form article .download::after { top: 18px; left: 15px; width: 10px; height: 10px; border-color: #565656; border-style: solid; border-width: 0 2px 2px 0; transform: rotate( 45deg );  } #my-websites-form article p,#my-websites-form article em { display: block; margin: 0 0 20px 0; clear: both; color: #707070; font-size: 14px; line-height: 150%; text-align: justify; font-style: normal;  } #my-websites-form article fieldset em { overflow: hidden; max-height: 0; transition: all .25s ease-in-out;  } #my-websites-form article .info em { max-height: 500px;  } #my-websites-form label { position: relative; display: block; height: 20px; margin: 0 0 5px 0; clear: both; line-height: 100%; color: #9da3a8; color: #454a4f; font-size: 14px; line-height: 20px; font-weight: bold; cursor: pointer;  } #my-websites-form label:after { position: absolute; top: 0; right: 0; width: 20px; height: 20px; border: 1px solid #dddddd; line-height: 18px; text-align: center; border-radius: 50%; color: #dddddd; content: "i"; font-size: 12px; box-sizing: border-box; transition: all .25s ease-in-out;  } #my-websites-form .info label:after { color: #ffffff; background-color: #18347a; border: 1px solid #18347a;  } #my-websites-form .label-inline { display: inline-block; padding: 0 0 0 20px; line-height: 16px; vertical-align: middle;  } #my-websites-form .simple:after,#my-websites-form .label-inline:after { display: none;  } #my-websites-form fieldset { position: relative; display: block; max-width: 600px; margin: 0 auto 30px auto; clear: both;  } #my-websites-form  fieldset:after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #my-websites-form .separator { display: block; width: 100%; height: 2px; margin: 0 0 28px 0; background: repeating-linear-gradient( 90deg, #e0e0e0, #e0e0e0 2px, #ffffff 2px, #ffffff 4px ); clear: both;  } #my-websites-form .location { position: relative; margin: 0 0 50px 0;  } #my-websites-form .location:after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #my-websites-form .location header { position: relative; max-width: 600px; height: 60px; margin: 0 auto 0 auto; padding: 0 20px 0 40px;  } #my-websites-form .location header .actions { position: absolute; top: 10px; left: 40px; display: block; width: 40px; height: 40px; cursor: pointer; background-color: #f5f5f5; border-radius: 50%;  } #my-websites-form .location header .actions:hover { background-color: #f0f0f0;  } #my-websites-form .location header .actions:before { position: absolute; top: 0px; left: 0px; display: block; width: 40px; height: 40px; background: url( "../images/web/web.png" ) no-repeat -330px -330px; content: ""; opacity: 0.5; transform: scale( 0.5 );  } #my-websites-form .location header .label { float: right; width: 25%; line-height: 60px; color: #666666; font-size: 12px; text-transform: uppercase;  } #my-websites-form .location header ol { z-index: 8; position: absolute; display: none; top: 51px; left: 0; width: 180px; padding: 0 0 0 0; list-style: none; border-radius: 5px; background-color: var( --primary-color-lighter ); border: 1px solid var( --primary-color-light );  } #my-websites-form .location header ol li { position: relative; display: block; padding: 0 20px 0 20px; margin: 0; height: 40px; line-height: 40px; color: #eeeeee; background-color: var( --primary-color-lighter ); word-break: keep-all; white-space: nowrap; text-transform: none; font-weight: bold; border-bottom: 1px solid var( --primary-color-light );  } #my-websites-form .location header ol li:hover { background-color: var( --primary-color-light );  } #my-websites-form .location header ol li:first-child { border-radius: 5px 5px 0 0;  } #my-websites-form .location header ol li:last-child { border-bottom: 0; border-radius: 0 0 5px 5px;  } #my-websites-form .location header ol li:first-child:after { position: absolute; top: -5px; left: 15px; display: block; width: 10px; height: 10px; border-top: 1px solid var( --primary-color-light ); border-left: 1px solid var( --primary-color-light ); transform: rotate( 45deg ); background-color: var( --primary-color-lighter ); content: "";  } #my-websites-form .location header ol li:first-child:hover:after { background-color: var( --primary-color-light );  } #my-websites-form .location fieldset { min-height: 61px; margin: 0 auto 0 auto; min-height: 61px; padding: 10px 20px 10px 40px; border-top: 1px solid #f5f5f5;  } #my-websites-form .location .cb,#my-websites-form .location .cbs { position: absolute; top: 20px; left: 0;  } #my-websites-form .location .on,#my-websites-form .location .off { display: block; margin: 12px 0 0 0;  } #my-websites-form .location fieldset > .col { position: relative; float: left; width: 25%; height: 40px;  } #my-websites-form .location fieldset > .col:first-child { width: 50%;  } #my-websites-form .location h4 { line-height: 20px; font-weight: bold; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  } #my-websites-form .location p { line-height: 20px; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  } #my-websites-form .location .edit { position: absolute; top: 5px; right: -10px; display: block; width: 50px; height: 50px; cursor: pointer; opacity: 0.5;  } #my-websites-form .location .edit:hover { opacity: 1;  } #my-websites-form .location .edit:before { position: absolute; top: -25px; left: -25px; display: block; width: 100px; height: 100px; background: url( "../images/web/web.png" ) -200px -300px; content: ""; transform: scale( 0.5 );  } #my-websites-form .location .active,#my-websites-form .location .inactive { position: relative; display: block; width: 16px; height: 16px; margin: 12px 0 0 0; border-radius: 50%;  } #my-websites-form .location .active { background-color: #6ac259;  } #my-websites-form .location .inactive { background-color: #fea931;  } #my-websites-form .worldwide { display: block; width: 120px; margin: 0 auto 50px auto; opacity: 0.5;  } #my-websites-form .verified { display: block; width: 120px; margin: 0 auto 50px auto; opacity: 0.5;  } #my-websites-form .add-button { display: block; max-width: 150px; margin: 0 auto 50px auto; background-color: var( --primary-color ); clear: both; line-height: 40px; border-radius: 5px; color: #ffffff; text-align: center; cursor: pointer; text-transform: uppercase; font-size: 12px; font-weight: bold;  } #my-websites-form footer { position: relative; display: block; height: 82px; max-width: 600px; margin: 0 auto 0 auto; padding: 20px 0 20px 0; clear: both; border-top: 1px solid #f0f0f0;  } #my-websites-form footer span { display: block; float: left; min-width: 90px; height: 40px; padding: 0 10px 0 10px; margin: 0 0 0 0; color: #9ba8b0; line-height: 36px; font-weight: bold; cursor: pointer; text-align: center; text-transform: uppercase; background-color: transparent; font-size: 12px; border: 2px solid #9ba8b0; border-radius: 5px;  } #my-websites-form footer span:hover { background-color: #f0f0f0;  } #my-websites-form footer span:nth-child(2) { float: right; margin: 0 0 0 0; background-color: #18347a; color: #ffffff; line-height: 40px; border: 0;  } #my-websites-form footer span:hover:nth-child(2) { background-color: #38549a;  } #my-websites-form .confirmation { position: fixed; top: 50%; left: 50%; display: block; max-width: 600px; width: 60%; margin: 0 0 0 150px; transform: translate( -50%, -50% );  } #my-websites-form .tags { display: block; padding: 20px 0 0 0; list-style: none; text-align: center;  } #my-websites-form .tags:after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #my-websites-form .tags li { display: inline-block; line-height: 36px; margin: 0 5px 10px 5px; padding: 0 10px 0 10px; cursor: pointer; color: var( --primary-color ); font-weight: bold; font-size: 12px; border-radius: 10px; background-color: #f5f5f5;  } #my-websites-form .tags li:hover { background-color: #f0f0f0;  } #my-websites-form .tags .sel { background-color: var( --primary-color ); color: #ffffff;  } #my-websites-form .tags .sel:hover { background-color: var( --primary-color-lighter );  } #my-websites-form .aci { position: relative; min-height: 44px; overflow: hidden; border: 2px solid #e0e0e0; border-radius: 3px;  } #my-websites-form .aci span { position: relative; display: block; width: 100%; height: 40px; padding: 0 0 0 10px; line-height: 40px; color: #353535; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  } #my-websites-form .aci:after { position: absolute; top: 11px; right: 14px; display: block; width: 12px; height: 12px; content: ""; border-right: 2px solid #e0e0e0; border-bottom: 2px solid #e0e0e0; box-sizing: border-box; transform: rotate( 45deg );  } #my-websites-form .aci:before { position: absolute; top: 0px; right: 40px; display: block; width: 2px; height: 40px; content: ""; background-color: #e0e0e0;  } #my-websites-form .aci input { position: absolute; z-index: 6; display: none; top: 62px; left: 20px; width: calc( 100% - 40px ) !important; height: 44px; padding: 10px; color: #666666; border: 2px solid #e0e0e0; border-radius: 3px; clear: both;  } #my-websites-form .aci ol { display: none; z-index: 5; width: 100%; padding: 84px 0 0 0; overflow: hidden; list-style-type: none; background-color: #ffffff; border-radius: 0 0 3px 3px; border-top: 2px solid #e0e0e0;  } #my-websites-form .aci li { display: block; line-height: 40px; width: 100%; padding: 0 0 0 10px; color: #666666; cursor: pointer; border-top: 2px dotted #e8e8e8;  } #my-websites-form .aci li:first-child {  } #my-websites-form .aci li:hover { background-color: #f7f6f9;  } #my-websites-form .aci .sel { color: #2b2e4f; background-color: #f7f6f9;  } #my-websites-form .aciv input { display: block;  } #my-websites-form .aciv ol { display: block; list-style: none;  } #my-websites-form .aciv:after { top: 16px; transform: rotate( -135deg );  } #my-websites-form .aciv span { border-bottom: 0;  } #my-websites-form .acivt input { display: block; top: auto; bottom: 40px;  } #my-websites-form .acivt ol { display: block; top: auto; bottom: 35px; padding: 0 0 55px 0; border-radius: 3px 3px 0 0; border-bottom: 0; border-top: 1px solid #e0e0e0;  } #my-websites-form .button { display: inline-block; float: none; min-width: 90px; height: 40px; margin: 0 0 0 0; padding: 0 10px 0 10px; color: #9ba8b0; line-height: 40px; font-weight: bold; cursor: pointer; text-align: center; text-transform: uppercase; background-color: transparent; border: 2px solid #9ba8b0; border-radius: 5px;  } #my-websites-form .button:hover { background-color: #f0f0f0;  } #my-websites-form .cbl { display: block; margin: 0 0 0 0; overflow: hidden; clear: both; list-style: none;  } #my-websites-form .cbl:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #my-websites-form .cbl li { position: relative; display: block; height: 40px; padding: 0 0 0 40px; overflow: hidden; line-height: 40px; color: #353535;  } #my-websites-form .cbl .cb,#my-websites-form .cbl .cbs { position: absolute; top: 10px; left: 0;  } #my-websites-form .imagefile { position: relative; display: block; width: 100px; height: 100px; background-color: #f5f5f7; border-radius: 4px; border: 2px dashed #e0e0e0; background: no-repeat scroll center center / cover;  } #my-websites-form .imagefile:before { position: absolute; top: 47px; left: 38px; display: block; width: 20px; height: 2px; content: ""; background-color: #d5d5d7;  } #my-websites-form .imagefile:after { position: absolute; top: 38px; left: 47px; display: block; width: 2px; height: 20px; content: ""; background-color: #d5d5d7;  } #my-websites-form .imagefile input { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; overflow: hidden; cursor: pointer;  } #my-websites-form .imagefile span { position: absolute; top: -10px; right: -10px; display: none; width: 20px; height: 20px; background-color: #ed1c24; border-radius: 50%; cursor: pointer; opacity: 0.7;  } #my-websites-form .imagefile span:hover { opacity: 1;  } #my-websites-form .imagefile span:before,#my-websites-form .imagefile span:after { position: absolute; top: 50%; left: 50%; display: block; width: 2px; height: 12px; margin: -6px 0 0 -1px; content: ""; background-color: #ffffff;  } #my-websites-form .imagefile span:before { transform: rotate( -45deg );  } #my-websites-form .imagefile span:after { transform: rotate( 45deg );  } #my-websites-form .imagefile-available span { display: block;  } #my-websites-form .imagefile-available:after,#my-websites-form .imagefile-available:before { display: none;  } #my-websites-form input,#my-websites-form textarea { display: block; width: 100%; height: 42px; max-width: 600px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 2px solid #e0e0e0; border-radius: 5px; clear: both; background-color: transparent;  } #my-websites-form textarea { min-height: 150px; padding: 10px; line-height: 26px; resize: vertical;  } #my-websites-form textarea:focus,#my-websites-form input:focus { color: #454545; border: 2px solid #2b2e4f;  } #my-websites-form .ierror { border: 2px solid #ff374f;  } #my-websites-form .maci { min-height: 44px; border: 2px solid #e0e0e0; border-radius: 3px;  } #my-websites-form .maci:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #my-websites-form .maci input { display: block; float: left; width: 33%; height: 42px; max-width: 600px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 0; clear: none; background-color: transparent;  } #my-websites-form .maci span { position: relative; display: block; float: left; height: 30px; line-height: 30px; margin: 5px 5px 5px 5px; padding: 0 40px 0 15px; background-color: #f0f0f0; border-radius: 5px; color: #666688; cursor: edit; cursor: pointer;  } #my-websites-form .maci .edit-color { background-color: #5b5e7f; color: #ffffff;  } #my-websites-form .maci span > span { position: absolute; top: 5px; right: 10px; display: block; width: 20px; height: 20px; margin: 0; padding: 0; opacity: 0.6; border-radius: 50%; background-color: transparent; cursor: pointer;  } #my-websites-form .maci span span:hover { opacity: 1; background-color: #ed1c24;  } #my-websites-form .maci span span:before,#my-websites-form .maci span span:after { position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; content: ""; background-color: #2b2e4f;  } #my-websites-form .maci span span:before { transform: rotate( -45deg );  } #my-websites-form .maci span span:after { transform: rotate( 45deg );  } #my-websites-form .maci .edit-color span:before,#my-websites-form .maci .edit-color span:after { background-color: #ffffff;  } #my-websites-form .maci span span:hover:before,#my-websites-form .maci span span:hover:after { background-color: #ffffff;  } #my-websites-form .maci ol { display: none; z-index: 5; width: 100%; padding: 0 0 0 0; overflow: hidden; list-style-type: none; background-color: #ffffff; border-radius: 0 0 3px 3px; border-top: 0 solid #e0e0e0;  } #my-websites-form .maci li { display: block; line-height: 40px; width: 100%; padding: 0 0 0 10px; color: #666666; cursor: pointer; border-top: 2px dotted #e8e8e8;  } #my-websites-form .maci li:first-child {  } #my-websites-form .maci li:hover { background-color: #f7f6f9;  } #my-websites-form .maci .sel { color: #2b2e4f; background-color: #f7f6f9;  } #my-websites-form .minput { min-height: 44px; border: 2px solid #e0e0e0; border-radius: 3px;  } #my-websites-form .minput:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #my-websites-form .minput input { display: block; float: left; width: 33%; height: 42px; max-width: 600px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 0; clear: none; background-color: transparent;  } #my-websites-form .minput span { position: relative; display: block; float: left; height: 30px; line-height: 30px; margin: 5px 5px 5px 5px; padding: 0 40px 0 15px; background-color: #f0f0f0; border-radius: 5px; color: #666688; cursor: edit; cursor: pointer;  } #my-websites-form .minput .edit-color { background-color: #5b5e7f; color: #ffffff;  } #my-websites-form .minput span > span { position: absolute; top: 5px; right: 10px; display: block; width: 20px; height: 20px; margin: 0; padding: 0; opacity: 0.6; border-radius: 50%; background-color: transparent; cursor: pointer;  } #my-websites-form .minput span span:hover { opacity: 1; background-color: #ed1c24;  } #my-websites-form .minput span span:before,#my-websites-form .minput span span:after { position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; content: ""; background-color: #2b2e4f;  } #my-websites-form .minput span span:before { transform: rotate( -45deg );  } #my-websites-form .minput span span:after { transform: rotate( 45deg );  } #my-websites-form .minput .edit-color span:before,#my-websites-form .minput .edit-color span:after { background-color: #ffffff;  } #my-websites-form .minput span span:hover:before,#my-websites-form .minput span span:hover:after { background-color: #ffffff;  } #my-websites-form .order { position: relative; display: block; margin: 0 0 0 0; padding: 17px 20px 20px 60px; background-color: #f5f7f9; border-radius: 3px; border: 2px solid #e0e0e0;  } #my-websites-form .order figure { position: absolute; top: 20px; left: 10px; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;  } #my-websites-form .order figure img { display: block; width: 100%; height: 100%;  } #my-websites-form .order p { margin: 0 0 10px 0; clear: both; line-height: 20px; font-weight: bold; color: #7e809c;  } #my-websites-form .order .remove { position: absolute; bottom: 20px; left: 5px; width: 50px; height: 50px; cursor: pointer; opacity: 0.7;  } #my-websites-form .order .remove:hover { opacity: 1;  } #my-websites-form .order .remove:after { position: absolute; top: -25px; right: -25px; display: block; width: 100px; height: 100px; background: url( "../images/cp/cp.png" ) no-repeat -1500px -500px; content: ""; transform: scale( 0.5 );  } @media only screen and ( max-width : 1400px ) { .col-p-5-max { padding:  5px;  } .col-pt-5-max { padding-top:  5px;  } .col-pr-5-max { padding-right:  5px;  } .col-pb-5-max { padding-bottom:  5px;  } .col-pl-5-max { padding-left:  5px;  } .col-p-10-max { padding:  10px;  } .col-pt-10-max { padding-top:  10px;  } .col-pr-10-max { padding-right:  10px;  } .col-pb-10-max { padding-bottom:  10px;  } .col-pl-10-max { padding-left:  10px;  } .col-p-15-max { padding:  15px;  } .col-pt-15-max { padding-top:  15px;  } .col-pr-15-max { padding-right:  15px;  } .col-pb-15-max { padding-bottom:  15px;  } .col-pl-15-max { padding-left:  15px;  } .col-p-20-max { padding:  20px;  } .col-pt-20-max { padding-top:  20px;  } .col-pr-20-max { padding-right:  20px;  } .col-pb-20-max { padding-bottom:  20px;  } .col-pl-20-max { padding-left:  20px;  } .col-p-25-max { padding:  25px;  } .col-pt-25-max { padding-top:  25px;  } .col-pr-25-max { padding-right:  25px;  } .col-pb-25-max { padding-bottom:  25px;  } .col-pl-25-max { padding-left:  25px;  } .col-p-30-max { padding:  30px;  } .col-pt-30-max { padding-top:  30px;  } .col-pr-30-max { padding-right:  30px;  } .col-pb-30-max { padding-bottom:  30px;  } .col-pl-30-max { padding-left:  30px;  } .col-p-35-max { padding:  35px;  } .col-pt-35-max { padding-top:  35px;  } .col-pr-35-max { padding-right:  35px;  } .col-pb-35-max { padding-bottom:  35px;  } .col-pl-35-max { padding-left:  35px;  } .col-p-40-max { padding:  40px;  } .col-pt-40-max { padding-top:  40px;  } .col-pr-40-max { padding-right:  40px;  } .col-pb-40-max { padding-bottom:  40px;  } .col-pl-40-max { padding-left:  40px;  } .col-np-max { padding:  0;  } .col-npt-max { padding-top:  0;  } .col-npr-max { padding-right:  0;  } .col-npb-max { padding-bottom:  0;  } .col-npl-max { padding-left:  0;  } .col-1-10-max { width:  10%;  } .col-2-10-max { width:  20%;  } .col-3-10-max { width:  30%;  } .col-4-10-max { width:  40%;  } .col-5-10-max { width:  50%;  } .col-6-10-max { width:  60%;  } .col-7-10-max { width:  70%;  } .col-8-10-max { width:  80%;  } .col-9-10-max { width:  90%;  } .col-10-10-max { width:  100%;  } .col-1-12-max { width:  8.33%;  } .col-2-12-max { width:  16.66%;  } .col-3-12-max { width:  25%;  } .col-4-12-max { width:  33.33%;  } .col-5-12-max { width:  41.66%;  } .col-6-12-max { width:  50%;  } .col-7-12-max { width:  58.33%;  } .col-8-12-max { width:  66.66%;  } .col-9-12-max { width:  75%;  } .col-10-12-max { width:  83.33%;  } .col-11-12-max { width:  91.66%;  } .col-12-12-max { width:  100%;  } .col-none-max { display:  none;  } .col-block-max { display:  block;  } #main-intro aside h2 { font-size:  40px;  } #main-intro aside p { font-size:  24px;  } #main-news .back,#main-news .next { width:  40px; height:  40px; margin:  -20px 0 0 0;  } #main-news .back { left:  0;  } #main-news .next { right:  0;  } #main-news .back:before,#main-news .next:before { top:  13px; left:  15px;  } #main-news .next:before { left:  9px;  } #main-news .back:after,#main-news .next:after { width:  60px; height:  60px;  } #main-subscribe { padding:  50px 20px 50px 20px;  } #main-tags > div ul li h3 { font-size:  16px;  } #main-tags .back,#main-tags .next { width:  40px; height:  40px; margin:  -20px 0 0 0;  } #main-tags .back { left:  0;  } #main-tags .next { right:  0;  } #main-tags .back:before,#main-tags .next:before { top:  13px; left:  15px;  } #main-tags .next:before { left:  9px;  } #main-tags .back:after,#main-tags .next:after { width:  60px; height:  60px;  } #shop-intro aside h2 { font-size:  40px;  } #shop-intro aside p { font-size:  24px;  } #my-websites section article { margin:  0 auto 0 auto; border-radius:  0px; border-width:  1px 0 0 0;  } #my-websites section nav { min-height:  50px; padding:  20px 20px 0 20px;  }  } @media only screen and ( max-width : 1200px ) { .col-p-5-big { padding:  5px;  } .col-pt-5-big { padding-top:  5px;  } .col-pr-5-big { padding-right:  5px;  } .col-pb-5-big { padding-bottom:  5px;  } .col-pl-5-big { padding-left:  5px;  } .col-p-10-big { padding:  10px;  } .col-pt-10-big { padding-top:  10px;  } .col-pr-10-big { padding-right:  10px;  } .col-pb-10-big { padding-bottom:  10px;  } .col-pl-10-big { padding-left:  10px;  } .col-p-15-big { padding:  15px;  } .col-pt-15-big { padding-top:  15px;  } .col-pr-15-big { padding-right:  15px;  } .col-pb-15-big { padding-bottom:  15px;  } .col-pl-15-big { padding-left:  15px;  } .col-p-20-big { padding:  20px;  } .col-pt-20-big { padding-top:  20px;  } .col-pr-20-big { padding-right:  20px;  } .col-pb-20-big { padding-bottom:  20px;  } .col-pl-20-big { padding-left:  20px;  } .col-p-25-big { padding:  25px;  } .col-pt-25-big { padding-top:  25px;  } .col-pr-25-big { padding-right:  25px;  } .col-pb-25-big { padding-bottom:  25px;  } .col-pl-25-big { padding-left:  25px;  } .col-p-30-big { padding:  30px;  } .col-pt-30-big { padding-top:  30px;  } .col-pr-30-big { padding-right:  30px;  } .col-pb-30-big { padding-bottom:  30px;  } .col-pl-30-big { padding-left:  30px;  } .col-p-35-big { padding:  35px;  } .col-pt-35-big { padding-top:  35px;  } .col-pr-35-big { padding-right:  35px;  } .col-pb-35-big { padding-bottom:  35px;  } .col-pl-35-big { padding-left:  35px;  } .col-p-40-big { padding:  40px;  } .col-pt-40-big { padding-top:  40px;  } .col-pr-40-big { padding-right:  40px;  } .col-pb-40-big { padding-bottom:  40px;  } .col-pl-40-big { padding-left:  40px;  } .col-np-big { padding:  0;  } .col-npt-big { padding-top:  0;  } .col-npr-big { padding-right:  0;  } .col-npb-big { padding-bottom:  0;  } .col-npl-big { padding-left:  0;  } .col-1-10-big { width:  10%;  } .col-2-10-big { width:  20%;  } .col-3-10-big { width:  30%;  } .col-4-10-big { width:  40%;  } .col-5-10-big { width:  50%;  } .col-6-10-big { width:  60%;  } .col-7-10-big { width:  70%;  } .col-8-10-big { width:  80%;  } .col-9-10-big { width:  90%;  } .col-10-10-big { width:  100%;  } .col-1-12-big { width:  8.33%;  } .col-2-12-big { width:  16.66%;  } .col-3-12-big { width:  25%;  } .col-4-12-big { width:  33.33%;  } .col-5-12-big { width:  41.66%;  } .col-6-12-big { width:  50%;  } .col-7-12-big { width:  58.33%;  } .col-8-12-big { width:  66.66%;  } .col-9-12-big { width:  75%;  } .col-10-12-big { width:  83.33%;  } .col-11-12-big { width:  91.66%;  } .col-12-12-big { width:  100%;  } .col-none-big { display:  none;  } .col-block-big { display:  block;  } #header ul li { font-size:  14px; margin:  0 0 0 10px;  } #main-favourites ul li { width:  33.33%; padding:  20px 10px 10px 80px;  } #main-favourites ul li figure { width:  40px; height:  40px;  } #main-news > div { aspect-ratio:  3.5 / 1;  } #main-news > div ul { left:  -125%; width:  500%;  } #main-news > div .slide-back { left:  -100%;  } #main-news > div .slide-next { left:  -150%;  } #main-tags > div { aspect-ratio:  3.5 / 1;  } #main-tags > div ul { left:  -125%; width:  500%;  } #main-tags > div .slide-back { left:  -100%;  } #main-tags > div .slide-next { left:  -150%;  } #press-list > div ul li > div { margin:  0 20px 0 0;  }  } @media only screen and ( max-width : 1024px ) { .col-p-5-med { padding:  5px;  } .col-pt-5-med { padding-top:  5px;  } .col-pr-5-med { padding-right:  5px;  } .col-pb-5-med { padding-bottom:  5px;  } .col-pl-5-med { padding-left:  5px;  } .col-p-10-med { padding:  10px;  } .col-pt-10-med { padding-top:  10px;  } .col-pr-10-med { padding-right:  10px;  } .col-pb-10-med { padding-bottom:  10px;  } .col-pl-10-med { padding-left:  10px;  } .col-p-15-med { padding:  15px;  } .col-pt-15-med { padding-top:  15px;  } .col-pr-15-med { padding-right:  15px;  } .col-pb-15-med { padding-bottom:  15px;  } .col-pl-15-med { padding-left:  15px;  } .col-p-20-med { padding:  20px;  } .col-pt-20-med { padding-top:  20px;  } .col-pr-20-med { padding-right:  20px;  } .col-pb-20-med { padding-bottom:  20px;  } .col-pl-20-med { padding-left:  20px;  } .col-p-25-med { padding:  25px;  } .col-pt-25-med { padding-top:  25px;  } .col-pr-25-med { padding-right:  25px;  } .col-pb-25-med { padding-bottom:  25px;  } .col-pl-25-med { padding-left:  25px;  } .col-p-30-med { padding:  30px;  } .col-pt-30-med { padding-top:  30px;  } .col-pr-30-med { padding-right:  30px;  } .col-pb-30-med { padding-bottom:  30px;  } .col-pl-30-med { padding-left:  30px;  } .col-p-35-med { padding:  35px;  } .col-pt-35-med { padding-top:  35px;  } .col-pr-35-med { padding-right:  35px;  } .col-pb-35-med { padding-bottom:  35px;  } .col-pl-35-med { padding-left:  35px;  } .col-p-40-med { padding:  40px;  } .col-pt-40-med { padding-top:  40px;  } .col-pr-40-med { padding-right:  40px;  } .col-pb-40-med { padding-bottom:  40px;  } .col-pl-40-med { padding-left:  40px;  } .col-np-med { padding:  0;  } .col-npt-med { padding-top:  0;  } .col-npr-med { padding-right:  0;  } .col-npb-med { padding-bottom:  0;  } .col-npl-med { padding-left:  0;  } .col-1-10-med { width:  10%;  } .col-2-10-med { width:  20%;  } .col-3-10-med { width:  30%;  } .col-4-10-med { width:  40%;  } .col-5-10-med { width:  50%;  } .col-6-10-med { width:  60%;  } .col-7-10-med { width:  70%;  } .col-8-10-med { width:  80%;  } .col-9-10-med { width:  90%;  } .col-10-10-med { width:  100%;  } .col-1-12-med { width:  8.33%;  } .col-2-12-med { width:  16.66%;  } .col-3-12-med { width:  25%;  } .col-4-12-med { width:  33.33%;  } .col-5-12-med { width:  41.66%;  } .col-6-12-med { width:  50%;  } .col-7-12-med { width:  58.33%;  } .col-8-12-med { width:  66.66%;  } .col-9-12-med { width:  75%;  } .col-10-12-med { width:  83.33%;  } .col-11-12-med { width:  91.66%;  } .col-12-12-med { width:  100%;  } .col-none-med { display:  none;  } .col-block-med { display:  block;  } #all.open { transform:  perspective( 1500px ) rotateY( -30deg );  } #header .logo { height:  40px; margin:  12px 0 0 0;  } #header .logo-mobile { display:  block;  } #header ul { position:  fixed; top:  0; left:  100%; width:  100%; height:  100%; margin:  0; padding:  60px 20px 0 20px; background-color:  #ffffff; overflow:  hidden; transition:  all 0.25s ease-in-out; opacity:  0;  } #header.sel ul { left:  0; opacity:  1;  } #header ul li { float:  none; font-size:  16px; color:  var( --primary-color ); text-align:  right;  } #header ul .cart::before { display:  none;  } #header ul .read { padding:  0 0 0 0; border:  0; padding:  30px 0 0 0; width:  160px; height:  160px; margin:  50px auto 0 auto; border-radius:  50%; background-color:  var( --primary-color-lighter ); box-shadow:  0 0 25px 0 var( --secondary-color-lighter );  } #header ul .read::before { display:  none;  } #header .mm { display:  block;  } #footer footer p { margin:  0 10px 0 0; font-size:  12px;  } #footer footer ul li { margin:  0 10px 0 0; padding:  0 0 0 10px; font-size:  12px;  } #main-about span a { line-height:  44px; font-size:  12px;  } #main-intro aside h2 { font-size:  32px;  } #main-intro aside p { font-size:  18px;  } #main-intro aside .read { line-height:  44px; font-size:  12px;  } #main-intro aside .shop { line-height:  40px; font-size:  12px;  } #main-intro aside .register { line-height:  40px; font-size:  12px;  } #main-join > div { height:  400px;  } #main-join header h2 { margin:  0 0 15px 0; font-size:  38px; line-height:  38px;  } #main-join header p { margin:  0 0 15px 0; font-size:  18px; line-height:  22px;  } #main-join header span { line-height:  44px; font-size:  12px;  } #main-news > div { aspect-ratio:  2.5 / 1;  } #main-news > div ul { left:  -166.65%; width:  666.6%;  } #main-news > div .slide-back { left:  -133.32%;  } #main-news > div .slide-next { left:  -199.998%;  } #main-subscribe h2 { font-size:  20px; line-height:  30px;  } #main-subscribe aside { padding:  20px;  } #main-tags > div { aspect-ratio:  2.5 / 1;  } #main-tags > div ul { left:  -166.65%; width:  666.6%;  } #main-tags > div .slide-back { left:  -133.32%;  } #main-tags > div .slide-next { left:  -199.998%;  } #search aside fieldset { width:  250px; padding:  0 10px 0 10px;  } #search aside .min-range,#search aside .max-range { font-size:  12px;  } #search > header { left:  250px; width:  calc( 100% - 250px );  } #search section > header h4 { font-size:  12px;  } #search section nav { margin:  0 5px 0 5px; padding:  10px 0 10px 0;  } #search { padding:  0 0 0 250px;  } #about-description h2 span { font-size:  38px;  } #about-intro { padding:  0 0 35% 0;  } #about-intro header h2 { font-size:  18px;  } #about-intro header p { font-size:  18px;  } #contact-intro { padding:  0 0 35% 0;  } #contact-intro header h2 { font-size:  38px;  } #contact-intro header p { font-size:  18px;  } #sources-list h2 span { font-size:  38px;  } #sources-intro { padding:  0 0 35% 0;  } #sources-intro header h2 { font-size:  38px;  } #sources-intro header p { font-size:  18px;  } #pos-intro { padding:  0 0 35% 0;  } #pos-intro header h2 { font-size:  38px;  } #pos-intro header p { font-size:  18px;  } #shop-intro aside h2 { font-size:  32px;  } #shop-intro aside p { font-size:  18px;  } #shop-intro aside .read { line-height:  44px; font-size:  12px;  } #shop-intro aside .register { line-height:  44px; font-size:  12px;  } #faq-intro { padding:  0 0 35% 0;  } #faq-intro header h2 { font-size:  38px;  } #faq-intro header p { font-size:  18px;  } #press-intro { padding:  0 0 35% 0;  } #press-intro header h2 { font-size:  38px;  } #press-intro header p { font-size:  18px;  } #press-post > div { border-left:  10px solid var( --secondary-color-lighter );  } #press-post article { width:  calc( 100% - 320px ); padding:  90px 20px 0 20px;  } #press-post article > header figure::before { bottom:  -10px; right:  -10px;  } #press-post aside { width:  320px; padding:  110px 20px 0 20px;  } #my-websites-form aside { width:  240px;  } #my-websites-form aside header { height:  100px; padding:  30px 0 0 23px;  } #my-websites-form aside header h6 { top:  30px; left:  80px;  } #my-websites-form aside nav span { padding:  0 0 0 70px;  } #my-websites-form aside nav span:before { left:  30px;  } #my-websites-form aside nav span:after { left:  42px;  } #my-websites-form aside nav .sel:before { left:  25px;  } #my-websites-form { padding:  0 0 0 240px;  } #my-websites-form .confirmation { margin:  0 0 0 120px;  }  } @media only screen and ( max-width : 768px ) { .col-p-5-sma { padding:  5px;  } .col-pt-5-sma { padding-top:  5px;  } .col-pr-5-sma { padding-right:  5px;  } .col-pb-5-sma { padding-bottom:  5px;  } .col-pl-5-sma { padding-left:  5px;  } .col-p-10-sma { padding:  10px;  } .col-pt-10-sma { padding-top:  10px;  } .col-pr-10-sma { padding-right:  10px;  } .col-pb-10-sma { padding-bottom:  10px;  } .col-pl-10-sma { padding-left:  10px;  } .col-p-15-sma { padding:  15px;  } .col-pt-15-sma { padding-top:  15px;  } .col-pr-15-sma { padding-right:  15px;  } .col-pb-15-sma { padding-bottom:  15px;  } .col-pl-15-sma { padding-left:  15px;  } .col-p-20-sma { padding:  20px;  } .col-pt-20-sma { padding-top:  20px;  } .col-pr-20-sma { padding-right:  20px;  } .col-pb-20-sma { padding-bottom:  20px;  } .col-pl-20-sma { padding-left:  20px;  } .col-p-25-sma { padding:  25px;  } .col-pt-25-sma { padding-top:  25px;  } .col-pr-25-sma { padding-right:  25px;  } .col-pb-25-sma { padding-bottom:  25px;  } .col-pl-25-sma { padding-left:  25px;  } .col-p-30-sma { padding:  30px;  } .col-pt-30-sma { padding-top:  30px;  } .col-pr-30-sma { padding-right:  30px;  } .col-pb-30-sma { padding-bottom:  30px;  } .col-pl-30-sma { padding-left:  30px;  } .col-p-35-sma { padding:  35px;  } .col-pt-35-sma { padding-top:  35px;  } .col-pr-35-sma { padding-right:  35px;  } .col-pb-35-sma { padding-bottom:  35px;  } .col-pl-35-sma { padding-left:  35px;  } .col-p-40-sma { padding:  40px;  } .col-pt-40-sma { padding-top:  40px;  } .col-pr-40-sma { padding-right:  40px;  } .col-pb-40-sma { padding-bottom:  40px;  } .col-pl-40-sma { padding-left:  40px;  } .col-np-sma { padding:  0;  } .col-npt-sma { padding-top:  0;  } .col-npr-sma { padding-right:  0;  } .col-npb-sma { padding-bottom:  0;  } .col-npl-sma { padding-left:  0;  } .col-1-10-sma { width:  10%;  } .col-2-10-sma { width:  20%;  } .col-3-10-sma { width:  30%;  } .col-4-10-sma { width:  40%;  } .col-5-10-sma { width:  50%;  } .col-6-10-sma { width:  60%;  } .col-7-10-sma { width:  70%;  } .col-8-10-sma { width:  80%;  } .col-9-10-sma { width:  90%;  } .col-10-10-sma { width:  100%;  } .col-1-12-sma { width:  8.33%;  } .col-2-12-sma { width:  16.66%;  } .col-3-12-sma { width:  25%;  } .col-4-12-sma { width:  33.33%;  } .col-5-12-sma { width:  41.66%;  } .col-6-12-sma { width:  50%;  } .col-7-12-sma { width:  58.33%;  } .col-8-12-sma { width:  66.66%;  } .col-9-12-sma { width:  75%;  } .col-10-12-sma { width:  83.33%;  } .col-11-12-sma { width:  91.66%;  } .col-12-12-sma { width:  100%;  } .col-none-sma { display:  none;  } .col-block-sma { display:  block;  } #blacklist h1 { font-size:  22px;  } #blacklist p { font-size:  14px;  } #maintenance img { width:  60px; height:  60px;  } #maintenance h1 { font-size:  22px;  } #maintenance p { font-size:  14px;  } #page-not-found img { width:  60px; height:  60px;  } #page-not-found p { font-size:  13px;  } #form header { height:  40px; font-size:  16px; line-height:  40px;  } #form header i { width:  41px; height:  40px;  } #form header i::before { top:  10px; left:  10px;  } #form header span { width:  41px; height:  40px;  } #form header span::before,#form header span::after { top:  19px; left:  10px;  } #form nav { height:  42px;  } #form nav span { margin:  0 10px 0 0; line-height:  40px; font-size:  12px;  } #all:after { height:  800px;  } #all.open { transform:  perspective( 1500px ) rotateY( -60deg );  } #header ul .items::after { right:  7px;  } #footer { height:  800px; padding:  80px 20px 0 20px;  } #footer nav aside { float:  none; width:  100%;  } #footer nav aside figure { margin:  0 0 30px 0;  } #footer nav aside p { max-width:  100%; margin:  0 0 20px 0; font-size:  16px;  } #footer nav ul { width:  50%;  } #footer footer p { float:  none; clear:  both; margin:  0 0 10px 0; font-size:  14px; text-align:  center; line-height:  24px;  } #footer footer ul { float:  none; clear:  both; text-align:  center;  } #footer footer ul li { display:  inline-block; float:  none; margin:  0 10px 0 10px; padding:  0 0 0 0; font-size:  14px;  } #footer footer ul li::before { display:  none;  } #footer footer ol { float:  none;  } #footer footer ol li { display:  inline-block; float:  none;  } #main-about { margin:  0 auto 30px auto; padding:  50px 10px 30px 10px;  } #main-about p { font-size:  18px; line-height:  28px;  } #main-ad { margin:  0 auto 30px auto; padding:  30px 0 30px 0;  } #main-favourites { margin:  0 auto 30px auto; padding:  30px 0 30px 0;  } #main-favourites > div { margin:  0 10px 0 10px;  } #main-favourites ul li { width:  50%;  } #main-intro { background-attachment:  scroll; background-position:  40% center;  } #main-intro aside h2 { font-size:  28px;  } #main-join { margin:  0 auto 30px auto; padding:  50px 0 20px 0;  } #main-join > div { height:  auto; margin:  0 20px 0 20px;  } #main-join header { position:  relative; top:  auto; left:  auto; width:  100%; margin:  0 0 40px 0; transform:  translate( 0, 0 );  } #main-join header h2 { margin:  0 0 15px 0; font-size:  28px; line-height:  28px; text-align:  center;  } #main-join header p { margin:  0 0 15px 0; font-size:  20px; line-height:  26px; text-align:  center;  } #main-join header span { display:  block; width:  160px; margin:  0 auto 0 auto; padding:  0 0 0 0; text-align:  center;  } #main-join video { position:  relative; top:  auto; left:  auto; width:  100%; border-radius:  0; transform:  translate( 0, 0 );  } #main-news { margin:  0 auto 30px auto; padding:  20px 0 30px 0;  } #main-news > div { margin:  0 10px 0 10px; aspect-ratio:  2 / 1;  } #main-news > div ul { left:  -250%; width:  1000%;  } #main-news > div .slide-back { left:  -200%;  } #main-news > div .slide-next { left:  -300%;  } #main-news > div ul li figure { left:  10px; width:  calc( 100% - 20px );  } #main-news > div ul li h3 { left:  20px;  } #main-news > div ul li h4 { left:  20px;  } #main-news .back { left:  -10px;  } #main-news .next { right:  -10px;  } #main-subscribe { padding:  50px 10px 50px 10px;  } #main-subscribe h2 { float:  none; width:  100%; margin:  0 0 20px 0; padding:  0; clear:  both; text-align:  center;  } #main-subscribe aside { float:  none; width:  100%; clear:  both;  } #main-subscribe aside > div { height:  150px; padding:  0 0 0 0;  } #main-subscribe aside div > input { width:  100%; border-right:  0; border-bottom:  1px solid var( --primary-color ); text-align:  center;  } #main-subscribe aside div > span { top:  auto; bottom:  0; width:  100%;  } #main-subscribe aside > p { font-size:  12px;  } #main-tags { margin:  0 auto 30px auto; padding:  30px 0 30px 0;  } #main-tags > div { margin:  0 10px 0 10px; aspect-ratio:  2 / 1;  } #main-tags > div ul { left:  -250%; width:  1000%;  } #main-tags > div .slide-back { left:  -200%;  } #main-tags > div .slide-next { left:  -300%;  } #main-tags > div ul li figure { left:  10px; width:  calc( 100% - 20px );  } #main-tags > div ul li h3 { left:  20px;  } #main-tags > div ul li h4 { left:  20px;  } #main-tags .back { left:  -10px;  } #main-tags .next { right:  -10px;  } #read-final { left:  0; top:  calc( 50% + 35px ); border-top:  1px solid #f0f0f0; background-color:  #f0f0f0;  } #read-final.full { height:  calc( 100% - 36px );  } #read-final h3 { line-height:  24px; font-size:  12px;  } #read-final.font-2 h3 { font-size:  16px; line-height:  30px;  } #read-final.font-3 h3 { font-size:  22px; line-height:  38px;  } #read-final .cell { line-height:  24px;  } #read-final.font-2 .cell { line-height:  36px;  } #read-final.font-3 .cell { line-height:  48px;  } #read-final .start::before { line-height:  10px;  } #read header .menu { width:  40px; margin:  0 10px 0 0; padding:  0;  } #read header .menu::before { display:  none;  } #read header .menu i { display:  none;  } #read header .menu i:last-child { display:  block;  } #read-info { max-width:  calc( 100% - 40px );  } #read-list article { padding:  0 0 0 60px;  } #read-list article figure { width:  50px; height:  50px;  } #read-original { border-right:  0; background-color:  #f8f8f8;  } #read-original.full { height:  calc( 100% - 36px );  } #read-verse { left:  20px; width:  calc(100% - 40px); max-width:  100%; transform:  translate(0, -50%);  } #read > div { width:  100%; height:  calc( 50% - 36px );  } #win-sep { display:  block;  } #share-verse { left:  20px; width:  calc( 100% - 40px ); max-width:  100%; transform:  translate( 0, -50% );  } #reply-comment { left:  20px; width:  calc( 100% - 40px ); max-width:  100%; transform:  translate( 0, -50% );  } #single-comment { left:  20px; width:  calc( 100% - 40px ); max-width:  100%; transform:  translate( 0, -50% );  } #acc h2 { margin:  0 20px 10px 20px; font-size:  16px;  } #acc p { margin:  0 20px 20px 20px; font-size:  12px;  } #acc .submit { margin:  0 20px 10px 20px;  } #search aside { z-index:  8; left:  -300px;  } #search aside h2 span { display:  block;  } #search > header { left:  0; width:  100%;  } #search > header > div { display:  block;  } #search > header input { padding:  0 70px 0 80px;  } #search section > header span { display:  none;  } #search section nav div { float:  none; height:  auto; border:  0; border-radius:  0; text-align:  center;  } #search section nav span,#search section nav i { display:  inline-block; float:  none; margin:  0 5px 5px 0; border:  1px solid #e5e5e5;  } #search section nav h4 { float:  none; margin:  0 0 0 0; clear:  both; text-align:  center;  } #search { top:  50px; height:  calc( 100% - 50px ); padding:  0 0 0 0;  } #impressum header h2 { font-size:  22px;  } #impressum header p { font-size:  16px;  } #impressum article h3 { font-size:  16px;  } #impressum article p { margin:  0 0 20px 0; font-size:  14px;  } #impressum article ol { margin:  0 0 20px 0;  } #impressum article ol li { font-size:  14px;  } #legal header { height:  400px;  } #legal header h2 { font-size:  22px;  } #legal header p { font-size:  18px;  } #legal article h3 { font-size:  16px;  } #legal article p { margin:  0 0 20px 0; font-size:  14px;  } #legal article ul { margin:  0 0 20px 0;  } #legal article ul li { font-size:  14px;  } #about-description { padding:  0 0 30px 0;  } #about-description h2 span { font-size:  28px;  } #about-description p { margin:  0 0 20px 0; font-size:  16px;  } #about-description ol { margin:  0 0 20px 0;  } #about-description ol li { font-size:  16px;  } #about-intro { padding:  0 0 50% 0;  } #about-intro header { max-width:  calc( 100% - 40px );  } #about-intro header h2 { font-size:  14px;  } #about-intro header p { font-size:  14px;  } #contact-form { float:  none; width:  100%; padding:  0 0 20px 0; border-left:  0;  } #contact-form h3 { font-size:  16px;  } #contact-info h3 { font-size:  16px;  } #contact-info p { font-size:  14px; line-height:  24px;  } #contact-intro { padding:  0 0 50% 0;  } #contact-intro header h2 { font-size:  28px;  } #contact-intro header p { font-size:  14px;  } #sources-list { padding:  0 0 30px 0;  } #sources-list h2 span { font-size:  28px;  } #sources-list p { margin:  0 0 20px 0; font-size:  16px;  } #sources-list ol { margin:  0 0 20px 0;  } #sources-list ol li { font-size:  16px;  } #sources-intro { padding:  0 0 50% 0;  } #sources-intro header h2 { font-size:  28px;  } #sources-intro header p { font-size:  14px;  } #pos-intro { padding:  0 0 50% 0;  } #pos-intro header h2 { font-size:  28px;  } #pos-intro header p { font-size:  14px;  } #pos-list { padding:  0 0 30px 0;  } #pos-list > div { padding:  0 0 0 0;  } #pos-list ol { margin:  0 0 20px 0;  } #pos-list ol li { float:  none; width:  100%; max-width:  300px; margin:  0 auto 20px auto; font-size:  16px;  } #shop-intro aside h2 { font-size:  28px;  } #shop-list ul li { width:  33.33%;  } #shop-list ul h5 { width:  120px; font-size:  12px;  } #shop-view-general aside { width:  100%; padding:  0 0 0 0;  } #shop-view-general article { width:  100%;  } #shop-view-general article h5 { font-size:  12px;  } #faq-intro { padding:  0 0 50% 0;  } #faq-intro header h2 { font-size:  28px;  } #faq-intro header p { font-size:  14px;  } #faq-list p { font-size:  14px;  } #press-intro { padding:  0 0 50% 0;  } #press-intro header h2 { font-size:  28px;  } #press-intro header p { font-size:  14px;  } #press-list > div ul li { width:  50%;  } #press-post article { float:  none; width:  100%;  } #press-post aside { float:  none; width:  auto; margin:  0 auto 0 auto; padding:  50px 20px 0 20px;  } #press-post aside ul li { float:  left; width:  calc( 50% - 20px ); margin:  0 20px 30px 0;  } #cart { right:  -100%; width:  100%;  } #my-websites header .filter { padding:  0 100px 0 0;  } #my-websites header .filter .select { width:  100px;  } #my-websites section .labels { padding:  0 0 0 60px;  } #my-websites section .labels label { width:  50%;  } #my-websites section .labels .hide-sma { display:  none;  } #my-websites section article { height:  141px; padding:  20px 0 70px 60px;  } #my-websites section article > div { float:  none; width:  100%;  } #my-websites section article footer { position:  absolute; bottom:  0; left:  0; float:  none; width:  100%; height:  51px; padding:  5px 0 0 60px; border-top:  1px solid rgba( 127, 127, 127, 0.1 );  } #my-websites section article figure { left:  auto; right:  10px;  } #my-websites section article h3 { float:  none; width:  100%;  } #my-websites section article .likes { float:  none;  } #my-websites section article .likes span,#my-websites section article .likes i { line-height:  20px; color:  #808faf; font-weight:  normal;  } #my-websites section article .edit { top:  auto; bottom:  0; right:  10px;  } #my-websites section nav div { float:  none; width:  100%; margin:  0 0 10px 0; text-align:  center;  } #my-websites section nav span,#my-websites section nav a { display:  inline-block; float:  none; margin:  0 5px 0 5px;  } #my-websites section nav h4 { float:  none; clear:  both; text-align:  center;  } #my-websites-form aside { width:  86px;  } #my-websites-form aside header { height:  80px; padding:  20px 0 0 23px;  } #my-websites-form aside header h6 { display:  none;  } #my-websites-form aside nav i { display:  none;  } #my-websites-form { padding:  0 0 0 86px;  } #my-websites-form .confirmation { margin:  0 0 0 43px;  }  } @media only screen and ( max-width : 480px ) { .col-p-5-min { padding:  5px;  } .col-pt-5-min { padding-top:  5px;  } .col-pr-5-min { padding-right:  5px;  } .col-pb-5-min { padding-bottom:  5px;  } .col-pl-5-min { padding-left:  5px;  } .col-p-10-min { padding:  10px;  } .col-pt-10-min { padding-top:  10px;  } .col-pr-10-min { padding-right:  10px;  } .col-pb-10-min { padding-bottom:  10px;  } .col-pl-10-min { padding-left:  10px;  } .col-p-15-min { padding:  15px;  } .col-pt-15-min { padding-top:  15px;  } .col-pr-15-min { padding-right:  15px;  } .col-pb-15-min { padding-bottom:  15px;  } .col-pl-15-min { padding-left:  15px;  } .col-p-20-min { padding:  20px;  } .col-pt-20-min { padding-top:  20px;  } .col-pr-20-min { padding-right:  20px;  } .col-pb-20-min { padding-bottom:  20px;  } .col-pl-20-min { padding-left:  20px;  } .col-p-25-min { padding:  25px;  } .col-pt-25-min { padding-top:  25px;  } .col-pr-25-min { padding-right:  25px;  } .col-pb-25-min { padding-bottom:  25px;  } .col-pl-25-min { padding-left:  25px;  } .col-p-30-min { padding:  30px;  } .col-pt-30-min { padding-top:  30px;  } .col-pr-30-min { padding-right:  30px;  } .col-pb-30-min { padding-bottom:  30px;  } .col-pl-30-min { padding-left:  30px;  } .col-p-35-min { padding:  35px;  } .col-pt-35-min { padding-top:  35px;  } .col-pr-35-min { padding-right:  35px;  } .col-pb-35-min { padding-bottom:  35px;  } .col-pl-35-min { padding-left:  35px;  } .col-p-40-min { padding:  40px;  } .col-pt-40-min { padding-top:  40px;  } .col-pr-40-min { padding-right:  40px;  } .col-pb-40-min { padding-bottom:  40px;  } .col-pl-40-min { padding-left:  40px;  } .col-np-min { padding:  0;  } .col-npt-min { padding-top:  0;  } .col-npr-min { padding-right:  0;  } .col-npb-min { padding-bottom:  0;  } .col-npl-min { padding-left:  0;  } .col-1-10-min { width:  10%;  } .col-2-10-min { width:  20%;  } .col-3-10-min { width:  30%;  } .col-4-10-min { width:  40%;  } .col-5-10-min { width:  50%;  } .col-6-10-min { width:  60%;  } .col-7-10-min { width:  70%;  } .col-8-10-min { width:  80%;  } .col-9-10-min { width:  90%;  } .col-10-10-min { width:  100%;  } .col-1-12-min { width:  8.33%;  } .col-2-12-min { width:  16.66%;  } .col-3-12-min { width:  25%;  } .col-4-12-min { width:  33.33%;  } .col-5-12-min { width:  41.66%;  } .col-6-12-min { width:  50%;  } .col-7-12-min { width:  58.33%;  } .col-8-12-min { width:  66.66%;  } .col-9-12-min { width:  75%;  } .col-10-12-min { width:  83.33%;  } .col-11-12-min { width:  91.66%;  } .col-12-12-min { width:  100%;  } .col-none-min { display:  none;  } .col-block-min { display:  block;  } #blacklist h1 { font-size:  18px;  } #blacklist p { font-size:  12px;  } #maintenance h1 { font-size:  18px;  } #maintenance p { font-size:  12px;  } #page-not-found p { font-size:  12px;  } #form header { padding:  0 0 0 10px; font-size:  14px;  } #form nav { padding:  0 0 0 10px;  } #form fieldset { margin:  0 10px 20px 10px;  } #form article fieldset:last-child { margin:  0 10px 10px 10px;  } #form .section-title { padding:  10px 10px 10px 10px;  } #all:after { height:  850px;  } #header { padding:  10px 10px 0 10px;  } #header ul .read img { display:  block;  } #header ul .read span { display:  none;  } #header ul .read i { display:  block;  } #footer { height:  850px;  } #footer nav { margin:  0 auto 30px auto;  } #footer footer { padding:  30px 0 0 0;  } #footer footer p br { display:  block; clear:  both;  } #main-about { margin:  0 auto 20px auto; padding:  50px 10px 20px 10px;  } #main-about p { font-size:  14px; line-height:  24px;  } #main-about span a { line-height:  40px; font-size:  12px;  } #main-ad { margin:  0 auto 20px auto; padding:  20px 0 20px 0;  } #main-favourites { margin:  0 auto 20px auto; padding:  20px 0 20px 0;  } #main-favourites h2 { font-size:  18px;  } #main-favourites > div { margin:  0 0 0 0;  } #main-favourites ul li { width:  100%; height:  auto; border-radius:  0; border-bottom:  1px solid #fffaf5;  } #main-favourites ul li h3 { font-size:  16px;  } #main-favourites ul li p { height:  auto;  } #main-intro aside .apps { margin:  0 0 10px 0;  } #main-intro aside .apps .google,#main-intro aside .apps .apple { display:  block; float:  none; width:  100%; max-width:  170px; height:  auto; margin:  0 0 10px 0;  } #main-intro aside .apps .apple { margin:  0 0 0 0;  } #main-intro aside .read { display:  block; max-width:  170px; margin:  0 0 10px 0; padding:  0 0 0 0; text-align:  center;  } #main-intro aside .shop { display:  block; max-width:  170px; margin:  0 0 10px 0; padding:  0 0 0 0; text-align:  center;  } #main-intro aside .register { display:  block; max-width:  170px; padding:  0 0 0 0; text-align:  center;  } #main-join { margin:  0 auto 20px auto; padding:  50px 0 10px 0;  } #main-join > div { margin:  0 10px 0 10px;  } #main-join header h2 { margin:  0 0 10px 0; font-size:  18px; line-height:  18px;  } #main-join header p { margin:  0 0 15px 0; font-size:  14px; line-height:  20px;  } #main-join header span { line-height:  40px; font-size:  12px;  } #main-news { margin:  0 auto 0 auto; padding:  10px 0 0 0;  } #main-news h2 span { width:  100%; margin:  0 0 20px 0;  } #main-news h2 i { position:  relative; top:  auto; right:  auto; float:  left; font-size:  14px; line-height:  14px; transform:  translate( 0, 0 );  } #main-news h2 i::after { width:  14px; height:  14px;  } #main-news > div { aspect-ratio:  1 / 1;  } #main-news > div ul { left:  -500%; width:  2000%;  } #main-news > div .slide-back { left:  -400%;  } #main-news > div .slide-next { left:  -600%;  } #main-tags { margin:  0 auto 20px auto; padding:  20px 0 20px 0;  } #main-tags > div { aspect-ratio:  1 / 1;  } #main-tags > div ul { left:  -500%; width:  2000%;  } #main-tags > div .slide-back { left:  -400%;  } #main-tags > div .slide-next { left:  -600%;  } #read header { padding:  10px 60px 0 10px;  } #read header h2 { margin:  0 10px 0 0;  } #read header h2 span { font-size:  14px;  } #read header h2 .rtl { font-size:  20px; font-size:  16px;  } #read header h2 i { font-size:  12px;  } #read header .reload { display:  none;  } #read-info { right:  10px; bottom:  10px; max-width:  calc( 100% - 20px ); padding:  60px 0 10px 0;  } #read-info.letrari { right:  auto; bottom:  auto; top:  80px; left:  10px;  } #read-info .morph ul span { font-size:  12px;  } #read .actions ul { height:  auto;  } #read-map { top:  auto; width:  100%; height:  50%; bottom:  0;  } #read-comments > header ul li { font-size:  12px;  } #acc > div { max-width:  300px;  } #acc .avatar { margin:  0 20px 20px 20px; padding:  0 0 calc( 100% - 40px ) 0;  } #acc .locations > div span { font-size:  12px;  } #impressum { padding:  80px 10px 30px 10px;  } #impressum header { margin:  0 0 20px 0; padding:  0 0 20px 0;  } #impressum header h2 { font-size:  16px;  } #impressum header p { font-size:  14px;  } #impressum article h3 { margin:  0 0 10px 0; font-size:  14px;  } #impressum article p { font-size:  12px;  } #impressum article ol li { font-size:  12px;  } #legal { padding:  0 0 20px 0;  } #legal header { height:  300px; margin:  0 0 20px 0; padding:  0 0 20px 0;  } #legal header h2 { font-size:  20px;  } #legal header p { font-size:  16px;  } #legal article h3 { margin:  0 0 10px 0; font-size:  14px;  } #legal article p { font-size:  12px;  } #legal article ul li { font-size:  12px;  } #about-description p { font-size:  14px;  } #about-description ol li { font-size:  14px;  } #about-description ol li:last-child { margin:  0 0 0 0;  } #about-intro { padding:  0 0 70% 0; margin:  0 auto 120px auto;  } #about-intro header { max-width:  calc( 100% - 20px ); transform:  translate( -50%, 70% );  } #contact-intro { padding:  0 0 70% 0; margin:  0 auto 20px auto;  } #sources-list p { font-size:  14px;  } #sources-list ol li { font-size:  14px;  } #sources-list ol li:last-child { margin:  0 0 0 0;  } #sources-intro { padding:  0 0 70% 0; margin:  0 auto 20px auto;  } #pos-intro { padding:  0 0 70% 0; margin:  0 auto 20px auto;  } #pos-list ol li { font-size:  14px;  } #shop-intro aside .read { display:  block; margin:  0 0 20px 0; text-align:  center;  } #shop-intro aside .register { display:  block; text-align:  center;  } #shop-list ul li { width:  50%;  } #shop-view-details { padding:  0 10px 0 10px;  } #shop-view-general { padding:  90px 10px 0 10px;  } #faq-intro { padding:  0 0 70% 0; margin:  0 auto 20px auto;  } #press-intro { padding:  0 0 70% 0; margin:  0 auto 0 auto;  } #press-list { padding:  0 0 20px 0; margin:  0 auto 20px auto;  } #press-list > div ul { padding:  0 0 0 0;  } #press-list > div ul li { width:  100%;  } #press-list > div ul li > div { margin:  0 0 0 0;  } #press-post aside ul { padding:  0 0 0 0;  } #press-post aside ul li { float:  none; width:  100%; margin:  0 0 20px 0;  } #cart .payment-selection ul { width:  calc( 100vw - 20px ); margin:  0 0 0 10px;  } #my-websites-form aside { width:  100%; height:  80px; border-bottom:  1px dotted #28448a;  } #my-websites-form aside header { border-bottom:  0; width:  80px;  } #my-websites-form aside nav { left:  auto; right:  20px; width:  auto; margin:  0;  } #my-websites-form aside nav span { float:  left; padding:  0 0 0 45px;  } #my-websites-form aside nav span:before { left:  15px;  } #my-websites-form aside nav span:after { bottom:  auto; left:  auto; top:  39px; right:  30px; width:  40px; height:  2px;  } #my-websites-form aside nav .sel:before { left:  10px;  } #my-websites-form { padding:  0 0 0 0;  } #my-websites-form article { padding:  90px 20px 0 20px;  } #my-websites-form .confirmation { margin:  40px 0 0 0;  }  } @keyframes loading { 0% { opacity: 1; } 100% { opacity: 0; }  } @keyframes acc-animate { 0% { box-shadow: 0 0 20px 0 rgba( 0, 0, 0, 0.2 ); } 50% { box-shadow: 0 0 30px 0 rgba( 125, 0, 0, 0.5 ); } 100% { box-shadow: 0 0 20px 0 rgba( 0, 0, 0, 0.2 ); }  }