:root {
  --text-color-01: #333;
  --text-color-02: #9f9f9f;
  --text-color-03: #ccc;
  --highlight-color-01: #690034;
  --highlight-color-02: #f39132;
  --background-color-01: #414d5e;
  --background-color-02: #7c8ea7;
  --background-color-03: #e8e8e8;
  --background-color-04: #7c8ea7;
  --font-family-01: Roboto, sans-serif;
  --font-family-02: Quicksand, sans-serif;
}

html {
    height:101vh;
    background-color:var(--background-color-01);
}
body {
    padding-top:3em;
    background-color:var(--background-color-01);
    background:-moz-linear-gradient(top,var(--background-color-01), var(--background-color-02) 50vh,var(--background-color-01));
    background:-webkit-linear-gradient(top,var(--background-color-01),var(--background-color-02) 50vh,var(--background-color-01));
    background:-o-linear-gradient(top,var(--background-color-01),var(--background-color-02) 50vh,var(--background-color-01));
    background:-ms-linear-gradient(top,var(--background-color-01),var(--background-color-02) 50vh,var(--background-color-01));
    background:linear-gradient(to bottom,var(--background-color-01),var(--background-color-02) 50vh,var(--background-color-01));
    -pie-background:linear-gradient(top,var(--background-color-01),var(--background-color-02) 50vh,var(--background-color-01));
    font-family:var(--font-family-01);
    line-height:1.5;
    font-size: calc(12px + (16 - 12) * (100vw - 350px) / (1600 - 350));
}

#demo{
	margin-top:-3em;
	background-color:#690034;
	margin-bottom:3em;
}

#demo h1, #demo p {
	margin:0;
	color:#ffbf5c;
	text-align:center;
	font-family:Quicksand;
}

#wrapper {
    width:90vw;
    max-width:1200px;
    margin-right:auto;
    margin-bottom:3em;
    margin-left:auto;
    background-color:var(--background-color-03);
    -webkit-box-shadow:1px 1px 2px 0 rgba(51,51,51,.5);
    box-shadow:1px 1px 2px 0 rgba(51,51,51,.5);
    border:0px solid #AD2227;
    border-radius:2em;
}
#container {
	  animation-duration: 1.5s;
      animation-name: open;
}

@keyframes open  {
    0% { opacity:0.1;}
    100% { opacity:1;}
}



#wrapper,
#main .flex [class^="ce_"] {
    border-radius:.3em;
}
#main {
    min-height:50vh;
}
#main .inside {
    padding:1em 3em 2em;
}

#main a {
    color:var(--highlight-color-01);
}

header {
    background-color:var(--highlight-color-01);
    border-radius:0.3em 0.3em 0 0;
}
header .inside nav {
   /* background-color:var(--highlight-color-01);*/
}
header .inside {
    padding-top:1.5em;
    display:flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
header .logo {
    width:20em;
    margin-top:0em;
    margin-bottom:1.5em;
    margin-left:3em;
}
.claim {
    margin-top:1.9em;
    margin-right:3em;
    padding-top:.5em;
    padding-bottom:.5em;
    font:.9em Roboto;
    color:#333;
    letter-spacing:.08em;
}
header nav {
    flex-basis:100%;
    padding-left:2em;
}
header nav ul li {
    display:inline-block;
}

header nav ul li a,
header nav ul li strong {
    display:block;
    margin-right:.8em;
    margin-left:.8em;
    padding:0.7em 0.3em 0 0.3em;
    font-family:var(--font-family-02);
    font-weight:500;
    font-size:1.2em;
    text-decoration:none;
    color:var(--text-color-03);
    text-align:center;
    transition: color ease-in-out 1s;    
}
header nav ul li a:after,
header nav ul li strong:after {
	display:block;
	width:100%;
	height:3px;
	background-color: var(--highlight-color-02);
	content:" ";
	transition: all ease-in-out 1s;
	text-align:center;
	transform:scale(0,1);
	border-radius:0.3em;
}

header nav ul li:hover a:after,
header nav ul li.trail a:after,
header nav ul li.active strong:after {
	width:100%;
    transition: all ease-in-out 1s;
    transform:scale(1,1);
}
header nav ul li:hover a,
header nav ul li.trail a,
header nav ul li.active strong {
    color: var(--text-color-02);
    transition: color ease-in-out 1s;
}
header nav ul li a {
    text-decoration:none;
}

footer{
	background-color:var(--highlight-color-01);
	color:#fff;
	border-radius: 0 0 0.3em 0.3em;
}

footer .inside {
    padding:1em 2em 0.5em 2em;
    text-align:center;
    font-size:.833em;
    box-sizing:border-box;
}

footer a {
	color:#fff;
}

footer p,
footer ul {
    margin-top:0;
    margin-bottom:.5em;
}
footer ul {
    padding-left:0;
}
footer nav ul li {
    display:inline-block;
    padding-right:.5em;
    padding-left:.5em;
}
footer a,
#main a {
    text-decoration:none;
}
footer nav ul li span,
footer nav ul li strong {
    font:.9em Roboto;
    color:#666;
}
footer nav ul li strong,
footer nav ul li:hover span,
footer nav ul li.trail span {
    color:#AD2227;
}
h1,
h2,
h3,
h4 {
    margin-top:1em;
    margin-bottom:.5em;
    font-family:var(--font-family-02);;
}
.msys {
    font-family:Bookmania-Semibold;
    color:#c92128;
}
h1 .msys {
    font:1.15em Bookmania-Bold;
    color:#c92128;
}
h1 {
    font-size:1.424em;
    font-weight:normal;
    color:var(--background-color-01);
}
h2 {
    font-size:1.266em;
    font-weight:normal;
    color:var(--highlight-color-01);
}
.flex h2 {
    margin-top:.5em;
    text-align:left;
}
h3 {
    font-size:1.125em;
    color:var(--background-color-02);
}
.flex {
    display:flex;
    flex-flow:row wrap;
    justify-content: space-between;
}
figure {
	line-height:0;
}

#main .flex {
    margin-top:1em;
}
#main .flex [class^="ce_"] {
    margin-right:.2em;
    margin-bottom:2em;
    padding:1em 1.5em;
    background-color:#fefefe;
    -webkit-box-shadow:1px 1px 3px rgba(51,51,51,.5);
    box-shadow:1px 1px 3px rgba(51,51,51,.5);
    border:1px solid #AD2227;
    border-radius:1em;
    flex-basis:47.5%;
    box-sizing:border-box;
}
#main .flex.thirds [class^="ce_"] {
    flex-basis:30%;	
}

#main .flex [class^="ce_"].noflex{
	 flex-basis:100%;	
}

#main .flex [class^="ce_"].noborder {
	background:transparent;
	border:0;
	box-shadow:none;
	padding:0;
}

#main .flex .ce_image.noborder {
	border:0;
	box-shadow:none;
	padding:0;
	position:relative;
}

#main .flex .ce_image.noborder h1 {
	position:absolute;
	bottom:10%;
	color:#fff;
	background-color:rgba(0, 0, 0,0.3);
	display:inline-block;
	margin:0;
	padding:0.5em;
	border-radius:0.3em;
	left:1em;

}

#main .flex .ce_image {
    background-color:#fefefe;
    -webkit-box-shadow:1px 1px 3px rgba(51,51,51,.5);
    box-shadow:1px 1px 3px rgba(51,51,51,.5);
    border:1px solid #AD2227;
    border-radius:1em;
}
#main .flex .ce_image img {
    border-radius:1em;
}

#main ul {
	list-style-type:none;
	list-style-position:outside;
}

#main ul li{
   margin-left:0em;
  
}

#main .ce_text > ul {
	text-indent:-1.3em;
	margin-left: 1.3em;
	
}

#main ul ul{
	list-style-type:disc;
	margin-left:1.3em;
	text-indent:0;
}

#main .ce_text > ul > li:before{
	content:'\f046 ';
	font-family:ForkAwesome;
	font-weight:400;
	font-size:1.1em;
	margin-right:0.3em;
	color:var(--background-color-02);
}



.fas,
far,
fab {
    padding-right:.2em;
    color:#AD2227;
}
.mod_cms_accept_tags button[value="accept"],
.mod_cms_cookie_bar button[value="accept"] {
    background-image:none;
}
.mod_cms_accept_tags form {
    border-radius:.2em;
}