/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#333;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

/* 
==========================================================================
GLOBAL & WP SPECIFIC STYLES
==========================================================================
*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: none; 	
}

input, textarea, select {
    -webkit-border-radius:0; 
    border-radius:0;
}

img,
audio,
video,
canvas {
	max-width: 100%;
}

html {
	min-height: 100%;
	margin-bottom: 1px;
	overflow: -moz-scrollbars-vertical!important; 
}

::selection {
	background:#63c9ac;
	color:#fff;
}

::-moz-selection {
	background:#63c9ac;
	color:#fff;
}

::-webkit-selection {
	background:#63c9ac;
	color:#fff;
}

.cf:before,.cf:after {content: " "; /* 1 */    display: table; /* 2 */}
.cf:after {clear: both;}
.cf {clear: both;}

strong, b {
	font-weight:bold;
}

em, i {
	font-style:italic;
}

p {
	margin: 0 0 20px 0;
}

a {
	color: #63c9ac;
	text-decoration: none;
}

a:hover {
	color: #ccc;
	text-decoration: none;
}

@font-face {
    font-family: Alright Sans Medium;
    src: url(../fonts/AlrightSans-Medium.eot);
    src: url(../fonts/AlrightSans-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/AlrightSans-Medium.woff2) format("woff2"), url(../fonts/AlrightSans-Medium.ttf) format("truetype"), url(../fonts/AlrightSans-Medium.svg#AlrightSans-Medium) format("svg");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: Alright Sans Bold;
    src: url(../fonts/AlrightSans-Bold.eot);
    src: url(../fonts/AlrightSans-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/AlrightSans-Bold.woff2) format("woff2"), url(../fonts/AlrightSans-Bold.ttf) format("truetype"), url(../fonts/AlrightSans-Bold.svg#AlrightSans-Bold) format("svg");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: Alright Sans Ultra;
    src: url(../fonts/AlrightSans-Ultra.eot);
    src: url(../fonts/AlrightSans-Ultra.eot?#iefix) format("embedded-opentype"), url(../fonts/AlrightSans-Ultra.woff2) format("woff2"), url(../fonts/AlrightSans-Ultra.ttf) format("truetype"), url(../fonts/AlrightSans-Ultra.svg#AlrightSans-Ultra) format("svg");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: Alright Sans Light;
    src: url(../fonts/AlrightSans-Light.eot);
    src: url(../fonts/AlrightSans-Light.eot?#iefix) format("embedded-opentype"), url(../fonts/AlrightSans-Light.woff2) format("woff2"), url(../fonts/AlrightSans-Light.ttf) format("truetype"), url(../fonts/AlrightSans-Light.svg#AlrightSans-Light) format("svg");
    font-weight: 300;
    font-style: normal;
}

/* 
==========================================================================
H & LINKS
==========================================================================
*/

h1 {
	font: 30px 'Alright Sans Light', Helvetica , Arial, sans-serif;	
	margin:0 0 20px 0;
	padding:0;
}

h2 {
	font: 18px 'Alright Sans Bold', Helvetica , Arial, sans-serif;	
	margin:0 0 10px 0;
	padding:0;
}

h3 {
	font: 22px 'Alright Sans Bold', Helvetica , Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
}

h4 {
	font: 20px 'Alright Sans Bold', Helvetica , Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
}

h5 {
	font: 13px 'Alright Sans Bold', Helvetica , Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
	text-transform: uppercase;
  color: #fff;
}


/* 
==========================================================================
GENERAL
==========================================================================
*/

body {
	background: #fafafa;
	color: #999; 
	font: 15px/1.7 'Alright Sans Medium', Helvetica, Arial, sans-serif;
  font-weight: 400;
	margin:0;
	-webkit-font-smoothing: antialiased;
}

.container {
	margin: 20px 20px 20px 270px;
}

.side {
	height: 100%;
	width: 250px;
	position: fixed;
	left:0;
	top:0;
	background: #222d40;
	font-size: 14px;
}

.side i {
	text-align: center;
	margin: 0 10px 0 0;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	color: #fff;
	width: 20px;
}

.side a {
	color: #fff;
	display: inline-block;
	vertical-align: middle;	
		transition: all 0.3s ease-in;
}

.side li:hover a, .side li:hover i {
  color: #63c9ac;
  	transition: all 0.3s ease-in-out;
}

.side ul {
	padding: 30px;
}

.side li {
	margin: 0 0 10px 0;
}

.header {
    margin: 0 0 0 250px;
    display: block;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    padding: 17px 32px 16px 32px;
}

.navi {
display: inline-block;
	font-size: 13px;
	margin: 7px 0 0 0;
}

.navi a {
	color: #63c9ac;
}

.navi a:hover {
  color: #222d40;
}

.switch {
    float: right;
    margin: 0 0 0 20px;
    padding: 9px 0 0 0;
}

.dark-mode {
    background: #111;
    color: #fff;
}

.dark-mode .header {
    background: #222;
    border-bottom:1px solid #444;
}

.dark-mode .side {
    background: #222;
    border-right:1px solid #444;
}

.dark-mode .top {
    background: #222;
}

.dark-mode .options {
    background: #222;
}

.dark-mode .inner-div, 
.dark-mode .inner-divs
{
    background: #222;
    border:1px solid #444;
}

#mode {
    display: none;
}

.switch label {
    cursor: pointer;
}

.side .switch {
  display: none;
}

.fa-sun {
    display: none;
    color: #fff; 
    font-size: 18px;
}

.fa-moon {
    display: block;
    color: #222d40; 
    font-size: 18px;
}

.dark-mode .fa-moon {
    display: none;
}

.dark-mode .fa-sun {
    display: block;
}

.dark-mode .purple::before, .dark-mode .green::before, .dark-mode .orange::before, .dark-mode .blue::before {
    background: #000!important;
}

.dark-mode .opac::before {
    content: "";
    opacity: 0.9;
}

.dark-mode .navi a:hover {
  color: #fff;
}

.options {
  float: right;
  margin: 0 0 0 30px;
}

.options i {
	font-size: 16px;
}

.o-img {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 10px;
}

.o-img img {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.o-set {
	float: right;
	margin: 6px 0 0 0;
}

.o-name {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    margin: -5px 0 0 0;
}

.o-set:hover a, .o-set:hover i {
  color: #222d40;
}

.logom {
  display: none;
}

.logo a, .logom a {
    display: block;
}
/* 
==========================================================================
POSTS
==========================================================================
*/

.posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 1rem;
    width: 100%;
    margin: 0;
}

.art {
    display: block;
    display: flex;
    flex-flow: column;
    border: 0;
    padding: 50px 30px;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    z-index: 10;
    color: #fff;
    font-family: arial;
    text-align: center;
}

.none::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.opac::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.85;
}

.orange::before {
    background: rgba(245,138,44,1);
    background: -moz-linear-gradient(top, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,138,44,1)), color-stop(100%, rgba(238,71,93,1)));
    background: -webkit-linear-gradient(top, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
    background: -o-linear-gradient(top, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
    background: -ms-linear-gradient(top, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
    background: linear-gradient(to bottom, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f58a2c', endColorstr='#ee475d', GradientType=0 );
}


.purple::before {

background: rgba(156,89,182,1);
background: -moz-linear-gradient(top, rgba(156,89,182,1) 0%, rgba(108,172,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(156,89,182,1)), color-stop(100%, rgba(108,172,255,1)));
background: -webkit-linear-gradient(top, rgba(156,89,182,1) 0%, rgba(108,172,255,1) 100%);
background: -o-linear-gradient(top, rgba(156,89,182,1) 0%, rgba(108,172,255,1) 100%);
background: -ms-linear-gradient(top, rgba(156,89,182,1) 0%, rgba(108,172,255,1) 100%);
background: linear-gradient(to bottom, rgba(156,89,182,1) 0%, rgba(108,172,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c59b6', endColorstr='#6cacff', GradientType=0 );

}

.green::before {


background: rgba(23,160,71,1);
background: -moz-linear-gradient(top, rgba(23,160,71,1) 0%, rgba(84,193,17,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(23,160,71,1)), color-stop(100%, rgba(84,193,17,1)));
background: -webkit-linear-gradient(top, rgba(23,160,71,1) 0%, rgba(84,193,17,1) 100%);
background: -o-linear-gradient(top, rgba(23,160,71,1) 0%, rgba(84,193,17,1) 100%);
background: -ms-linear-gradient(top, rgba(23,160,71,1) 0%, rgba(84,193,17,1) 100%);
background: linear-gradient(to bottom, rgba(23,160,71,1) 0%, rgba(84,193,17,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17a047', endColorstr='#54c111', GradientType=0 );


}

.orange::before {


background: rgba(245,138,44,1);
background: -moz-linear-gradient(top, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,138,44,1)), color-stop(100%, rgba(238,71,93,1)));
background: -webkit-linear-gradient(top, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
background: -o-linear-gradient(top, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
background: -ms-linear-gradient(top, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
background: linear-gradient(to bottom, rgba(245,138,44,1) 0%, rgba(238,71,93,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f58a2c', endColorstr='#ee475d', GradientType=0 );


}

.blue::before {

background: rgba(54,107,242,1);
background: -moz-linear-gradient(top, rgba(54,107,242,1) 0%, rgba(71,169,250,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(54,107,242,1)), color-stop(100%, rgba(71,169,250,1)));
background: -webkit-linear-gradient(top, rgba(54,107,242,1) 0%, rgba(71,169,250,1) 100%);
background: -o-linear-gradient(top, rgba(54,107,242,1) 0%, rgba(71,169,250,1) 100%);
background: -ms-linear-gradient(top, rgba(54,107,242,1) 0%, rgba(71,169,250,1) 100%);
background: linear-gradient(to bottom, rgba(54,107,242,1) 0%, rgba(71,169,250,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#366bf2', endColorstr='#47a9fa', GradientType=0 );

}


.purple::before {
background: rgba(63,43,150,1);
background: -moz-linear-gradient(top, rgba(63,43,150,1) 0%, rgba(168,193,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(63,43,150,1)), color-stop(100%, rgba(168,193,255,1)));
background: -webkit-linear-gradient(top, rgba(63,43,150,1) 0%, rgba(168,193,255,1) 100%);
background: -o-linear-gradient(top, rgba(63,43,150,1) 0%, rgba(168,193,255,1) 100%);
background: -ms-linear-gradient(top, rgba(63,43,150,1) 0%, rgba(168,193,255,1) 100%);
background: linear-gradient(to bottom, rgba(63,43,150,1) 0%, rgba(168,193,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f2b96', endColorstr='#a8c1ff', GradientType=0 );
}


.pink::before {

background: rgba(252,92,124,1);
background: -moz-linear-gradient(top, rgba(252,92,124,1) 0%, rgba(106,130,251,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,92,124,1)), color-stop(100%, rgba(106,130,251,1)));
background: -webkit-linear-gradient(top, rgba(252,92,124,1) 0%, rgba(106,130,251,1) 100%);
background: -o-linear-gradient(top, rgba(252,92,124,1) 0%, rgba(106,130,251,1) 100%);
background: -ms-linear-gradient(top, rgba(252,92,124,1) 0%, rgba(106,130,251,1) 100%);
background: linear-gradient(to bottom, rgba(252,92,124,1) 0%, rgba(106,130,251,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc5c7c', endColorstr='#6a82fb', GradientType=0 );

}

.greens::before {

background: rgba(0,176,155,1);
background: -moz-linear-gradient(top, rgba(0,176,155,1) 0%, rgba(150,201,61,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,176,155,1)), color-stop(100%, rgba(150,201,61,1)));
background: -webkit-linear-gradient(top, rgba(0,176,155,1) 0%, rgba(150,201,61,1) 100%);
background: -o-linear-gradient(top, rgba(0,176,155,1) 0%, rgba(150,201,61,1) 100%);
background: -ms-linear-gradient(top, rgba(0,176,155,1) 0%, rgba(150,201,61,1) 100%);
background: linear-gradient(to bottom, rgba(0,176,155,1) 0%, rgba(150,201,61,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b09b', endColorstr='#96c93d', GradientType=0 );
	
}


.sea::before {
background: rgba(0,242,97,1);
background: -moz-linear-gradient(top, rgba(0,242,97,1) 0%, rgba(5,118,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,242,97,1)), color-stop(100%, rgba(5,118,230,1)));
background: -webkit-linear-gradient(top, rgba(0,242,97,1) 0%, rgba(5,118,230,1) 100%);
background: -o-linear-gradient(top, rgba(0,242,97,1) 0%, rgba(5,118,230,1) 100%);
background: -ms-linear-gradient(top, rgba(0,242,97,1) 0%, rgba(5,118,230,1) 100%);
background: linear-gradient(to bottom, rgba(0,242,97,1) 0%, rgba(5,118,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f261', endColorstr='#0576e6', GradientType=0 );
}


.dark-mode .pink::before, 
.dark-mode .greens::before, 
.dark-mode .sea::before, 
.dark-mode .purple::before, 
.dark-mode .green::before, 
.dark-mode .orange::before, 
.dark-mode .blue::before {
    background: #000!important;
}

.upp {
    display: block;
    height: 267px;
    border: 2px dashed #ccc;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    position: relative;
}

.upp p {
    margin: 120px 0 0 0;
    text-align: center;
    color: #aaa;
    font: 14px/1.6 'Alright Sans Medium', Helvetica, Arial, sans-serif;
}

.upp input{
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

.result-area {
		margin: 20px auto 0 auto;
}


.thecat {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.save {
    position: absolute;
    bottom: 10px;
    left: 15px;
}

.visit {
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.visit:hover, .save:hover {
	transform: scale(1.2);
}

.art h2, .art a {
    color: #fff;
}

button {
    background: none;
    border: 0;
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 16px;
    cursor: pointer;
}

.top {
  padding: 10px;
  background: #222d40;
}

/* 
==========================================================================
HEADER
==========================================================================
*/

.logo {
    width: 170px;
    text-align: center;
    padding: 10px 20px 0 20px;
    display: block;
}

.nice-select {
  -webkit-tap-highlight-color: transparent;
background: #63c9ac;
  color: #fff;
  border-radius: 20px;
  border: 0;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: inline-block;
  z-index:9999;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: 35px;
  line-height: 35px;
  outline: none;
  padding-left: 18px;
  padding-right: 30px;
  margin: 0 15px 0 0px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  width: auto; }



  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: #999; }

  .nice-select:after {
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
        -ms-transform-origin: 66% 66%;
            transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; }
  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg); }
  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); }
  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; }
    .nice-select.disabled:after {
      border-color: #cccccc; }
  .nice-select.wide {
    width: 100%; }
    .nice-select.wide .list {
      left: 0 !important;
      right: 0 !important; }
  .nice-select.right {
    float: right; }
    .nice-select.right .list {
      left: auto;
      right: 0; }
  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; }
    .nice-select.small:after {
      height: 4px;
      width: 4px; }
    .nice-select.small .option {
      line-height: 34px;
      min-height: 34px; }
  .nice-select .list {
    background-color: #fff;
    color: #333;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
        -ms-transform: scale(0.75) translateY(-21px);
            transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; }
    .nice-select .list:hover .option:not(:hover) {
      background-color: transparent !important; }
  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
    .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
      background-color: #f6f6f6; }
    .nice-select .option.selected {
      font-weight: bold; }
    .nice-select .option.disabled {
      background-color: transparent;
      color: #999;
      cursor: default; }

.no-csspointerevents .nice-select .list {
  display: none; }

.no-csspointerevents .nice-select.open .list {
  display: block; }


/* 
==========================================================================
INNER
==========================================================================
*/

.page-title {
  float: left;
}

.page-title h1 {
  font-size: 20px;
  margin: 9px 0 0 0;
}

.inner-div {
  background: #fff;
  border: 1px solid #f5f5f5;
  padding: 50px;
  max-width: 1200px;
  margin: 0 0 30px 0;
}

.inner-divs {
  background: #fff;
  border: 1px solid #f5f5f5;
  padding: 50px;
  margin: 30px 0;
}

.welcome-text {
    margin: 0 auto;
    width: 400px;
}

.feedname,
.category,
.feed,
.input-sm,
.form-control {
    border: 1px solid #e5e5e5;
	padding: 10px;
    width: 100%;
    margin: 0 0 20px 0;
	color: #999; 
	font: 16px 'Alright Sans Medium', Helvetica, Arial, sans-serif;
	font-weight: 400;
}

.btn,
.passbut,
.sharepost,
.unfollow {
    border:0;
    background: #63c9ac;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
 	font: 15px 'Alright Sans Medium', Helvetica, Arial, sans-serif;
	font-weight: 400;
	padding: 10px 25px;
		transition: all 0.3s ease-in;
		line-height: 23px;
height: 40px;
}

.btn:hover,
.passbut:hover,
.sharepost:hover,
.unfollow:hover {
    color: #fff;
    background: #3b434b;
    	transition: all 0.3s ease-in-out;
}

.nopee {
      	transition: all 0.3s ease-in;
      	color: #fff;
}

.nopee:hover {
      	transition: all 0.3s ease-in-out;
      	color: #fff;
      	opacity: 0.5;
}

.ava-left {
    float: left;
    width: 70%;
    margin: 0 5% 5% 0;
}

.ava-right {
    float: right;
    width: 25%;
}

.podcasts audio {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.saves {
        position: absolute;
    left: 15px;
    top: 10px;
}

.visits {
        position: absolute;
    right: 15px;
    top: 10px;
}

.saves:hover,
.visits:hover {
	transform: scale(1.2);
}

/* 
==========================================================================
HOME
==========================================================================
*/


.home {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 25px auto;
	font-size: 18px;
	line-height:30px;
	padding: 0 20px;
}

.home h1 {
	font: 40px 'Alright Sans Bold', Helvetica , Arial, sans-serif;	
	margin:0 0 30px 0;
	padding:0;
	color: #3b434b;
}

.home h2 {
    font: 22px 'Alright Sans Bold', Helvetica , Arial, sans-serif;
    margin: 0px 0 25px 0;
    padding: 0;
	color: #3b434b;
}

.reglog {
    font-size: 16px;
}

.row {

    margin: 0 0 20px 0;

}

.home-logo {
	float: left;
}

.home-buttons {
	float: right;
	margin: 12px 0 0 0;
}

.left-home .btn {
    font: 18px 'Alright Sans Medium', Helvetica, Arial, sans-serif;
    padding: 20px 50px;
    margin: 20px 0;
    display: inline-block;
    height: auto;
}

.home-buttons .btn {
    margin: 0 0 0 20px;
}

.man {
	overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 55%;
    right: 0;
}

.man img {
	max-width: 900px;
	margin: 0 0 -10px 0;
}

.home-logo {
	width: 170px;
}

.left-home {
	margin: 100px 0;
	float: left;
	width: 45%;
}

.right-home {
	float: left;
	width: 50%;
}

.home-buttons .btn {
    margin: 0 0 0 20px;
	line-height: 20px;
    height: 40px;
    display: inline-block;
	border: 2px solid #63c9ac;
}

.hlog {
	background: #fff;
	border: 2px solid #63c9ac;
	color: #63c9ac;
}

.home-buttons .btn:hover, .hlog:hover {
	background: #3b434b;
	border: 2px solid #3b434b;
	color: #fff;
}

/* 
==========================================================================
MEDIA QUERIES
==========================================================================
*/



@media screen and (max-width: 1100px) {

.logo {
  display: none;
}

.side li {
  margin: 0;
  display: inline-block;
}

.side h5 {
  display: none;
}

.side ul span {
  display: none;
}

.top {
  display: none;
}

.side {
	height:50px;
	width: 100%;
	top:0;
	left:0;
	right:0;
	z-index: 99999999;
  text-align: center;
}

.container {
	width: 96%;
	margin: 15px 2%;
}

.side ul {
  float: right;
    padding: 12px;
    display: inline-block;
    margin: 0 auto;
}

.other {
  display: none!important;
}

.options {
    float: right;
    margin: 0 0 0 30px;
    display: none;
}

.header {
    margin: 50px 0 0 0;
    padding: 20px 20px;
    width: 100%;
    text-align: center;
}

.side .switch {
    display: inline-block;
    float: left;
    margin: 1px 5px 0 0;
    padding: 0;
}

.header .switch {
  display: none;
}

.side .fa-sun {
  display: none;
}

.dark-mode .side .fa-sun {
    display: block;
    margin: 4px 10px 0 0;
}

.dark-mode .header {
    background: #333;
    border-bottom: 0;
    border-top: 0;
}

.logom {
    display: block;
    float: left;
    margin: 12px 10px 0 10px;
    width: 25px;
    height: 25px;
}

.navi {
    font-size: 12px;
  }


.art {
    z-index: 7;
  }

.nice-select {
    z-index: auto;
}

.inner-div {
  padding: 20px;
}


.left-home {
    margin: 100px 0 0 0;
    float: none;
    width: 100%;
    text-align: center;
}

.right-home {
    float: none;
    width: 100%;
    text-align: center;
}


.man {
    position: relative;
    bottom: 0;
    width: 55%;
    right: 0;
    text-align: center;
    margin: 0 auto;
}


}


@media screen and (max-width: 480px) {

.nice-select {
    margin: 0 0 10px 0;
    display: block;
}

.ava-left {
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
}

.ava-right {
    float: none;
    width: 100%;
    margin:0;
}

.upp {
    height: 100px;
}

.upp p {
    margin: 35px 0 0 0;
}

.home {
    font-size:16px;
}

.home-buttons .btn {
    margin: 0 0 10px 0;
    line-height: 20px;
    height: 40px;
    display: block;
    text-align: center;
    width: 100%;
}

.home-buttons {
    float: none;
    margin: 12px 0 0 0;
    display: block;
}

.home-logo {
    float: none;
    margin: 0 auto;
}

.left-home {
    margin: 30px 0 0 0;
    float: none;
    width: 100%;
    text-align: center;
}



}


@media screen and (max-width: 320px) {

 .container {
	min-width:240px;
	width:96%;
 }
 
 .side ul {
    padding: 12px 0;
}

.logom {
    margin: 12px 0px 0 10px;
}
 
}