.loader_bg{
  position: fixed;
  z-index: 999999;
  background: #012C3C;
  width: 100%;
  height: 100%;
}
.loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

.loader:before, .loader:after {
    content: '';
    border: 1em solid #007BFF;
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader .7s linear infinite;
    opacity: 0;
}

.loader:before{
    animation-delay: .5s;
}
@keyframes loader{
    0%{
        transform: scale(0);
        opacity: 0;
    }

    50%{
        opacity: 1;
    }

    100%{
        transform: scale(1);
        opacity: 0;
    }

}

* {
    margin:0;
    padding:0;
}

/*---------------------------------------------------------------------------------------------------------------------
    -- Main --
---------------------------------------------------------------------------------------------------------------------*/

body {
  margin: 0;
  padding: 0;
  background: #011A25;
  color:white;
  overflow-x: hidden;
    font-family: 'KoHo', sans-serif;
    font-family: 'Noto Serif', serif;
    font-family: 'Rubik', sans-serif;
}

a { text-decoration: none; }

a:hover, a:focus {
    color: #0676ff;
    text-decoration: none;
}

.title {
  float: left;
  color: #fff;
  position: relative;
  top: 1px;
}

.clear { clear: 'both'; }


header {
  margin-top:-3px;
  background: #012C3C;
  padding: 6px 10px 6px 0px;
  text-decoration: none;
  position: fixed;
  width: 100%;
  z-index: 5;
}

#content {
  background-color: #011A25;
}



/*---------------------------------------------------------------------------------------------------------------------
    -- SLIDER --
---------------------------------------------------------------------------------------------------------------------*/

nav {
  top: 40px;
  margin-left: -70%;
  position: fixed;
  z-index: 2;
  width: 70%;
  height: 100%;
  background: #012C3C;
  overflow:scroll;
  font-weight:500;
}

nav ul {
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 0;
}

nav li {
  position: relative;
}

.active-li {
  background: #0373B9;
  position: relative;
}

.active-li .fa {
  color:white;

}

nav li a {
  color: white;

}

nav li :active {
  color: #000;
  text-decoration: none;
}

nav .fa {
    padding:10px;
    color:#03588D;
    font-size:28px;
}
nav .fa-line-chart {
    font-size:23px;
}

#hamburger {
  cursor: pointer;
  display: block;
  height: 20px;
  position: relative;
  width: 15px;
  float: left;
  padding-top: 8px;
}

#hamburger div {
  background-color: #fff;
  height: 3px;
  margin-top: 3px;
  width: 90%;
}

.hamburger-action { cursor: pointer; }

#hamburger-overlay {
  display: none;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  background: #000;
}



/*---------------------------------------------------------------------------------------------------------------------
    -- full view --
---------------------------------------------------------------------------------------------------------------------*/


.iframe-container {
                   max-width:1100px;
                   min-width:0px;
                   max-height:0px;
                   max-height:60vh;}

.iframe-container img{
                   max-width:100%;
                   min-width:0%;
                   min-height:50%;
                   max-height:60vh;}

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


}


.post-action {
    text-align:center;
    margin:0px 10px;
}

.post-action button {
    margin:0px 6px;
}

.main-container {
    padding:5px 2px;
    margin-bottom:44px;

}

.card {
    padding:6px 5px;
    margin: 3px 0px;
    background:#012C3C;

}

.services {
    padding:15px 15px 5px;
    margin:15px;
    transition: 0.5s;
    border-radius:1px;
    border:1px solid rgba(43,45,48,0.5);
}
.services:hover {
    background:#2B2F33;
    color:white;
    transform:scale(1.05);
}

.services:active {
    background:#2B3336;
    transform:scale(1.05);
    box-shadow:0 0 25px #2B3336;
}

.services2 {
    background:#0374B9;
    padding:15px 15px;
    margin:15px;
    transition: 0.5s;
    border-radius:1px;
    border:1px solid rgba(43,45,48,0.5);
}
.services2:hover {
    background:#03588C;
    color:white;
    transform:scale(1.05);
}

.services2:active {
    background:#03588C;
    transform:scale(1.05);
    box-shadow:0 0 25px #2B3336;
}

.card2 {
    background:#0374B9;
    padding:5px 5px;
    transition: 0.5s;
    border-radius:1px;
    border:1px solid rgba(43,45,48,0.5);
}

.side-post {
    padding:6px 5px;
    margin: 3px 0px;
    border:1px solid rgba(3,88,141,0.5);
    background:#012C3C;
    text-align:center;
}

.outlook {
    padding:20px;
    margin: 10px;
    transition: 1.3s;
    border-radius:1px;
    color:rgb(7, 7, 7);
    box-shadow:0 0 7px #f5f5f5;
}

.outlook:hover {
    transition: 1.3s;
    border-radius:7px;
    color:rgb(7, 7, 7);
    background:#f8f8f8;
    box-shadow:0 0 7px #000000;
    transform:scale(1.05);
}


.ellipsis {
    float:right;
    margin-top:-40px;
}


.write-something {
   margin:2px 0px 0px 2px;
   text-align:center;
   width:80%;
   background:#ffffff;
}

.write-something2 {
   margin:0px 0px 0px 2px;
   text-align:center;
   min-width:0%;
   width:80%;
   background:#ffffff;
}

.like,.unlike{
    border: 0;
    background: ;
    letter-spacing: 1px;
    padding:3px;
    border-radius:3px;

}

.like{
    color:#eee;
    background:#444;
    box-shadow: 0 0 3px #000;
    }

.unlike{
    color:#eee;
    background:#444;
    box-shadow: 0 0 3px #000;}

.like,.unlike:hover{
    cursor: pointer;
}


.poster-d {
    margin:-4px 0px 0px 4px;
}


.icons {
    padding:10px;
    background:#fff;
    text-align:center;
    border-top:1px solid rgba(0,0,0,.2)
}

.submenu_down {
        clear: both;
        background:#012C3C;
        padding:6px 10px;
        color:white;
        text-align:center;
        bottom:0;
        position:fixed;
        width:100%;
        border-top:1px solid rgba(0,0,0,.2);
}

.submenu_down .fa-line-chart {
    font-size:25px;
    margin-top:3px;
}

.submenu_down .active{
    color:#007BFF;
}

.slide-up {
    border-bottom:1px solid rgba(0,0,0,.2);
    padding:10px;
    text-align:center;
    font-size:22px;
}

.slide-up .active{
    color:#007BFF;
}

.slide-up .fa {
   font-size:14px;
}

.bodyin {
    border-bottom:1px solid rgba(0,0,0,.2);
    padding:5px;
    text-align:left;
    font-size:17px;
    font-weight:500;
}

a {
    text-decoration:none;
    color:white;
}

.col-2 span {
    font-size:28px;
}

.btn-primary {
   background:#0374B9;
}

.btn-primary:active{
   background:#03588C;
}


/*---------------------------------------------------------------------------------------------------------------------
    -- full view --
---------------------------------------------------------------------------------------------------------------------*/

.comments {
    padding:1px 1px 1px 1px;
    overflow:scroll;
    min-height:inherit;
    max-height:55vh;
}


.edit-delete2{
    margin-top:0px;
    text-align:right;
}

@media (max-width: 380px) {

.edit-delete2{
    margin-top:18px;
    text-align:left;
}

}


/*---------------------------------------------------------------------------------------------------------------------
    -- profile --
---------------------------------------------------------------------------------------------------------------------*/
.screen1 {color:#eee;
          padding:10px 15px;
          background:rgba(56,56,56,0.1);
          margin-top:-10px;
          text-align:center;}

.screen2 {min-height:90px;
          color:white;
          background:rgba(3,116,185,0.9);
          text-align:center;
          margin-top:-45px;
          padding:1px 0px 10px 0px;
}

.pro-container {
    max-width:inherit;
    min-width:0px;
    max-height:0px;
    max-height:70vh;
    padding:0px 0px;
}

.pro-container img {
    max-width:100%;
    min-width:0%;
    min-height:50%;
    max-height:70vh;
}





/*---------------------------------------------------------------------------------------------------------------------
    -- terms --
---------------------------------------------------------------------------------------------------------------------*/
.terms_area {overflow:scroll;
             height:100vh;
             padding:20px 20px;
             background:white;
             color:black;
             font-weight:lighter;
             text-decoration:none;
             font-size:14px;
             text-shadow:none;}

.Area-terms {
               text-align:left;
               padding:40px 3%;
               min-height:60vh;
               max-height:inherit;
               border-radius:7px;}



/*--------------------------------------------------------------------------------------------------------------------*/






/*---------------------------------------------------------------------------------------------------------------------
    -- game --
---------------------------------------------------------------------------------------------------------------------*/

.game-s {
    background:rgba(41,214,84,0.5);
    padding:15px 15px 5px;
    margin-top:-16px;
    color:white;
    transition: 0.5s;
    border-radius:1px;
    border:px solid rgba(41,214,84,0.5);
}

.game-d {
    background:rgba(255,54,58,0.5);
    padding:15px 15px 5px;
    margin-top:-16px;
    color:white;
    transition: 0.5s;
    border-radius:1px;
    border:1px solid rgba(255,54,58,0.5);
}

.fa-arrow-up {
    color:rgba(38,160,66,1);
}

.fa-arrow-down {
    color:rgba(255,54,58,0.5);
}

.iq-img:hover {
    transition:.2s all ease-in-out;
}