@import url("https://www.syndek.com/assets/fonts/inter/inter-ui.css");

@font-face {font-family: "VCR"; src: url("https://www.syndek.com/assets/fonts/vcr.ttf");}

html {
  overflow-y: scroll;
}

body {
  background: #1c1c1c;
  font-family: 'Inter UI', sans-serif;
  line-height: 1.75;
  color: #ffffff;
  margin:0;
  letter-spacing: -0.5pt;
}

h1, h2, h3, h4, h5 {
  font-family: 'Inter UI', sans-serif;    
  margin: 3rem 0 1.38rem;
  line-height: 1.3;
  text-align: left;
  display: block;
  color:#ffffff;
  letter-spacing: -0.5pt;
}

h1{
  margin-top: 0;
  font-size: 1.953rem;
  font-weight: 800;
}
h2{
  font-size: 1.25rem;
}
h3{
  font-size: 24px;
}
h4{
  font-size: 1rem;
}
h6{
  font-size: 1rem;
}
p {
  margin:1.25rem 0 0 0;
  color: #ffffff;
}
small, .text_small {
  font-size: 0.8rem;
  line-height: 1rem;
  text-transform: uppercase;
  font-weight: 400;
}
.bold{
  font-weight: bold;
}
.italic{
  font-style: italic;
}

/* Links */
a { color:#ffffff;text-decoration: none;}
a:hover {color:#ffffff;text-decoration:underline;}
a:active { color:#ffffff;text-decoration: none;}

.wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width:100%;
  max-width: 720px;
  margin:0 auto;
  padding:20px 0 80px 0;
}
.wrapper img{
  width:100%;
  height:auto;
}

/* Page Header */
header{
  margin-bottom: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width:100%;
}
header h1 {
  font-weight: 700;
  margin:0;
  line-height: 1.3;
}


/* Main & Footer */
footer {
  text-align:center;
  margin:0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
footer .copyright {
  font-size:13px;
  margin-bottom: 1rem;
  color: #6f6f6f;
  letter-spacing: 0pt;
}

main{
  display: block;
  width:100%;
}
.section-header{
  margin:3rem 0 1rem;
  display: flex;
  justify-content: space-between;
}
.section-header h2{
  font-weight: bold;
  margin:0 0.5rem 0 0;
  display: inline-block;
}


.section-header{
  margin-bottom:0;
}
.featured .column{
  margin-top:0;
  margin-bottom:1.38rem;
  position:relative;
  margin:0;
}
.featured .card{
  margin-bottom:0;
  box-shadow: none;
  background-color: transparent;
}
.fsplash{
  border-radius: 8px;
}
.splash{
  border-radius: 8px;
}
.splashedit{
  border-radius: 3px;
  width: 50%;
}

.featured .photo{
  border-radius: 8px;
  overflow: hidden;
  width:100%
}
.featured .info{
  padding:0.5rem 0.5rem;
  display: flex;  
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.featured a {
  text-decoration: none;
}
.featured h6{
  color:#ffffff;
}
.section-header a.link{
  padding:0 0.5rem;
  border-radius:13px;
}
.featured .project{
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
}

/* Cards */
.card {
  text-align: left;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin:1rem 0 3rem 0;
}
.card img{
  vertical-align: top;
}
.info {
  padding:10px;
}
.project {
  margin:0;
  font-weight:400;
  line-height: 1;
}
.role {
  margin-top:0.38rem;
  color:var(--tertiary);
  font-weight:500;
  font-size: 0.8rem;
  line-height: 1rem;
  text-transform: uppercase;
  display: block;
  color:#5a636c;    
}
.card p.description {
  font-size: 17px;
  line-height: 1.5;
  margin-top:2px;
  max-width:inherit;
  color:#a1a5ae;
}

/* Secondary Pages */
figure{
  padding:0;
  margin:1.64rem 0;
}


/* loading */
.loading-spinner {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
}

.loading-spinner img {
      width: 50px;
      height: 50px;
}

/* mods */
.logo{
  margin-top: 40px;
}
.logo img{
  width:50px;
  height:50px;
  border-radius:25px;
}

.headcap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
}

.headcap .options {
  display: flex;
}

.headcap .options a {
  font-size: 20px;
  text-decoration: none;
  color: #646464;
  transition: color 0.3s ease;
  margin-left: 30px;
  margin-top: 40px;
}

.headcap .options a:hover {
  color: #ffffff;
}

.headcap .options a:selected {
  color: #646464;
}

.headcap .options a:active {
  color: #646464;
}

/************ BUTTON *************/
.button {
    font-size: 21px;
    background: rgb(52,75,187);
	background: linear-gradient(0deg, rgba(52,75,187,1) 0%, rgba(0,146,255,1) 100%);
	border: none;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
	color: #fff;
	border-radius: 5px;
    padding: 10px;
    min-width: 150px;
}
.button-container {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
}    

/*link button bottom of page*/
.link-button {
	display: inline-block;
	padding: 10px 20px;
	text-decoration: none;
	border: 2px solid #424344;
	border-radius: 5px;
	color: #85919b;
	transition: color 0.3s ease;
}

.link-button:hover {
  border: 2px solid #a1a5ae;    
  color: #fff;      
  transition: color 0.3s ease;    
  text-decoration: none;
}


/*feed*/
img.postLogoProfile{width:32px;height:32px;border-radius:32px;}
img.postVerified {width: 12px;margin-bottom: 2px;margin: 0 5px 0 0;}
img.infoBar {width: 100%;}
hr {height:1px; background-color: #45494c;border:none;margin:10px 0 40px 0;}
.postContent {font-size: 18px;line-height: 1.5;color:#d9dbdf;margin:2px 10px 15px 10px;letter-spacing: -0.2pt;}   
.postData {font-size: 16px; margin:0 0 10px 10px;align-items:center;display: flex;line-height: 10px;}
.postUsername {margin: 0 5px 0 5px;font-size: 16px;}
.dateContent {font-size: 16px; display:block; color:#5a636b;}

/*general*/
.pageContainer {margin-top:24px;}
.pageContent {font-size: 18px;line-height: 1.5;color:#a4acbd;margin:5px 10px 15px 0;letter-spacing: -0.1pt;}
.pageTitle {font-size: 28px;font-weight: 400;margin: 10px 0 5px 0;}
img.aer{margin-bottom:2px; width: 17px;margin-left: 10px;}
.pageFaq{margin-left: 10px;}
b {color:#ffffff;font-weight: 600;}
.important {color:#ff4242;}
.expression{font-size: 26px;text-align: center;font-weight:600;line-height: 35px;}

.options a.active{color:#fff;}

.spacer10 {display: block;height: 10px;}
.spacer20 {display: block;height: 20px;}
.spacer30 {display: block;height: 30px;}
.spacer40 {display: block;height: 40px;}
.spacer50 {display: block;height: 50px;}



/*posts*/
/***** ICONS *****/
.icon-comment {
    background-image: url('posts/images/icon-comment.png');
    display: inline-block;
    background-size: cover;
    width: 30px;
    height: 30px;
  }
.icon-comment:hover {
    background-image: url('posts/images/icon-comment2.png');
  }
/*-------------------------------------*/
.icon-like {
    background-image: url('posts/images/icon-like.png');
    display: inline-block;
    background-size: cover;
    width: 30px;
    height: 30px;
  }
.icon-like:hover {
    background-image: url('posts/images/icon-like2.png');
  }
/*-------------------------------------*/
.icon-share {
    background-image: url('posts/images/icon-share.png');
    display: inline-block;
    background-size: cover;
    width: 30px;
    height: 30px;
  }
.icon-share:hover {
    background-image: url('posts/images/icon-share2.png');
  }
/*-------------------------------------*/
.icon-info {
    background-image: url('posts/images/icon-info.png');
    display: inline-block;
    background-size: cover;
    width: 30px;
    height: 30px;
  }
.icon-info:hover {
    background-image: url('posts/images/icon-info2.png');
  }
/*-------------------------------------*/
.icon-edit {
    background-image: url('posts/images/icon-edit.png');
    display: inline-block;
    background-size: cover;
    width: 30px;
    height: 30px;
  }
.icon-edit:hover {
    background-image: url('posts/images/icon-edit2.png');
  }
/*-------------------------------------*/
.icon-delete {
    background-image: url('posts/images/icon-delete.png');
    display: inline-block;
    background-size: cover;
    width: 30px;
    height: 30px;
  }
/*-------------------------------------*/

a.postLink { color:#1999e8;text-decoration: none;}
a.postLink:hover {color:#46b8ff;text-decoration: underline;}
a.postLink:active { color:#46b8ff;text-decoration: none;}

/*blockquote {margin-left: 12px;border-left: solid 3px #dbdbdb;padding-left: 8px;font-style: italic;font-family:"Utopia", "Georgia", serif;}*/
    
/* OLD BLOCKQUOTE
blockquote {
	border-left: 5px solid #2a4f71;
	background-color: #27292b;
	padding: 20px 0 20px 15px;
	border-radius: 0 7px 7px 0;
    color: #919191;
    font-size: 20px;
    margin: 0 20px 0 20px;
    font-family: "Utopia","Georgia",serif;
    letter-spacing: 0;
}
---------------------->With INTER
blockquote {
	border-left: 5px solid #3c3e46;
	background-color: #151515;
	padding: 20px 15px 20px 15px;
	border-radius: 0 7px 7px 0;
	color: #878a91;
	font-size: 17px;
	margin: 20px 20px 0 20px;
	letter-spacing: 0;
}
*/

blockquote {
	font-family: 'VCR', 'Inter UI', sans-serif;
	border-left: 5px solid #606471;
	background-color: #000000;
	padding: 5px 15px 5px 15px;
	/* border-radius: 0 7px 7px 0; */
	color: #ffffff;
	font-size: 1.1rem;
	margin: 20px 20px 0 20px;
	letter-spacing: 0;
	text-transform: uppercase;
}


/*special*/
.alert p{color: #ff4244;font-size:16px;padding:16px;}


.linkomatic {
  color: #3084ff;
  text-decoration: none;
}

.linkomatic:hover {
	color: #00b7ff;
	text-decoration: none;
}

.centered-img {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/************************************************************************/
/************************************************************************/
/************************************************************************/


@media (max-width: 767px) {
  .wrapper{
    padding:0;
    width:100%;
  }
  header{
    flex-direction: column;
  }
  .fsplash{
  border-radius: 0px;
  }    
  .featured{
    flex-direction: column;
  }
  .featured .card{
    margin-bottom:0;
  }
  .featured .card:first-child {
    margin-right: 0;
  }
  footer {
    padding:30px 0;
  }
  #top{
    display: none;
  }
  .headcap {
    padding: 10px 20px 10px 10px;
  }    
  .logo{
    margin-top: -20px;
    margin-left: 10px;
  }
  .headcap .options {
    margin-top: -50px;
  }    
  .options {
    padding-top: 40px;  
    }    
   
  .pageContainer {margin: 10px;}
  .pageContent {margin:5px 10px 15px 0;letter-spacing: 0pt;}

  .topLogo {
	margin-top: 60px;
  }
    
}
/************************************************************************/
/************************************************************************/
/************************************************************************/