@media only screen and (max-width:1024px)  {
    
	/* Style adjustments for viewports that meet the condition */
	.top-menu {
width: 580px;
}
	container {width: 540px;}
.side-bar {
width: 155px;
}

.top-menu span {
margin: 0 38px 0 0;
}	




}

@media only screen and (max-width:768px)  {
    
.top-menu {
width: 100%;
}

.container {margin: 0 auto;padding: 0;/* position: fixed; */width: 100%;position: relative;lef: 0;margin-top: 0px;}

.top-menu span {
margin: 0;
}


.top-menu span:nth-of-type(3) {
position: fixed;
right: 9px;
left: auto;
top: 30px;
}


.top-menu span:nth-of-type(2) {
position: fixed;
right: auto;
left: 9px;
top: 30px;
}


.top-menu span:nth-of-type(4) {
position: fixed;
right: 9px;
left: auto;
top: 10px;
}

.top-menu span:nth-of-type(1) {
position: fixed;
right: auto;
left: 9px;
top: 10px;
}

.side-bar {position: fixed;top: 0px;width: 155px;left: 0px;background: white;width: 100% !important;padding-top: 17px;/* z-index: 0; */padding-bottom: 13px;height: 100%;transition: opacity 1s;opacity: 1 !important;text-align: center;/* border: 9px solid rgba(0, 0, 0, 0.03); */height: 17px;overflow: hidden;}

.side-bar.active-bar {
    overflow: scroll;
}


project container {width: auto;padding: 0px 18px;margin-left: auto;}

container img {
    width: 96% !important;
    margin-bottom: 20px;
    padding: 2%;
}

menu-holder {
    display: block;
}

.menu a {
    color: black !important;
    text-align: center;
    display: block;
}

.menu {
    margin-top: 30px;
    padding: 0 40px;
    left: 0;
    z-index: 9;
    background-color: white !important;
    position: relative;
}

.bottom-side {
    left: 0;
    color: black !important;
    text-align: center;
    position: relative;
    bottom: 0;
    margin-top: 50px;
    text-transform: uppercase;
    margin-bottom: 190px;
}

.top-side {}

.top-side {
    font-size: 13px;
    color: black !important;
    cursor: hand;
    cursor: pointer;
    text-align: center;
}


project {
    padding: 116px 10px;
    width: auto;
}

.swiper-container {
    width: auto;
    height: auto;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}



.clearings .video-js-2 {
    height: auto !important;
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
    min-height: 268px;
}



.video-js-2 {
    width: auto !important;
    height: auto !important;
    border: 8px solid white;
    margin-bottom: 21px;
    min-height:185px;
}


project-title {
line-height: 37px;
font-size: 29px;
margin-bottom: 27px;
}

skill {
margin-bottom: 4.5px;
margin-right: 2.2px;
}

skill {
    margin-bottom: 4.5px;
    margin-right: 2.2px;
}

description {
    margin: 27px 0;
}

img {}



}



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