@import url('../../../maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@media(min-width:768px) {
    body {
        margin-top: 50px;
    }
    /*html, body, #wrapper, #page-wrapper {height: 100%; overflow: hidden;}*/
}



#page-wrapper {
    width: 100%;        
    padding: 0;
    background-color: #fff;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 225px;
    }

    #page-wrapper {
        padding: 22px 10px;
    }
}

/* Top Navigation */

.top-nav {
    padding: 0 15px;
}

.top-nav>li {
    display: inline-block;
    float: left;
}

.top-nav>li>a {
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 20px;
    color: #fff;
}

.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
    color: #fff;
    background-color: #1a242f;
}

.top-nav>.open>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    /*border: 1px solid rgba(0,0,0,.15);*/
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.top-nav>.open>.dropdown-menu>li>a {
    white-space: normal;
}

/* Side Navigation */

@media(min-width:768px) {
    .side-nav {
        position: fixed;
        top: 60px;
        left: 225px;
        width: 225px;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        border-top: 1px rgba(0,0,0,.5) solid;
        overflow-y: auto;
        background-color: #222;
        /*background-color: #5A6B7D;*/
        bottom: 0;
        overflow-x: hidden;
        padding-bottom: 40px;
    }

    .side-nav>li>a {
        width: 225px;
        border-bottom: 1px rgba(0,0,0,.3) solid;
    }

    .side-nav li a:hover,
    .side-nav li a:focus {
        outline: none;
        background-color: #1a242f !important;
    }
}

.side-nav>li>ul {
    padding: 0;
    border-bottom: 1px rgba(0,0,0,.3) solid;
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    /*color: #999;*/
    color: #fff;    
}

.side-nav>li>ul>li>a:hover {
    color: #fff;
}

.navbar .nav > li > a > .label {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 14px;
  right: 6px;
  font-size: 10px;
  font-weight: normal;
  min-width: 15px;
  min-height: 15px;
  line-height: 1.0em;
  text-align: center;
  padding: 2px;
}

.navbar .nav > li > a:hover > .label {
  top: 10px;
}

.navbar-brand {
    padding: 5px 15px;
}
/*Login css*/
div.main{
    background: bisque; /* Old browsers */
/*background: -moz-radial-gradient(center, ellipse cover,  #0264d6 1%, #1c2b5a 100%); */
/*background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#0264d6), color-stop(100%,#1c2b5a)); */
/*background: -webkit-radial-gradient(center, ellipse cover,  #0264d6 1%,#1c2b5a 100%); */
/*background: -o-radial-gradient(center, ellipse cover,  #0264d6 1%,#1c2b5a 100%); */
/*background: -ms-radial-gradient(center, ellipse cover,  #0264d6 1%,#1c2b5a 100%);*/
/*background: radial-gradient(ellipse at center,  #8da332 1%,#247635 100%); */
/*background: rgb(230,174,238);*/
/*background: radial-gradient(circle, rgba(230,174,238,1) 27%, rgba(182,70,134,0.8295693277310925) 88%);*/
background: bisque;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0264d6', endColorstr='#1c2b5a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
height:calc(100vh);
width:100%;
}

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* ---------- GENERAL ---------- */

body {
   
  color: #606468;  
  margin: 0;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


p {
    line-height: 1.5em;
}
span a {
    font-size: 15px;
}
span a:hover {
    font-size: 15px;
    color:white;
}

.container {
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- LOGIN ---------- */

#login form{
    width: 250px;
}
#login, .logo{
    display:inline-block;
    width:40%;
    margin-bottom: 40px;
}
#login{
  width: 99%;
}
/*Head start*/
/*Default Head start*/
@media (min-width: 720px){
.tophead {
    padding: 22px;
    border: white 2px dotted;
    text-align: center;
    display: inline-flex;
}
#rowhead {
    display: contents;
}
.rainbow {
    padding: 22px;
    margin: 10px;
    text-align: center;
    font-family: 'Pacifico', cursive;
    text-shadow: -11px 3px 20px;
    font-size: 40px;
    /* Chrome, Safari, Opera */
    -webkit-animation: rainbow 5s infinite; 
    /* Internet Explorer */
    -ms-animation: rainbow 5s infinite;
    /* Standar Syntax */
    animation: rainbow 5s infinite; 
}
.saiimg {
    height: 120px;
    border-radius: 75px;
    box-shadow: -4px 9px 20px 3px #d5cbcb;
    margin: 0px 98px;
}
.sitename {
    color: #FFDF00;
    text-align: center;
    font-size: 3em;
}
.sitenamespan {
    background-color: #5b0000c9;
    padding: 15px;
    border-radius: 15px;
}
}

/*Default Head End*/
/*Mobile Head start*/
@media (max-width: 480px){
.tophead {
    padding: 5px;
    border: white 2px dotted;
    text-align: center;
    display: inline-flex;
    max-width: 100%;
}
#rowhead {
    display: contents;
}
.rainbow {
    padding: 10px;
    margin: 5px;
    border: solid;
    text-align: center;
    font-family: 'Pacifico', cursive;
    box-shadow: -4px 9px 20px 3px #d5cbcb;
    text-shadow: -11px 3px 20px;
    border-radius: 50px;
    font-size: 18px;
    /* Chrome, Safari, Opera */
    -webkit-animation: rainbow 5s infinite; 
    /* Internet Explorer */
    -ms-animation: rainbow 5s infinite;
    /* Standar Syntax */
    animation: rainbow 5s infinite; 
}
.saiimg {
    height: 60px;
    border-radius: 50px;
    box-shadow: -4px 9px 20px 3px #d5cbcb;
}
.sitename {
    color: #FFDF00;
    text-align: center;
    font-size: 2em;
}
.sitenamespan {
    background-color: #5b0000c9;
    padding: 15px;
    border-radius: 15px;
}
}
/*Mobile Head End*/
/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
    0%{color: orange;}  
    10%{color: purple;} 
    20%{color: red;}
    30%{color: CadetBlue;}
    40%{color: yellow;}
    50%{color: coral;}
    60%{color: green;}
    70%{color: cyan;}
    80%{color: DeepPink;}
    90%{color: DodgerBlue;}
    100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
    0%{color: orange;}  
    10%{color: purple;} 
    20%{color: red;}
    30%{color: CadetBlue;}
    40%{color: yellow;}
    50%{color: coral;}
    60%{color: green;}
    70%{color: cyan;}
    80%{color: DeepPink;}
    90%{color: DodgerBlue;}
    100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}  
    10%{color: purple;} 
    20%{color: red;}
    30%{color: CadetBlue;}
    40%{color: yellow;}
    50%{color: coral;}
    60%{color: green;}
    70%{color: cyan;}
    80%{color: DeepPink;}
    90%{color: DodgerBlue;}
    100%{color: orange;}
}
/*Head End*/    

#login form span.fa {
    background-color: #fff;
    border-radius: 3px 0px 0px 3px;
    color: #000;
    display: block;
    float: left;
    height: 50px;
    font-size:24px;
    line-height: 50px;
    text-align: center;
    width: 50px;
}

#login form input {
    height: 50px;
}
fieldset{
    padding:0;
    border:0;
    margin: 0;

}
#login form input[type="text"], input[type="password"] {
    background-color: #fff;
    border-radius: 0px 3px 3px 0px;
    color: #000;
    margin-bottom: 1em;
    padding: 0 16px;
    width: 200px;
}

#login form input[type="submit"] {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #000000;
  color: #eee;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px 10px;
  height: 30px;
}

#login form input[type="submit"]:hover {
    background-color: #dbbd5c;
    color: #000;
}

#login > p {
    text-align: center;
}

#login > p span {
    padding-left: 5px;
}
.middle {
  display: flex;
  width: 600px;
}
.memberstat {
  max-width: 35%;
}
@media only screen and (min-width: 720px){
    #wrapper{
  margin: 6% 2% 2% 2%;
}
}
@media only screen and (max-width: 520px){
     #wrapper{
  margin: 32% 2% 2% 2%;
}
}
.single_w3_profile {
    background: #fff;
    padding: 20px;
}
.agileits_profile_image {
    float: left;
    width: 33%;
    margin-right: 2%;
}
.w3layouts_details {
    float: left;
    width: 60%;
}
.agileits_profile_image img {
    border: 1px solid #eee;
    padding: 10px 0;
    margin-right: 10px;
}
.w3layouts_details h4 {
    font-weight: 100;
    color: #ff4c4c;
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    letter-spacing: 1px;
    text-transform: uppercase;
}
@media (max-width: 1366px){
.w3layouts_details h4 {
    font-size: 19px;
}
}
.w3layouts_details p {
    font-size: 14px;
    line-height: 28px;
    color: #000;
    margin: 16px 0;
    letter-spacing: 2px;
}
.agileits_aboutme h4 {
    font-size: 30px;
    letter-spacing: 1px;
    color: #ce57b5;
    margin-bottom: 30px;
    text-align: center;
    margin-top: 20px;
    text-transform: uppercase;
}
.agileits_aboutme h5 {
    font-size: 22px;
    letter-spacing: 1px;
    color: #ff4c4c;
    margin-bottom: 25px;
    margin-top: 40px;
    font-weight: 100;
}
.agileits_aboutme p {
    margin: 15px 0;
    font-size: 14px;
    line-height: 27px;
    color: #8a8a8a;
}
.form_but1 {
    margin-bottom: 20px;
}
.control-label1 {
    padding-left: 0;
    font-size: 14px;
    color: #000;
    margin-top: 6px;
    font-weight: 600;
    letter-spacing: 1px;
}
.w3_details {
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #656565;
}
.agileits_aboutme h5 {
    font-size: 22px;
    letter-spacing: 1px;
    color: #ff4c4c;
    margin-bottom: 25px;
    margin-top: 40px;
    font-weight: 100;
}