body,
html {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Source Sans Pro';
}

.btn-xl {
  padding: 1.25rem 2.5rem;
}

.content-section {
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.content-section-heading h2 {
  font-size: 3rem;
}

.content-section-heading h3 {
  font-size: 1rem;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}

.twin-button { background-color: #327a81; 
padding:10px 20px; 
margin:5px; 
min-width:200px; 
font-size:18px; 
color:#FFFFFF; 
border:0; 
border-radius:10px; 
cursor:pointer;
font-weight:700;
}
.scroll-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  display: none;
  width: 50px;
  height: 50px;
  text-align: center;
  color: white;
  background: rgba(52, 58, 64, 0.5);
  line-height: 45px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
  color: white;
}

.scroll-to-top:hover {
  background: #343a40;
}

.scroll-to-top i {
  font-weight: 800;
}

.masthead {
  min-height: 30rem;
  position: relative;
  display: table;
  width: 100%;
  height: auto;
  padding-top: 2rem;
  padding-bottom: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.1))), url("../img/hero.jpg");
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/hero.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.masthead h1 {
  font-size: 2.5rem;
  margin: 0;
  padding: 0;
  color:#fff;
 font-family: 'Charmonman', cursive;
}
.mb-5, .my-5 {
	max-width:800px;
	padding:15px;
	margin:0 auto;
	margin-bottom: .5rem!important;	
}
.mb-1 img { padding:0px;
/*background: rgb(255,255,255);
background: rgba(255,255,255, .55);
border-radius:50%;*/
max-width:250px; max-height:250px; height:auto; width:auto;
}

@media (min-width: 992px) {
  .masthead {
    height: 100vh;
  }
  .masthead h1 {
    font-size: 3.5rem;
  }
  
}

@media (max-width: 992px) {
.mb-5, .my-5 {
	max-width:100%;
	padding:10px;
	}

img { max-width:100%; height:auto;}
.masthead { padding-top:4rem;}
.h3, h3 {
    font-size: 1.25rem;
}
.h2, h2 {
    font-size: 1.6rem;
}
.content-section {
    padding-top: 2rem;
}
.btn-xl {
    padding: 1.0rem 1.0rem;
	max-width:100%;
	margin:5px auto;
}
}


/* Side Menu */
#sidebar-wrapper {
  position: fixed;
  z-index: 2;
  right: 0;
  width: 250px;
  height: 100%;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
  background: #1D809F;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li.sidebar-nav-item a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 15px;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  font-size: 1.2rem;
  background: rgba(52, 58, 64, 0.1);
  height: 80px;
  line-height: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}
.sidebar-brand img { max-height:100%; max-width:100%;}

.sidebar-nav > .sidebar-brand a {
  color: #fff;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#sidebar-wrapper.active {
  right: 250px;
  width: 250px;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.logo {
  position: fixed;
  left: 5px;
  top: 10px;
  width: auto;
  height: 65px;
  text-align: center;
  z-index: 999;
  background: rgba(255, 255, 255, 0.75);
  padding:5px 15px;
  border-radius: .15rem;
}
.logo img{ max-height:100%; width:auto; }

@media ( max-width:780px) {
.logo {height: 50px; }
}

.menu-toggle {
  position: fixed;
  right: 15px;
  top: 15px;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #fff;
  background: rgba(52, 58, 64, 0.5);
  line-height: 50px;
  z-index: 999;
}

.menu-toggle:focus, .menu-toggle:hover {
  color: #fff;
}

.menu-toggle:hover {
  background: #343a40;
}

.service-icon {
  background-color: #fff;
  color: #1D809F;
  height: 7rem;
  width: 7rem;
  display: block;
  line-height: 7.5rem;
  font-size: 2.25rem;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.callout {
  padding: 5rem 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.1))) #dca50a;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%) #dca50a;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.callout h2 {
  font-size: 3.5rem;
  font-weight: 700;
  display: block;
  max-width: 30rem;
}

.portfolio-item {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: 530px;
  margin: auto auto 1rem;
}

.portfolio-item .caption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  width: 100%;
  background-color: rgba(33, 37, 41, 0.2);
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.portfolio-item .caption .caption-content {
  color: #fff;
  margin: auto 2rem 2rem;
}

.portfolio-item .caption .caption-content h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
}

.portfolio-item .caption .caption-content p {
  font-weight: 300;
  font-size: 1.2rem;
}

@media (min-width: 992px) {
  .portfolio-item {
    max-width: none;
    margin: 0;
  }
  .portfolio-item .caption {
    -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
    -webkit-clip-path: inset(0px);
    clip-path: inset(0px);
  }
  .portfolio-item .caption .caption-content {
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
    margin-left: 5rem;
    margin-right: 5rem;
    margin-bottom: 5rem;
  }
  .portfolio-item img {
    -webkit-transition: -webkit-clip-path 0.25s ease-out;
    -webkit-clip-path: inset(-1px);
    clip-path: inset(-1px);
  }
  .portfolio-item:hover img {
    -webkit-clip-path: inset(2rem);
    clip-path: inset(2rem);
  }
  .portfolio-item:hover .caption {
    background-color: rgba(29, 128, 159, 0.9);
    -webkit-clip-path: inset(2rem);
    clip-path: inset(2rem);
  }
}

footer.footer {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

footer.footer .social-link {
  display: block;
  height: 3rem;
  width: 3rem;
  line-height: 3.3rem;
  font-size: 1.2rem;
  background-color: #1D809F;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}

footer.footer .social-link:hover {
  background-color: #155d74;
  text-decoration: none;
}

a {
  color: #1D809F;
}

a:hover, a:focus, a:active {
  color: #155d74;
}

.btn-primary {
  background-color: #1D809F !important;
  border-color: #1D809F !important;
  color: #fff !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #155d74 !important;
  border-color: #155d74 !important;
}

.btn-secondary {
  background-color: #ecb807 !important;
  border-color: #ecb807 !important;
  color: #fff !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: #ba9106 !important;
  border-color: #ba9106 !important;
}

.btn-dark {
  color: #fff !important;
}

.btn {
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

.bg-primary {
  background-color: #1D809F !important;
}

.text-primary {
  color: #1D809F !important;
}

.text-secondary {
  color: #ecb807 !important;
}

/* user table */

.bg-user {
    min-height: 30rem;
    position: relative;
    display: table;
    width: 100%;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 0;
    background: url(../img/hero.jpg);
    background-position: center top;
    background-repeat: no-repeat;
	background-color: #91ced4; 
    }

.bg-user h1, .curve-heading  {
    font-size: 3rem;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Charmonman', cursive;
}

.gold { color:#ff9900;}

.bg-user em {
    font-size: 2rem;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Charmonman', cursive;
}
.bg-user em a{ color: #ff9900;}

.header {
  background-color: #327a81;
  color: white;
  font-size: 1.5em;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
  max-width:100%;
}

.table-users {
  border: 1px solid #327a81;
  border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  max-width: calc(100% - 2em);
  margin: 1em auto;
  overflow: hidden;
  width: 98%;
  max-width:800px;
}

.table-users img {
  border-radius: 50%;
  height: 60px;
  width: 60px;
}
table{
    display: table;
}
table, tbody, tr {
  width: 100%;
}
table td, table th {
  color: #2b686e;
  padding: 10px;
  text-align:center;
}

table td {
  vertical-align: middle;
}
table td:last-child {
  font-size: 0.95em;
  line-height: 1.4;
  text-align: left;
}
table th {
  background-color: #daeff1;
  font-weight: 300;
}
table tr:nth-child(2n) {
  background-color: white;
}
table tr:nth-child(2n+1) {
  background-color: #edf7f8;
}
.follow, .unfollow { background-color: #327a81; padding:8px 15px; color:#FFFFFF; border-radius: .25rem; font-size:1.0rem; font-weight:600; text-align:center; display:block; margin:auto; }
.follow:hover, .unfollow:hover {  background-color: #1D809F; color:#FFFFFF; text-decoration:none; }

@media screen and (max-width: 768px) {
  table, tr, td {
    display: table;
	width:100%;
	text-align:center;
  }

  td:first-child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 100px;
  }
  td:not(:first-child) {
    clear: both;
    margin-left: 100px;
    padding: 4px 20px 4px 90px;
    position: relative;
    text-align: left;
	width:auto;
  }
  td:not(:first-child):before {
    color: #91ced4;
    content: '';
    display: inline-block;
    left: 0;
    position: relative;
  }
  
  #fans_more td, #followers_more td{ background-color: #327a81; width:100%; text-align:center; position:relative; clear:both; display:block; transform: none;  padding: 5px 1em;}
 #fans_more.mb-5, #followers_more.mb-5 { margin-bottom: .0!important;} 
  
   .table-users td:nth-child(5){
   text-align: center;
  }
  
 .table-users td:nth-child(2):before {
    content :'User : ';
	padding-right:5px;	
  }
 .table-users td:nth-child(3):before {
    content: 'Friends : ';
	padding-right:5px;
  }
.table-users td:nth-child(4):before {
    content:'Followers : ';
	padding-right:5px;
  }
 .table-users td:nth-child(5):before {
    content:'';
  }

  tr {
    padding: 10px;
    position: relative;
	width:100%;
  }
  tr:first-child {
    display: none;
  }
  .follow, .unfollow { float:left; display:block; margin:10px 0; width:150px;}
}
@media screen and (max-width: 500px) {
.follow, .unfollow { float:none; display:block; margin:10px auto; width:150px;}
  .header {
    background: transparent;
    color: white;
    font-size: 1.5em;
    font-weight: 700;
    padding: 0;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  }

 td img {
    border: 3px solid;
    border-color: #daeff1;
    height: 100px;
    margin: 0.5rem 0;
    width: 100px;
  }

  td:first-child {
    background-color: #c8e7ea;
    border-bottom: 1px solid #91ced4;
    border-radius: 10px 10px 0 0;
    position: relative;
    top: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    width: 100%;
  }
  
 .mb-5 td:last-child{background-color: #c8e7ea;
    border-top: 1px solid #91ced4;
    border-bottom: 0px;
    border-radius: 0 0 10px 10px;
	} 
	
  td:not(:first-child) {
    margin: 0;
    padding: 5px 1em;
    width: 100%;
	text-align:center;
  }
  td:not(:first-child):before {
    font-size: .8em;
    padding-top: 0.3em;
    position: relative;
  }
  td:last-child {
    padding-bottom: 1rem !important;
  }
   td:last-child:before { display:none; }

  tr {
    background-color: white !important;
    border: 1px solid #6cbec6;
    border-radius: 10px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
    margin: 0.5rem 0;
    padding: 0;
  }

  .table-users {
    border: none;
    box-shadow: none;
  }
}