@import url('https://fonts.googleapis.com/css2?family=Lexend+Tera:wght@100..900&display=swap');
@import url(//fonts.googleapis.com/css?family=Dosis:500|Open+Sans+Condensed:300|Open+Sans:700italic,300&subset=latin,latin-ext);

/*@import 'color_definitions_theme_1.less';*/

/*@npinfo: rgba(47, 160, 236, 1); 

@npbluedim: rgba(103, 106, 122, 1);
@npbluefaint: rgb(85, 138, 155);
@npfeedback: rgba(3, 102, 214, 1);
@npok: rgba(76, 174, 76, 1);
@npalert: rgba(235, 103, 91, .94);

@npgray: rgba(85, 85, 85, 1);
@npcaption: rgba(65, 63, 61, 0.84); 
@npcaption2: rgba(155, 155, 95, 1); 

@fonttext: rgba(211, 201, 155, 1);
@nptitle: rgba(65, 63, 61, 0.84);
@fonttext2: rgba(234, 186, 48,1);*/


/*@judge: linear-gradient(to bottom,rgb(40, 40, 40) 0,rgb(14, 14, 14) 100%);
@nullnvote: rgba(74, 51, 26, .54);
@neuvote: rgba(104, 191, 249, 1); 
@upvote: rgba(102, 170, 102, 1);
@downvote: rgba(231, 76, 60, 1);

 
@int2: .54; 
@int3: .76; 
@int4: .90;  

@npbright1: rgba(211, 208, 193, .06); //sli
@npbright2: rgba(243, 243, 240, @int2); //box
@npbright3: rgba(243, 243, 240, @int3); //tip
@npbright4: rgba(243, 243, 243, @int4); //hea

@npdark1: rgba(34, 34, 34,.13);  darkened headers bgdrk
@npdark2: rgba(111, 103, 103, 0.56); // dark gray z for headers bgdgr
@npdark3: rgba(65, 63, 61, 0.84); //gray
@npdark4: rgba(62, 69, 77, @int4); //blacky, bg

*/

:root {
  --blue: #1e90ff;
  --npdark4: rgba(62, 69, 77, .90);
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    background: #eee;
}

h1, h2 {
	text-align: center;
	color: #3062aa;
  font-family: "Lexend Tera", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;	
}
h2 {
    font-family: "Exo 2";
    font-size: 80%;
}



article, .un_article { 
    font-size: 1.65rem;
    width: 100%;
    padding: 1rem;
    text-align: center;
    text-indent: 1rem;
    order: 2;
    /*color: white;*/
}

article > h1, article > h2, article > h3, article ul, article .un_widefull {
    width: 70%;
    margin: 2rem auto .3rem;
    text-align: left;
    color: @nptitle;
    font-family: "Open Sans Condensed"!important;
}
article > h2 {
    strong {
      font-family: "Open Sans";
      color: #aaa;
    }
      margin: 5rem auto 3rem;
      font: italic 700 1.6rem 'Open Sans'!important;
}

article > h3 {

      font: italic 700 1.2rem 'Open Sans'!important;
}


.un_article > p, article > p {
    margin: .3rem auto;
    width: 70%;
    font-size: 1.3rem;
    text-align: justify;
}


article > p:nth-of-type(1) {
      margin-top: 3rem;
    }
article > h3 + p {
  margin-top: 1.5rem!important;
}

article > ol, article > ul {
    font-size: 1.5rem;
    text-align: left;
    margin: .2rem auto .2rem;
    

}
article > ul ul {
    font-size: 1.4rem;
    text-align: left;
    margin: .2rem auto .2rem;
    padding: .5rem;
    width: 100%;

}
article  ol > li, article ul > li{
    font-size: 1.5rem;
    text-align: left;
    text-indent: 0;
}
article strong{
/*    font-family: "Eczar";*/
    text-transform: uppercase;
}


article li:before {
    color: #cca !important; /* or whatever color you prefer */
    font-family: "Eczar";
    margin-right: 1rem;
}

article blockquote {
    width: 70%;
    margin: 1rem auto;
    border-left: 10px solid @npbright3;
    padding: 3rem;
    background-color: @npbright2;
    text-align: justify;
    em {
    text-align: justify!important;

    }
}


main article {
    margin: 4rem auto;
    /*width: 80%;*/
/*    display: block;*/
    /*background: red;*/
}

article[id*="placeholder"]{
    padding: 2rem;
}
article img {
    width: 80%;
    margin: 3rem auto!important;
    text-align: center;
}


  .np_notice {
    margin: 3rem auto; 
/*    width: 70%;*/
    padding:.4rem;
    font-size: 0.8rem;
    border-left:3px solid rgba(60, 100, 230, 50%) ;
    background: #eee!important;
    color: black;
    text-align: left;
    strong, h4 {
      font-weight: 800;
      font-family: "Exo 2";
    }

  }
  .np_notice + .np_notice {
    margin-top: 2rem!important;
  }

  body > .np_notice {
    width: 100%;
  }
  .np_notice.info {

    font-size: 1.2rem;
    border-left: 4px solid rgba(60, 100, 230, 50%) ;
  }
  .np_notice.warning {

    font-size: 1.2rem;
    border-left:4px solid red ;
  }


.np_description, [rel="description"] {
  padding: 1rem;
  margin: .7rem;
  background: white!important;
  color: var(--npdark4)!important;
/*  color: red!important;*/
  text-align: justify;
  /*border-radius: 6px;*/
  /*border: 3px solid #666;*/
  p {
    text-align: left;
    max-width: 90%;
    margin: .2rem auto;
    font-size: 1.2rem!important;
  }
  a {
    color: @neuvote!important;
  }
  h2 {
    text-align: center;
  }
}


.un_object {
    padding: .2rem;
    display: block;
    text-align: left;
    position: relative;


}


//////////////////////////////
//
// FLEX SOLUTIONS LAYOUT
//
////////////////////////////////




/*FLEX solutions*/


.un_flex {
    display: flex !important;
    flex-wrap: nowrap;
}

.un_flex_vt {
    flex-direction: column;
    justify-content: flex-start;
    align-self: start;
}
.un_flex_vc {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.un_flex_vs {
    flex-direction: column;
    /*justify-content: space-around;*/
    justify-content: space-between;
    align-items: stretch;
}

.un_flex_hc {
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.un_flex_ht {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

}

.un_flex_hs {
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    align-content: flex-start;
}


// makes the width  even unregardedly to the content
// http://stackoverflow.com/questions/7985021/css-flexbox-issue-why-is-the-width-of-my-flexchildren-affected-by-their-content
.un_flex_even > * {

      width: 0;
    /*flex-basis: 200px;*/
    /*flex-grow: 0;*/
    /*flex-shrink: 0;*/
        flex: 1 1 auto;
}
.un_flex_even {

    justify-content: spaced-between;
    width: : 100%;
}


.un_flex_wrap {
      flex-wrap: wrap;
}

.un_flex_sc {
align-self: center;
}

.un_flex_vc > div, [rel="placeholder"] > [rel="object"] {
  width: 100%;
}
.un_flex > div {
  flex: 1 1 auto;
  /*width: 90%;*/
  max-width: 100%;
}
.un_flex > img {
  flex: 1 1 16rem;
}

.un_flex > h3 {
  width: 100%
}

.un_flex > h2, .un_flex > h3 {
    width: 100%;
    text-align: center;
    padding: 1rem;
}

.un_flex_c20 > * {
  flex: 1 1 20rem!important;
}

.un_flex > .un_presenter_2 {
  flex: 1 2 42rem;
}
.un_flex > .un_presenter_3 {
  flex: 1 1 20rem;
}


.un_flex > i {
  flex: 1 1 16rem;
  font-size: 3rem;
  /*background: red;*/
    align-self: center;
    color: white;
    text-align: center;
    text-indent: 0;
    text-shadow: 4px 5px 5px @npbright2;
}