@charset "UTF-8";

/*HEADERS*/
h1{margin:0; font-size:30px; font-family:'Sofia Sans', sans-serif; font-weight:900}
h2{margin:0; font-size:20px; font-family:'Sofia Sans', sans-serif; font-weight:900}
h3{margin:0; font-size:17px; font-family:'Sofia Sans', sans-serif; font-weight:400}

textarea:focus, input:focus{
    outline: none;
}
textarea{
	border-color:lightgray;
}
.lines:before {
  top: 0.5rem;
}
.lines:after {
  top: -0.5rem;
}

.lines-button:hover .lines:before {
  top: 0.7rem;
}
.lines-button:hover .lines:after {
  top: -0.7rem;
}

.lines-button.close {
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
  transform: scale3d(0.8, 0.8, 0.8);
}
	
	.lines-button.x.close .lines {
  background: transparent;
}
.lines-button.x.close .lines:before, .lines-button.x.close .lines:after {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  top: 0;
  width: 2rem;
}
.lines-button.x.close .lines:before {
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
}
.lines-button.x.close .lines:after {
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
}

/* POPUP MENU */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
	
/* POPUP MENU PROFILE */
.tooltipprofile {
  position: relative;
  display: inline-block;
}

.tooltipprofile .tooltiptextprofile::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 90%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}

.tooltipprofile:hover .tooltiptextprofile {
  visibility: visible;
}

/* DESKTOP */
@media (min-width: 700px) {

.logo{
	width:110px;	
}

div.iii{
	visibility:hidden;
	display:none;
}

.account{
  float:right;
}

.leftpane{
	width:700px;
}
}

/*MOBILE*/
@media (max-width: 700px) {
.logo{
	margin:0 auto;
    width:203px;
    height: 20px;
	height:80px;
	float:left;
}

/*.searchfield{
	visibility:hidden;
	display:none;
}*/

div.iii {
	  width:30px;
	  float:left;
	  text-align:left;
	  margin-left:20px;
	  margin-top:0px;
	visibility:visible;
	display:block;
}
  
/*.searchfield{
	visibility:hidden;
	display:none;
}*/
  
/*.sections{
	visibility:hidden;
	display:none;
}*/

.socialmedia {
visibility:hidden;
display:none;
}

.account{
	visibility:hidden;
	display:none;
}

.leftpane{
	width:100%;
}

.rightpane {
visibility:hidden;
display:none;
}

/*FORUMS*/
.forums_topics{visibility:hidden; display:none;}
.forums_posts{visibility:hidden; display:none;}
.forums_lastpost{visibility:hidden; display:none;}
}
.lineforumsnormal{background-color: white;}
.lineforumsover{background-color: #fff68f;}
	
/*BUTTONS*/
.button{
	display:inline-block;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:30px;
	padding-right:30px;
	margin:0 0.1em 0.1em 0;
	border:0;
	border-radius:3em;
	box-sizing:border-box;
	text-decoration:none;
	/*font-family:'Roboto',sans-serif;
	font-weight:900;
	font-size:20px;*/
	font-family: 'Roboto Condensed';
	font-size: 17px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color:#FFFFFF;
	text-align:center;
	cursor:pointer;
	display:inline-block}
.button:link{color:white}
.button:hover{
	filter: brightness(1.05) contrast(1.05);
}
.button:active{transform: scale(0.95);}
.button:visited{}
.button.red{background-color:#e50000;border-color:#E0515C}
.button.red:hover{background-color:#FF4253;border-color:#e50000}
.button.green{background-image: linear-gradient(to right, limegreen 0%, #1eed42 100%);}
/*.button.green{background-color:limegreen;border-color:#E0515C}*/
.button.orange{background-image: linear-gradient(to right, darkorange 0%, #ffaf67 100%);}
.button.blue{background-image: linear-gradient(to right, #52A0FD 0%, #00e2fa 100%);}
.button.purple{background-image: linear-gradient(to right, #8528E7 0%, #a151f4 100%);}
.button.black{background-image: linear-gradient(to right, black 0%, #3f3f3f 100%);}

/*MINIBUTTON*/
.minibutton{color:white;border-radius:4px;padding-left:7px;padding-right:7px;pading-top:4px;padding-bottom:3px;margin:4px;font-size:14px;font-weight:700;display:inline-block}
.minibutton:link{color:white}
.minibutton:hover{color:white}
.minibutton:active{color:white; margin-top : 6px; margin-bottom:2px}
.minibutton:visited{color:white}
.minibutton.green{background-color:#00e461}
.minibutton.green:hover{background-color:#19AB00}
.minibutton.blue{background-color:#00BFEB}
.minibutton.blue:hover{background-color:#1090C8}
.minibutton.bluemarine{background-color:#1E63E5}
.minibutton.bluemarine:hover{background-color:#2A12DD}
.minibutton.purple{background-color:#8528E7}
.minibutton.purple:hover{background-color:#6610A7}
.minibutton.red{background-color:#C4005C}
.minibutton.red:hover{background-color:#96063A}
.minibutton.orange{background-color:#ff9c00}
.minibutton.orange:hover{background-color:#F60}
.minibutton.yellow{background-color:#DFDC27}
.minibutton.yellow:hover{background-color:#CC9D00}

/*ROUND BUTTONS*/
.roundbutton{
	color:white; border-radius:20px; height:36px; width:33px; margin:auto; padding-top:4px; padding-left:7px; font-size:20px; display:inline-block
}
.roundbutton.red{background-color:red;}
.roundbutton.green{background-color:limegreen;}
.roundbutton.orange{background-color:darkorange;}
.roundbutton:link{color:white}
.roundbutton:hover{
	filter: brightness(1.05) contrast(1.05);
}
.roundbutton:active{color:white}
.roundbutton:visited{color:white}




.loader{border:5px solid #f3f3f3;border-top:5px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.poster:hover{-webkit-filter:brightness(130%)}
.confirmation{
	background-color:#0db95b;
	padding:10px;
	margin:10px;
	width:400px;
	max-width:100%;
	margin:0 auto;
	text-align:center;
	color:white;
	border-radius:5px
}
.error{
	background-color:#e50000;
	padding:10px;margin:10px;width:400px;max-width:100%;margin:0 auto;text-align:center;color:white}
.warning{padding:10px;margin-bottom:10px;width:400px;max-width:100%;margin:0 auto;background-color:#FF6500;color:#FFF}
.script{background-color:black;font-family:"Courier New",Courier,monospace;padding:0;margin:0;width:350px;margin:0 auto;text-align:center;color:white;border-width:1px;border-style:dashed;border-color:white}
.script-red{background-color:red;font-family:"Courier New",Courier,monospace;padding:0;margin:0;width:350px;margin:0 auto;text-align:center;color:white;border-width:1px;border-style:dashed;border-color:white}
.script-green{background-color:#3F0;font-family:"Courier New",Courier,monospace;padding:0;margin:0;width:350px;margin:0 auto;text-align:center;color:white;border-width:1px;border-style:dashed;border-color:white}


.c-preview {
  /*background: #000;*/
  background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 400% 400%;
  background-repeat: no-repeat;
  display: flex;
	width:100%;
	float:left;
  color: #fff;
  position: relative;
  cursor: pointer;
  transition: .5s all;
}
.c-preview__img {
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  mix-blend-mode: screen;
}
.c-preview:hover {
  background-position: 100% 100%;
}
.c-preview:hover__title {
  text-shadow: 0 0 20px black;
}

/* Scroll Menu */
div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}
/* Avatar selection */
.avatar {
	cursor:pointer;
	margin:10px;
	float:left;
	border:none;
    }
.avatar:link{
	color: white;
}
.avatar:hover {
	/*background-position: 0 -35px;*/
	/*border-style: solid;*/
	-webkit-filter: brightness(130%);
	/*border-color: rgba(255,255,255,1);*/
    }
	/*https://fdossena.com/?p=html5cool/buttons/i.frag*/
	
.avatar:active {
    /*background-position: 0 top;*/
    /*position: relative;*/
    /*top: 1px;*/
	/*padding: 8px 12px;*/
	/*border:5px solid rgba(0,0,0,1);*/
    }
	
.avatar:visited {
    /*background-position: 0 top;*/
    /*position: relative;*/
    /*top: 1px;*/
	/*padding: 8px 12px;*/
    }
.avatarClicked {
	/*box-shadow: inset 0 -5px 0 rgba(235,0,0,1);*/
	border-bottom: 3px solid rgba(235,0,0,1);
    }
.avatarUnclicked {
	border-bottom: 0px solid rgba(235,0,0,1);
    }
/* Pagination */
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #ed0000;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}
/* modal popup */
	/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.closem {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closem:hover,
.closem:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* iii to x*/
.buttons-container {
  margin: 100px auto;
  text-align: center;
}

button {
  display: inline-block;
  margin: 0 1em;
  border: none;
  background: none;
}
button span {
  display: block;
}

.lines-button {
  padding: 1rem 0rem;
  transition: .3s;
  cursor: pointer;
  user-select: none;
  border-radius: 0.57143rem;
}
.lines-button:hover {
  opacity: 1;
}
.lines-button:active {
  transition: 0;
}
.sidenavlinks a {
    text-decoration: none;
    font-size: 20px;
	font-family:'Roboto', sans-serif;
	font-weight:900;
}

.sidenav .closebtn {
    position: absolute;
	float:left;
    top: 0;
    left: 13px;
    font-size: 50px;
	margin-left:-2px;
	font-family:sans-serif;
	font-weight:100;
	margin-top:-10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*from vanityfair.com*/

@font-face {
    font-family: VF-Didot-3;
    src: url("fonts/VF-Didot-3-Web-Regular.woff2?#iefix") format("woff2"), url("fonts/VF-Didot-3-Web-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal
}

.drop-cap{
	color: #f00000;
  float: left;
  font-family: VF-Didot-3;
  font-size: 100px;
  line-height: 60px;
  padding-top: 25px;
  padding-right: 8px;
  padding-left: 3px;
}