@font-face {
    font-family: Opensans;
	src: url('../fonts/OpenSans-Regular.woff2') format("woff2"),
    url('../fonts/OpenSans-Regular.woff') format("woff");
   font-weight: normal;
   font-style: normal;
}
@font-face {
    font-family: Opensansl;
    src: url('../fonts/OpenSans-Light.woff2') format("woff2"),
    url('../fonts/OpenSans-Light.woff') format("woff");
}

@font-face {
    font-family: Opensansb;
    src: url('../fonts/OpenSans-SemiBold.woff2') format("woff2"),
    url('../fonts/OpenSans-SemiBold.woff') format("woff");
   font-weight: normal;
   font-style: normal;
}
 


* {
  padding: 0;
  margin: 0;
  border: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

.clear{
  clear: both;
}

input {outline:none;}
 
html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background: #182039;
  font: 15px Opensans;
}


.head{
	width:100%;
	height: 80px;
	background-color: #232F53;
	position: fixed;
	left:0;
	top:0;
}


.head .search{
	position: relative;
	float: left;
	margin-left:20px;
	margin-top: 20px;
    width: 500px;
	height:41px;
	background: #182039 url('../img/search_ico.svg') 6px 4px  no-repeat;
	border-radius:20px;
	border: 2px solid #404E77;
    overflow: hidden;
}

.head .search INPUT{
	margin: 4px 0 0 50px;
    display: block;
    color: white; 
    width: 420px;
	height:30px;
	background: #182039;
	border:0;
}


.head .search .go{
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50px;
	height: 50px;
	background: #3E64FF url('../img/arrow_go.svg') 20px 10px  no-repeat;
	 cursor: pointer;
}

.head .music {
	width:40px;
	height:40px;
	background:  url(../img/music.svg?1)  no-repeat;
	margin: 19px 0 0 20px;
	float: left;
}




.head .notif{
	width:40px;
	height:40px;
	background:  url(../img/notif.svg?1)  no-repeat;
	margin: 19px 0 0 100px;
	float: left;
}

.head .profile_icon{
	width:50px;
	height:50px;
	background:    url(../img/profile_icon.svg?1)  no-repeat;
	margin: 19px 0 0 20px;
	float: right;
}

.head   .arrow_dowm{
	width:20px;
	height:20px;
	background:    url(../img/arrow_down.svg?1)  no-repeat;
	margin: 19px 0 0 20px;
	float: right;
}


.head .player {
	margin: 19px 0 0 20px;
	float: left;
}

.head .player .play_track{
	width:250px;
     float: left;
	color:#AABBFF;
	margin: 12px 0 0 20px;
}

.head .player .play_back{
	width:20px;
	height:20px;
	background:  url(../img/play_back.svg)  no-repeat;
	margin: 12px 0 0 20px;
	float: left;
}

.head .player .play_stop{
	width:20px;
	height:20px;
	background:  url(../img/play_stop.svg)  no-repeat;
	margin: 12px 0 0 20px;
	float: left;
}

.head .player .play_next{
	width:20px;
	height:20px;
	background:  url(../img/play_next.svg)  no-repeat;
	margin: 12px 0 0 20px;
	float: left;
}


.logo{
	width:90px;
	height:90px;
	background:  url(../img/logo.svg?1)  no-repeat;
	margin-top: 15px;
	float: left;
	
}

.menuleft{
	 position: absolute;
	 width: 90px;
	 height:100%; 
	 top: 100px;
	 left:-30px;
}



.menuleft  .menu1{
	background:   url(../img/menu1.svg?) 15px 17px no-repeat;
}

.menuleft  .menu2{
	background:   url(../img/menu2.svg?) 15px 17px no-repeat;
}

.menuleft  .menu3{
	background:   url(../img/menu3.svg?) 15px 17px no-repeat;
}

.menuleft  .menu4{
	background:   url(../img/menu4.svg?) 15px 17px no-repeat;
}

.menuleft  .menu5{
	background:   url(../img/menu5.svg?) 15px 17px no-repeat;
}

.menuleft  .menu6{
	background:   url(../img/menu6.svg?) 15px 17px no-repeat;
}

.menuleft  .menu7{
	background:   url(../img/menu7.svg?) 15px 17px no-repeat;
}

.menuleft  .menu8{
	background:   url(../img/menu8.svg?) 15px 17px no-repeat;
}


.menuleft  .item{
	display: block;
	width:60px;
	height: 60px;
	border-radius:20px;
	margin: 20px 0 0 20px;
	background-color: #242C4A;
	cursor:pointer;
	transition: 1s;
}


.menuleft  .selected, .menuleft .item:hover {
	background-color: #3E64FF;
}

.content{
 
}

.content .user_photo{
	width:282px;
	height:257px;
	background:   url(../img/photo1.jpg)  no-repeat;  
 
	margin-left:20px;
	margin-top: 20px;
	border-radius:1000px;
	border: 4px solid black;
}


.center{
	position: relative;
	width:1400px;
	margin:0 auto;
}