/*

* Style by Aikomo Onaopemipo

* Grid by the Dimanche Skeleton

*/

/* Table of Content

==================================================

    #Site Styles

	#Page Styles

	#Media Queries

	#Font-Face */





/* #Site Styles

================================================== */



@import url('datepicker.css');

@import url('reset.css');

@import url('base.css');

@import url('rskeleton.css');

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);





/** Global Styles **/





    html, body {

        height: 100%;

    }



    body {

        background: url(../images/bg.png);
        font-weight: bold;
        font-size: 14px;
        font-family: "Arial",Helvetica,sans-serif;

    }



    body.index {

        background: #333;

    }

	

	a { 

        transition: all 200ms linear;

		-moz-transition: all 200ms linear;

		-webkit-transition: all 200ms linear; }

	

	*, *:before, *:after {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box; }



    .header {

    	position: relative;

    	height: 40px;

    	width: 100%;

    	background: #333333;

    	z-index: 10;

        color: white;

    }



    .header .container {

    	padding: 0 20px;

    }



    .header:after {

    	content: '';

    	display: block;

    	position: absolute;

    	bottom: -3px;

    	height: 3px;

    	width: 100%;

    	background: rgb(72,164,255); /* Old browsers */

		background: -moz-linear-gradient(left,  rgba(72,164,255,1) 0%, rgba(0,140,70,1) 100%); /* FF3.6+ */

		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(72,164,255,1)), color-stop(100%,rgba(0,140,70,1))); /* Chrome,Safari4+ */

		background: -webkit-linear-gradient(left,  rgba(72,164,255,1) 0%,rgba(0,140,70,1) 100%); /* Chrome10+,Safari5.1+ */

		background: -o-linear-gradient(left,  rgba(72,164,255,1) 0%,rgba(0,140,70,1) 100%); /* Opera 11.10+ */

		background: -ms-linear-gradient(left,  rgba(72,164,255,1) 0%,rgba(0,140,70,1) 100%); /* IE10+ */

		background: linear-gradient(to right,  rgba(72,164,255,1) 0%,rgba(0,140,70,1) 100%); /* W3C */

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48a4ff', endColorstr='#008c46',GradientType=1 ); /* IE6-9 */

    }



    .logo {

    	float: left;

    }



    .logo img {

        margin-top: 7px;

        margin-right: 10px;

    }



    .logo .name {

    	display: inline-block;

    	font-size: 15px;

    	line-height: 40px;

    	margin-right: 20px;

    }



    #uni-search {

        background: #666666;

        border-radius: 3px;

        border: none;

        color: white;

    	float: left;

    	position: relative;

    	width: 220px;

        max-width: 100%;

    	height: 25px;

    	margin: 7px 0;

    }



    .nav {

        float: right;

        color: white;

        line-height: 40px;

    }



    .nav a {

        cursor: pointer;

        color: rgba(72,164,255,1);

    }



    .main-wrapper {

        position: relative;

        padding-top: 40px;

        min-height: 100%;

    	background: #ececec;

    	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);

    }







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





.profiles {

    width: 100%;

    background: black;

}



.feat {

    opacity: 0.6;

}



.feat:hover {

    opacity: 0.8;

}





.text-overlay, .first-logo {

    position: absolute;

    left: 50%;

    top: 150px;

    width: 440px;

    padding: 20px;

    margin: 0 0 30px -220px;

    text-align: center;

}



.first-logo {

    top: 20px;

    z-index: 4;

}



.first-logo img {

    margin: 0 auto;

    max-width: 100%;

}





/**

.text-overlay h2, .text-overlay p {

    text-shadow: 0px 0px 5px rgba(0,0,0,0.9);

} **/



.text-overlay h1 {

    text-transform: uppercase;

    color: white;

    font-size: 40px;

}



.text-overlay p {

    color: white;

    font-size: 16px;

    font-family: 'Roboto Slab', Arial, sans-serif;

}





#main_search {

    position: relative;

    display: block;

    width: 100%;

    font-size: 16px;
    font-family: "Arial",Helvetica,sans-serif;
    font-weight: bold;
    background: rgba(0,0,0,0.8);

    padding: 15px 10px;

    color: white;

    border-radius: 3px;

    border: none; 

}





.login-options {

    margin-top: 20px;

}



.login-options a {

    cursor: pointer;

    color: white;

}



.login-options a:hover {

    text-decoration: underline;

}



.login-options small {

    padding: 7px;

    border-radius: 50%;

    background: #008c46;

}





/**======== Featured Profiles ===========**/



.ft-prof h5 {

    color: white;

    margin: 20px 0;

    font-family: 'Roboto Slab', Arial, sans-serif;

}



#featured-profiles li {

    margin-bottom: 20px;

}



#featured-profiles li img {

    float: left;

}





/** ============  Summary Profile ======= **/



.summary {

    font-size: 13px;

    font-family: 'Roboto Slab', Arial, sans-serif;

    width: 160px;

    float: left;

    background: #e8e8e8;

    padding: 10px;

}



.summary p {

    margin: 0;

}



.summary .name {

    font-size: 15px;

    color: #55AAFF;

    font-family: 'Roboto Slab', Arial, sans-serif;

    font-weight: 700;

}



.profile-image {

    float: left;

    position: relative;

    display: block;

    width: 160px;

    height: 160px;

    overflow: hidden;

}



.profile-image img {   

    width: 100%; 

    transition: all 0.3s ease-in-out;

    transform: translate3d(0px, 3px, 0px);

    -webkit-transform: translate3d(0px, 3px, 0px)

}



.profile-image img:hover {

    opacity: 0.7;

    transform: translate3d(0px, 30px, 0px);

    -webkit-transform: translate3d(0px, 30px, 0px);

}



.full-profile {

    display: block;

    width: 100%;

    background: #222;

    height: 30px;

    line-height: 30px;

    text-align: center;

    color: white;

    position: absolute;

    top: 0; left: 0;

    z-index: 0;

}



/**============== Profiles ============= **/



h3.name { 

    margin-top: 20px;

    font-weight: bold;

    display: inline-block; }



.social-icons {

    float: right;

    display: inline-block;

    margin-top: 20px;

}



.social-icons a {

    display: block;

    border-radius: 3px;

    color: white;

    margin: 0;

    font-size: 11px;

    font-weight: bold;

    color: #777; }



.social-icons a:after {

    content: '';

    width: 16px;

    height: 16px;

    margin: 0 5px;

    position: relative;

    float: right;

}



.social-icons a.twitter:after {

    background: url(../images/tw.png); }



.social-icons a.facebook:after {

    background: url(../images/fb.png); }



.social-icons a.instagram:after {

    background: url(../images/in.png); }



.social-icons ul li {

    margin-bottom: 5px;

}



.brief-profile {

    border-top: solid 3px rgba(0,140,70,1);

    padding: 10px 20px;

    background: #efefef;

    border-radius: 0px 0px 3px 3px;

}



.brief-profile p {

    margin-bottom: 5px;

}



.brief-profile small {

    font-weight: bold;

    color: rgba(0,140,70,1);

}







/**=========== Discography ======= **/

.disc {

    margin-top: 20px;

}



.disc.left h4, .disc.right h4 {

    color: white;

    font-size: 14px !important;

    padding-left: 20px;

    line-height: 30px;

    background: #52affc;

    width: 100%;

}



.disc.right h4 {

    background: #018c4a;

}



.ft-image {

    float: left;

    margin-right: 10px;

    width: 100px;

}



.albums li h5, .mixtapes li h5{

    color: #52affc;

    font-weight: bold;

    font-size: 18px;

}



.albums li, .mixtapes li {

    margin: 10px;

    background: #efefef;

    border-radius: 5px;

    padding: 5px;

}



.singles li, .features li {

    margin-bottom: 10px;

}



.singles li h5, .features li h5 {

    color: #018c4a;

    font-weight: bold;

    font-size: 16px;

}



.singles table, .features table {

    font-weight: bold;

    color: #333;

}



.singles table tr:first-child, .features table tr:first-child {

    font-weight: normal;

}



/**============= Login ==============*/



#login-to-account {

    width: 100%;

    background: #222;

    border-radius: 0 0 3px 3px;

    padding: 5px 10px;

}



#login-to-account label {

    float: left;

    line-height: 50px;

    margin: 0 10px; }



#login-to-account input[type="submit"] {

    padding: 6px 12px;

    margin: 10px 0 0 10px;

}





/**============= Search ==============**/



.search, .uni-search {

    position: relative;

}



.uni-search .search-button {

    left: 330px;

    top: 7px;

    height: 25px;

    background-position-y: -2px;

}



.search-button {

    top: 18px;

    right: 10px;

}

.search-query {

    margin: 20px;

}





/***============= Register ============**/

.register {

    margin-top: 30px;

}



.register label {

    color: #333;

}



.register input {

    margin-right: 20px;

}



.register ul li {

    width: 100%;

    display: inline-block;

    margin-bottom: 10px;

}



.shout h2 {

    padding: 20px;

    padding-bottom: 20px;

    border-bottom: solid 1px #666;

}



.shout h2 {

    color: #018c4a;

}





/**============== Footer =============== **/



.footer {

    width: 100%;

    padding: 0 10px;

    height: 50px;

    display: block;

    background: #222;

}



.footer a {

    font-size: 12px;

    margin-right: 10px;

    color: white;

    line-height: 50px;

}



.footer a:hover {

    text-decoration: underline;

}







 /*  #Mobile (Portrait)

================================================== */



    /* Note: Design for a width of 320px */



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

        .text-overlay, .first-logo {

            width: 100%;

            left: 0; top: 0;

            position: relative;

            margin: 0 auto;

            display: inline-block;

        }



        .first-logo {

            position: absolute;

            top: 20px;

        }



        .text-overlay h1 {

            font-size: 32px;

            line-height: 1.2;

        }



        .ft-prof {

            border-top: solid 2px #222;

        }



        .ft-prof h5 {

            margin-left: 10px;

        }



        #login-to-account {

            padding: 20px 0px 10px 30px;

        }



        #login-to-account ul li {

            display: inline-block;

            width: 100%;

        }



        .admin {

        }



       .mob-left { 

            max-width: 120px;

            position: absolute;

            top: 160px; }



        .name {

            margin-bottom: 10px;

        }



        .social-icons {

            float: none;

            clear: both;

            margin: 0;

        }



        .summary, .profile-image {

            width: 140px;

            height: 140px;

        }



        .resp-tab-active:after {

            display: none;

        }





        .brief-profile {

            background: none;

            border: none;

            padding-left: 140px;

        }



        .artiste-img {

            position: absolute;

            width: 120px;

        }



        #tabbed-info {

            margin-top: 20px !important;

        }



        #signup {

            padding: 20px;

        }



        #signup input {

            width: 100%;

        }



        }



/* #Mobile (Landscape)

================================================== */



    /* Note: Design for a width of 480px */



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



    }



/* #Tablet (Portrait)

================================================== */





    /* Note: Design for a width of 768px */



    @media only screen and (min-width: 768px) and (max-width: 959px) {



        .summary, .profile-image {

            width: 124px;

        }



    }