body { margin: 0px; padding: 0px; position: relative; font-family: Arial; }

a { color: #a81a17; }

.wrap {  }

.logo { text-decoration: none; position: relative; }
.logo img { width: 75px; height: 75px; margin: 17px; }

.header { position: fixed; width: 100%; background: rgba(0,0,0,0.0); height: 150px; z-index: 999;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}


.header .menu { display: none; }
.header ul { position: absolute; right: 35px; top: 10px; padding: 0px 0px 0px 120px;}
.header ul li { display: inline-block; }
.header ul li a { display: block; padding: 15px 25px; font-family: Arial; text-decoration: none; color: #fff;  text-shadow: 1px 1px #000; }
.header ul li a:hover { text-decoration: underline; }

.member { background: #a81a17; text-shadow: 0px 0px #000 !important; }
.navc2a { background: rgba(0,0,0,0.8); border: 1px solid #fff; padding: 14px 24px !important; margin-left: 10px; text-shadow: 0px 0px #000 !important; }
.navc2a:hover, .member:hover { background: #fff; color: #a81a17; text-decoration: none !important; }

.landingpage { width: 100%; height:100vh; background: rgba(0,0,0,0.7);  /* -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; */ }

.landingpage .holder { padding: 19% 0%; text-align: center; }
.landingpage h1 { color: #fff; font-weight: normal; font-size: 2.5em; }
.landingpage h3 { color: #fff; font-weight: normal; font-size: 1.5em; letter-spacing: 1px; margin: 0px 0px 10px 0px; }
.landingpage p { color: #fff; font-style: italic; text-align: center; width: 50%; margin: 0 auto; line-height: 25px; }

.holder { width: 1200px; margin: 0 auto; }

h1 sup { font-size: 20px; font-weight: normal; }

.dimmer { display: none; position: fixed; z-index: 111; background: rgba(0,0,0,0.8); width: 100%; height: 100%; }
.dimmer > div { width: 25%; margin: 0 auto; margin-top: 17%; padding: 50px; background: #fff; position: relative; }
.dimmer.active { display: block; }
.dimmer .close { text-align: center; font-size: 15pt; width: 30px; height: 30px; line-height: 30px; cursor: pointer; position: absolute; right: 3px; top: 5px }
.dimmer .pasw { padding: 12px 18px; font-size: 12pt; color: #333; background: #eee; border: 1px solid #ccc; margin: 0px 0px 10px 0px; width: calc(100% - 36px); }
.dimmer p { font-size: 9pt; line-height: 16px; }

.landingpage .c2a { display: inline-block; padding: 18px 25px; width: 120px; text-align: center; background: #a81a17; margin: 30px 10px; color: #fff; font-weight: normal; font-size: 14pt; text-decoration: none;  }
.landingpage .c2b { display: inline-block; padding: 16px 23px; width: 120px; text-align: center; background: rgba(0,0,0,0.5); border: 2px solid #fff; margin: 30px 10px; color: #fff; font-weight: normal; font-size: 14pt; text-decoration: none; }
.landingpage .c2a:hover, 
.landingpage .c2b:hover { background: #fff; color: #a81a17; }

.c2a { display: inline-block; padding: 15px 20px; width: auto; text-align: center; background: #a81a17; margin: 10px 0px; color: #fff; font-weight: normal; font-size: 12pt; text-decoration: none;  }
.c2a:hover { background: #ddd; color: #a81a17;  }


.content { font-size: 0px; padding-bottom: 25px; }

.content h2 { font-size: 22pt; margin: 0px; padding: 50px 0px 20px 0px; text-align: center; width: 100%; font-weight: normal; color: #a81a17; }

.features .col50 { padding: 50px 50px 50px 180px; display: inline-block; font-size: 12pt; width: calc(50% - 230px); line-height: 25px; vertical-align: top; position: relative;  }
.features .col50 h3 { margin: 0px 0px 20px 0px; }
.features .col50 img { position: absolute; left: 50px; top: 50px; }
.col50 ul { margin: 0px; padding: 0px; list-style: none; }
.col50 ul li { padding: 3px 0px 3px 25px; }
.col50 ul li::before { content: "\E037"; color: #a81a17; margin: 0px 0px 0px -25px; }

::before{ font-family: 'Material Icons'; font-size: 14pt; position: absolute; color: #391a12; }

.grey { background: #eee; }

.dark { background: #333; color: #aaa; }

.col100 { padding: 25px 50px 25px 50px; display: inline-block; font-size: 12pt; width: calc(100% - 100px); line-height: 25px; vertical-align: top; position: relative; font-size: 11pt; text-align: center; }

.col50 { padding: 50px 50px 50px 50px; display: inline-block; font-size: 12pt; width: calc(50% - 100px); line-height: 25px; vertical-align: top; position: relative;  }
.col25 { padding: 50px; display: inline-block; font-size: 12pt; width: calc(25% - 100px); line-height: 25px; vertical-align: top; position: relative;  }
.col33 { padding: 50px 0px 50px 50px; display: inline-block; font-size: 12pt; width: calc(33.333333333% - 50px); line-height: 25px; vertical-align: top; position: relative;  }


.col50 h3 { margin: 0px 0px 20px 0px; }
.col50 ul { margin: 0px; padding: 0px; list-style: none; }
.col50 ul li {  }
.icons img { position: absolute; left: 50px; top: 50px; }

.footer { background: #222; color: #777; }
.footer .col50 { padding: 25px 50px 0px 50px; font-size: 9pt; }
.footer a { color: #999; text-decoration: none; line-height: 0px; }

.dark a { color: #eee; }
.dark h2 { margin: 0px; padding: 20px 0px; color: #999; }


input[type=text], input[type=email], textarea { padding: 10px 10px; font-size: 11pt; width: calc(100% - 20px); border: 1px solid #444; background: #222; -webkit-appearance: none; font-family: Arial; color: #ccc; }

label { display: block; line-height: 40px; font-size: 11pt; }

.sendbutton { color: #fff; font-size: 11pt; cursor: pointer; text-decoration: none; background: #a81a17; padding: 14px 19px; border: 1px solid #a81a17; -webkit-appearance: none; font-family: Arial; }
.sendbutton:hover { background: #fff; color: #a81a17; }

.navc2a.demo { display: none; }

.xtramargin { padding-top: 40px; }

.mright { text-align: right; }
.fright { float: right; }

.icon { width: 70px; height: 70px; padding: 15px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }


.date { color: #fff; font-size: 28pt; text-align: center; padding: 20px 15px 10px 15px !important; width: 50px; height: 50px; float: left; margin: 0px 20px 0px 0px; }
.date span { font-size: 11pt; display: block; }


.red { background: #a81a17; }
.pink { background: #7f7492; }
.purple { background: #564670; }
.blue { background: #4b99bc; }
.none { background: #cccccc; }
.white { background: #ffffff; }

sup { font-size: 0.5em; }

.quote { font-style: italic; position: relative; text-align: justify; }
.quote:before { content: '"'; font-size: 32pt; font-family: Georgia; color: #ccc; z-index: 0; position: absolute; left: -20px; top: -10px; }
.quote:after { content: '"'; font-size: 32pt; font-family: Georgia; color: #ccc; z-index: 0; position: absolute; bottom: -20px; right: 0px; } 

cite strong { font-size: 12pt; }
cite { clear: both; display: block; margin: 12px 0px 0px 0px; font-size: 10pt; }

.tabholder .white { margin: 50px 0px 0px 0px; }
.tabholder h2 { padding-bottom: 0px; }

ul.tabs { font-size: 0px; margin: -50px -50px 50px -50px; width: calc(100% + 100px); }
ul.tabs li { font-size: 12pt; padding: 15px 0px; width: 25%; display: inline-block; text-align: center; cursor: pointer; background: #ddd; color: #777; }
ul.tabs li.current { background: #ffffff; color: #222; }

.tab-content{ display: none; }
.tab-content.current { display: inherit; }

.sts { display: block; clear: both; height: 50px; }

.videoWrapper { position: relative;	padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;	height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0;	width: 100%; height: 100%; }

.header a span { text-decoration: none; color: #999; font-size: 8pt; width: 80px; position: absolute; left: 20px; top: 3px; line-height: 14px; }

.social img { width: 35px; clear: both; display: block; margin: 25px 0px 0px 0px; }

.screenshot { width: calc(100% - 22px); padding: 10px; background: #eee; border: 1px solid #ddd; margin: 0px 0px 10px 0px; }

.pdf, .youtube { clear: both; display: block; padding: 0px 0px 0px 35px; text-decoration: none; margin: 10px 0px 0px 0px; }

.youtube::before { content: "\E04A"; color: #a81a17; margin: 0px 0px 0px -35px; font-size: 30px; }
.pdf::before { content: "\E415"; color: #a81a17; margin: 0px 0px 0px -35px;  font-size: 30px; }

.mobile.youtube { display: none; }

.selected.youtube { color: #ccc; }
.selected.youtube::before { content: "\E04A"; color: #ccc;  }

.language { text-align: center; }
.language a { display: inline-block; margin: 15px 5px; }


.blacklayer { position: fixed; z-index: 111; background: rgba(0,0,0,0.8); width: 100%; height: 100%; }
.blacklayer .window { position: relative; width: 30%; height: 25%; margin: 0 auto; margin-top: 10%; background: #fff; padding: 40px; }
.blacklayer .window h2 { margin: 0px 0px 20px 0px; }


.video-background {  background: url(../images/videobg.jpg) no-repeat center center fixed #000; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -99; }
.video-foreground,
.video-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

#vidtop-content { top: 0; color: #fff; }

.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) { .video-foreground { height: 300%; top: -100%; } }
@media (max-aspect-ratio: 16/9) { .video-foreground { width: 300%; left: -100%; } }
@media all and (max-width: 600px) { .vid-info { width: 50%; padding: .5rem; } .vid-info h1 { margin-bottom: .2rem; } }
@media all and (max-width: 500px) { .vid-info .acronym { display: none; } }

.stslogo { height: 18px !important; width: auto !important; margin: 0px !important; padding: 0px !important; }

.headbox { background: #444; height: 130px; }
article { font-size: 11pt; line-height: 1.5em; padding: 50px; border-bottom: 1px solid #ccc; }
article:last-child { border: 0px; }
article h2 { font-size: 16pt !important; text-align: left !important; padding: 0px 0px 5px 0px !important; margin: 0px 0px 0px 0px !important; color: #222 !important; }

/************************************************************************************
smaller than 1200
*************************************************************************************/
@media screen and (max-width: 1200px) {

	.holder { width: 100% !important; }
	.header ul { text-align: right; }

}


/************************************************************************************
smaller than 830
*************************************************************************************/
@media screen and (max-width: 830px) {

.holder { width: calc(100% - 50px) !important; padding: 25px; }
.landingpage p { width: 100%; padding: 25px 0px; }
.landingpage h1 { font-size: 2em; margin-top: 70px; }

.landingpage .c2a,
.landingpage .c2b { padding: 15px 20px; width: 120px; margin: 10px; display: none; }

.header ul li:last-child { display: none !important; }

.features .col50 { width: calc(100% - 100px); padding: 0px; font-size: 11pt; padding-left: 100px; padding-bottom: 50px; }

.features .col50 img { position: absolute; left: 0px; top: 0px; }

.col50, .col25, .col33  { width: calc(100% - 50px); padding: 25px; }

.icon { width: 50px; height: 50px; padding: 15px; }

.blacklayer .window { width: 70%; height: 40%; }

.header ul { position: absolute; right: 0px; top: 52px; padding: 0px; margin: 0px; width: 100%; background: rgba(0,0,0,0.9); display: none; }
.header ul.open { display: block; }
.header ul li { display: block; border-bottom: 1px solid #222; text-align: left; }
.header ul li a { padding: 15px 20px; }

.navc2a.demo { margin: 0px !important; display: block !important; }

.menu { display: block !important; width: 25px; height: 25px; position: absolute; right: 20px; top: 18px; background: url(../images/menu.svg); background-size: cover; cursor: pointer; }

.logo img { width: 40px; height: 40px; margin: 10px; }
.header { height: 100px; }
.header a span { left: 60px; top: -35px; }

.header ul { top: 60px; }

.footer .col50 { padding: 5px 25px; text-align: center; }


}

/************************************************************************************
smaller than 550
*************************************************************************************/
@media screen and (max-width: 550px) {

.holder h2 { padding-top: 80px !important; }

ul.tabs li { width: 50%; }
ul.tabs {font-size: 0px; margin: -50px -25px 50px -25px; width: calc(100% + 50px); }

.landingpage h1 { font-size: 1.8em; margin-top: 20px; }
.landingpage h3 { font-size: 1.4em; font-weight: normal; }

.video { width: 100%; padding: 50px 0px 0px 0px; }

.content h2 { padding-top: 25px; }


.navc2a { margin: 0px; }



.lightboxLink { pointer-events: none; cursor: default; }
.lightboxLink.youtube { display: none; }

.mobile.youtube { display: block; }

.headbox { height: 60px; }
article { padding: 0px 0px 50px 0px; }
.content article h2 { padding-top: 10px !important; } 

.landingpage .c2a, .landingpage .c2b {  padding: 15px 15px; width: 90px; margin: 5px; font-size: 11pt; }

.dimmer > div { width: 50%; margin-top: 30%; }



}


/************************************************************************************
smaller than 375
*************************************************************************************/
@media screen and (max-width: 375px) {

.landingpage h1 { font-size: 1.5em; margin-top: 20px; }
.landingpage h3 { font-size: 1.2em; font-weight: normal; }


}


/************************************************************************************
smaller than 320
*************************************************************************************/
@media screen and (max-width: 320px) {



}