Untitled-1

```
body{
margin: 0;
padding: 0;
}

.header {
background-color: #262628;
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
flex-direction: row;
padding-left: 20px;
}

.header .container_left_side {
display: flex;
}

.header .logo {
background: url("http://i0i.herokuapp.com/i/tc-logo-header.svg") no-repeat;
width: 150px;
height: 100%;
background-position: 0 50%;
}

.header .link_active {
font-family: Roboto;
color: #EDEDF2;
font-size: 12px;
line-height: 62px;
padding-left: 30px;
letter-spacing: 0.87;
text-decoration: none;
}

.header .link_default {
font-family: Roboto;
color: #888894;
font-size: 12px;
line-height: 62px;
padding-left: 20px;
letter-spacing: 0.87;
text-decoration: none;
}

.header .icon_search {
background: url("http://i0i.herokuapp.com/i/search-header.svg") no-repeat;
width: 16px;
height: 16px;
padding-left: 20px;
}

.header .container_right_side {
display: flex;
align-items: center;
}

.header .btn_primary {
background-color: #0681FF;
width: 107px;
height: 30px;
font-family: Roboto;
font-size: 13px;
line-height: 30px;
font-weight: 300;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
margin-left: 5px;
margin-right: 20px;
text-decoration: none;
}

.header .btn_secondary {
background-color: #A3A3AD;
width: 76px;
height: 30px;
font-family: Roboto;
font-size: 13px;
line-height: 30px;
font-weight: 300;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
text-decoration: none;
}
.header .toggle-menu-link{
position: absolute;
width: 24px;
height: 24px;
top: 24px;
left: 20px;
background: url('https://png.icons8.com/metro/40/a1a1a1/menu.png') 0 0 no-repeat;
background-size: 24px;
z-index: 99;
display: none;
}



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

/* target screen : tablet */

@media only screen and (max-width: 1280px) {
  
/* sidebar menu */
  
.header .toggle-menu-link{
display: block;
}
.header .container_left_side {
display: block;
position: fixed;
background: #262628;
display: none;
    
left: 0;
top: 0;
bottom: 0;
width: 300px;
padding-top: 60px
}
.container_left_side.on{
display: block;
}
.header a,
.header span {
display: block;
padding-left: 20px
}

.logo{
position: absolute;
top: 20px;
left: 60px;
height: 30px;
}
  
.container_right_side{
margin-left: auto;
    
}
}

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

/* target screen : mobile */

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

.tc_logo{
background: url("https://i0i.herokuapp.com/i/logo-footer-tc.svg") no-repeat;
background-position: 50% 0;
width: 100%;
height: 18px;
}

.footer{
background-color:#262628;
padding-top: 40px;
}

ul {
list-style-type:none;
padding-top: 30px;
}

ul li a{
font-family: Roboto;
font-size:11px;
color: #888894;
line-height: 30px;
text-decoration: none;
letter-spacing: 0.8;
}

li.title a{
font-family: Roboto;
font-size:11px;
font-weight: bold;
color: #FFFFFF;
line-height: 30px;
letter-spacing: 0.8;
}

.container_lists{
display: flex;
flex-direction: row;
justify-content: space-around;
}

.header{
background-color: #262628;
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
flex-direction: row;
padding-left: 20px;
}
.container_left_side{
display: flex;
}

.logo{
background: url("http://i0i.herokuapp.com/i/tc-logo-header.svg") no-repeat;
width: 150px;
height: 100%;
background-position: 0 50%;
}

.link_active{
font-family: Roboto;
color: #EDEDF2;
font-size:12px;
line-height: 62px;
padding-left: 30px;
letter-spacing: 0.87;
text-decoration: none;
}

.link_default{
font-family: Roboto;
color: #888894;
font-size:12px;
line-height: 62px;
padding-left: 20px;
letter-spacing: 0.87;
text-decoration: none;
}

.icon_search{
background: url("http://i0i.herokuapp.com/i/search-header.svg") no-repeat;
width:16px;
height:16px;
padding-left: 20px;
}

.container_right_side{
display: flex;
align-items: center;
}

.btn_primary{
background-color: #0681FF;
width:107px;
height:30px;
font-family: Roboto;
font-size: 13px;
line-height: 30px;
font-weight: 300;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
margin-left: 5px;
margin-right: 20px;
text-decoration: none;
}

.btn_secondary{
background-color: #A3A3AD;
width:76px;
height:30px;
font-family: Roboto;
font-size: 13px;
line-height: 30px;
font-weight: 300;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
text-decoration: none;
}


/* target screen : tablet */
@media only screen and (min-width: 751px){
  
.container_lists{
display: flex;
flex-wrap: wrap;
}
  
}


/* target screen : mobile */
@media only screen and (max-width: 750px){
.footer{
min-height: 500px;
}
  
.container_lists{
display: flex;
flex-wrap: wrap;
}
.container_lists ul{
width: 100px;
}

}
```