@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap);
@import url('https://use.fontawesome.com/releases/v5.3.1/css/all.css');
:root {
    --fondo: url(../../../public/imagenes/fondo.jpg);
    --light: #ffffff;
    --color: #000;
    --color1:#c3cadd;
    --color2:#8196cf;
    --color3:#ebe9f4;
    --color4:#4364a7;
    --color5:#f4a362;
    --color6:#e33977;
    --color7:#81e0e6;
    --headerFont: poppins,sans-serif;;
    --bodyFont: poppins,sans-serif;
}

@media (prefers-color-scheme:dark) {}

.dark-mode {
    --fondo: url(../../../public/imagenes/fondo-dark-2.jpg);
    --light: #be6b89;
    --color: #2c2426;
    --color1: #ffdce9;
    --color2: #c2d2ff;
    --color3: #ce7394;
    --color4: #000;
    --color5: #ffd9bb;
    --color6: #ffadc9;
    --color7: #bffbff;
}

/**  ------------- scroll ---------------*/
::-webkit-scrollbar{background:var(--light);width:6px;}
::-webkit-scrollbar-thumb{background:var(--color4);border:1px solid var(--color4);border-radius:4px;}
/**  ------------- base ---------------*/
*{box-sizing:border-box}
html {scroll-behavior: smooth}
body,html{position:relative;height:100%}
body{margin:1em;width:calc(100% - 2em);height:calc(100% - 2em);background: var(--color6);padding:0;font-family:var(--bodyFont);font-size: 14px;font-weight:400;line-height:1.6;font-style:normal;overflow:hidden;color:var(--color);letter-spacing: 1.8px;}
.dark-mode{background: var(--color3);}

@media (max-width:768px){body{margin:0;width:100%;height:100%;overflow:auto}}
img{max-width:100%;width:199%}
a{color:var(--color4)}
a,a:active,a:focus,a:hover{-webkit-transition:color .5s ease;transition:color .5s ease}
a:active,a:focus,a:hover{color:var(--color2)}
h1,h2,h3,h4,h5,h6{font-family:var(--headerFont);line-height:1.2}
blockquote{margin:1.5em 10px;padding:.5em 10px;quotes:"\201C" "\201D" "\2018" "\2019"}
blockquote:before{color:var(--color6);content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em}
blockquote p{display:inline}
h1,h2,h3,h4,h5,h6{color:var(--color4);position: relative;}
b,strong{color: var(--color6);font-weight: bold;}
p{font-size:16px;font-weight: 400;line-height: 26px;margin:0;letter-spacing: 1.5px;}
/**  ------------- animation ---------------*/
img{opacity:1;visibility:visible;-webkit-animation:clip2 1s ease-out 1;animation:clip2 1s ease-out 1;-webkit-clip-path:circle(100% at 50% 50%);clip-path:circle(100% at 50% 50%)}
h1,h2,h3,h4,h5{-webkit-animation:clip .8s ease-out 1;animation:clip .8s ease-out 1;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
@-webkit-keyframes clip2{0%{-webkit-clip-path:circle(0 at 50% 50%);clip-path:circle(0 at 50% 50%)}}
@keyframes clip2{0%{-webkit-clip-path:circle(0 at 50% 50%);clip-path:circle(0 at 50% 50%)}}
@-webkit-keyframes clip{0%{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}
@keyframes clip{0%{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}

/**  ------------- tabla ---------------*/
table{padding:0;border-collapse:collapse;width:100%;margin:30px auto;background:white}
table tr{border-top:1px solid black;background-color:white;margin:0;padding:0}
table tr th{font-weight:700;border:1px solid black;color:black;margin:0;padding:6px 13px}
table tr td{border:1px solid black;margin:0;padding:6px 13px}
table tr td:first-child,table tr th:first-child{margin-top:0}
table tr td:last-child,table tr th:last-child{margin-bottom:0}

/**  ------------- hr ---------------*/
hr{border:0;height:1px;width:10%;position:relative;margin:30px auto;}
hr.center{background:#39D1B4;}
hr.center:before{content:"";width:6px;height:6px;background:#39D1B4;display:inline-block;border:2px solid #39D1B4;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;position:absolute;top:-4px;left:50%;margin:0 0 0 -3px;}
/**  ------------- grid ---------------*/
.container{max-width:1400px;margin:0 auto;width:95%}
.row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:1rem;margin-bottom:1rem}
.row:first-child{margin-left:0}
.col-1:first-child,.col-2:first-child,.col-3:first-child,.col-4:first-child,.col-5:first-child,.col-6:first-child,.col-7:first-child,.col-8:first-child,.col-9:first-child,.col-10:first-child{margin-left:0;}
.col{-webkit-box-flex:1;-ms-flex:1;flex:1}
.col,[class*=" col-"],[class^=col-]{margin-left:4%}
.col-1{-webkit-box-flex:1;-ms-flex:1;flex:1}
.col-2{-webkit-box-flex:2;-ms-flex:2;flex:2}
.col-3{-webkit-box-flex:3;-ms-flex:3;flex:3}
.col-4{-webkit-box-flex:4;-ms-flex:4;flex:4}
.col-5{-webkit-box-flex:5;-ms-flex:5;flex:5}
.col-6{-webkit-box-flex:6;-ms-flex:6;flex:6}
.col-7{-webkit-box-flex:7;-ms-flex:7;flex:7}
.col-8{-webkit-box-flex:8;-ms-flex:8;flex:8}
.col-9{-webkit-box-flex:9;-ms-flex:9;flex:9}
.col-10{-webkit-box-flex:10;-ms-flex:10;flex:10}
@media screen and (max-width:768px){.col,[class*=" col-"],[class^=col-]{margin:1rem 0;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%}}
/**  ------------- boxes ---------------*/
.boxes{overflow:hidden;max-width:1200px;margin:0 auto;margin-top:3em}
.box{width:calc(100% - 1em)}
.box,.box-2{margin:.5em;float:left}
.box-2{width:calc(50% - 1em)}
.box-3{margin:.5em;width:calc(33.33333% - 1em);float:left}
@media (max-width:60em){.boxes{padding:1em}.box,.box-2,.box-3{margin:0;width:100%;float:none}}
/**  ------------- float ---------------*/
.pull-right,.float-right{float:right}
.pull-left,.float-left{float:left}
/**  ------------- text ---------------*/
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
/**  ------------- screen ---------------*/
.full-screen{width:100%;min-height:100vh}
.full-width{width:100%}
/**  ------------- align ---------------*/
.vertical-align{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.center,.horizontal-align{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.center{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
.left,.right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
.fixed{position:fixed;width:100%}
/**  ------------- hide show  ---------------*/
@media screen and (max-width:400px){.hide-phone{display:none}}
@media screen and (max-width:768px){.hide-tablet{display:none}}
/**  ------------- background  ---------------*/
.bg-light{background-color: var(--light);}
.bg-color{background-color: var(--color);}
.bg-color1{background-color: var(--color1);}
.bg-color2{background-color: var(--color2);}
.bg-color3{background-color: var(--color3);}
.bg-color4{background-color: var(--color4);}
.bg-color5{background-color: var(--color5);}
.bg-color6{background-color: var(--color6);}
.bg-color7{background-color: var(--color7);}
.bg-light{background-color: var(--light);}
.text-color{color: var(--color);}
.text-color1{color: var(--color1);}
.text-color2{color: var(--color2);}
.text-color3{color: var(--color3);}
.text-color4{color: var(--color4);}
.text-color5{color: var(--color5);}
.text-color6{color: var(--color6);}
.text-color7{color: var(--color7);}
.fw-bold{font-weight:bold;}
/**  ------------- padding  ---------------*/
.p-0{padding:0;}
.p-1{padding:1em}
.pt-1{padding-top:1em}
.pb-1{padding-bottom:1em}
.pl-1{padding-left:1em}
.pr-1{padding-right:1em}
.p-2{padding:2em}
.pt-2{padding-top:2em}
.pb-2{padding-bottom:2em}
.pl-2{padding-left:2em}
.pr-2{padding-right:2em}
.p-3{padding:3em}
.pt-3{padding-top:3em}
.pb-3{padding-bottom:3em}
.pl-3{padding-left:3em}
.pr-3{padding-right:3em}
/**  ------------- margin  ---------------*/
.m-auto{margin:auto;}
.m-0{margin:0;}
.m-1{margin:1em}
.mt-1{margin-top:1em}
.mb-1{margin-bottom:1em}
.ml-1{margin-left:1em}
.mr-1{margin-right:1em}
.m-2{margin:2em}
.mt-2{margin-top:2em}
.mb-2{margin-bottom:2em}
.ml-2{margin-left:2em}
.mr-2{margin-right:2em}
.m-3{margin:3em}
.mt-3{margin-top:3em}
.mb-3{margin-bottom:3em}
.ml-3{margin-left:3em}
.mr-3{margin-right:3em}
/**  ------------- video  ---------------*/
.video video{transition:0.4s;width:100%;max-width:100%;display:block;border-radius:4px 4px 0 0}
/**  ------------- frame  ---------------*/
.iframe{position:relative;overflow:hidden;width:100%;padding-top:56.25%}
.iframe embed,.iframe iframe,.iframe object{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%}
/**  ------------- divider  ---------------*/
.divider{position:relative;font-size: 1.5em;margin:2em 1em;width: calc(100% - 4rem);height: 5px;}
.divider:after{content:" ";position:absolute;bottom: 1px;left:0;padding:0.2em;width:100%;border-bottom: 2px solid var(--color3);z-index:2;}
.divider:before{content:" ";position:absolute;bottom: 0;left:0;width: 15%;padding: 0px;border-bottom: 4px solid var(--color6);z-index:3;border-radius: 3px;}