@media screen and (max-width: 767px) and (min-width: 620px) {
    body {
        background: #ccc;
    }
    #wrapper {
        width: 100%;
        height: 1024px;
    }
    #header {
        width: 101%;
        height: 14.3%;
        position: relative;
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
    }
    #header .cyras-logo {
        width: 24%;
        float: left;
        background: url(images/cyras-logo2.png) no-repeat top center;
		height:160px;
    }
    #header .cyras-logo a{
        width: 100%;
        height: 100%;
    }
    .separator {
        display: none;
    }
    .hm .u2 {
        width: 25%;
        float: left;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        margin-right: 1px;
    }
    .hm .mn, .hm .search, .hm .socmed {
        width: 100%;
        float: left;
        height: 72.5px;
        border: 1px solid #755947;
        margin-top: -1px;
    }
    .hm .mn a {
        width: 100%;
    }
    .hm .bendera {
        display: none;
    }
    .hm .m-search {
        margin-top: 20px;
    }
    .hm .socmed {
        background: none;
    }
    .hm .socmed .icn {
        margin-top: 5px;
    }
    .hm .socmed .wale {
        width: 110px;
        height: 30px;
        background: url('images/socmed.png') no-repeat center center;
        margin: 20px auto;
		background-size:100% auto;
    }
    #top .contex {
        width: 100%;
        height: 790px;
        overflow: hidden;
        background-size: 100% 100%;
    }
    .bxslider li div {
        width: 100%;
        height: 790px;
    }
    .contex .sl1, .contex .sl3 {
        background: url(images/slide1.jpg) no-repeat -130px center;
        background-size: auto 100%;
        color: #543019;
        text-shadow: 1px 1px 2px #fff;
    }
    .contex .sl1 .ctx, .contex .sl3 .ctx {
        margin: 300px 0px 0px 200px;
        position: absolute;
    }
    .contex .sl2, .contex .sl4 {
        background: url(images/slide2.jpg) no-repeat center center;
        background-size: auto 100%;
        color: #fff;
        text-shadow: 1px 1px 2px #000;
    }
    .contex .sl2 .ctx, .contex .sl4 .ctx {
        margin: 100px 0px 0px 50px;
        position: absolute;
    }
    #footer {
        width: 100%;
        height: 86px;
    }
    #navbar {
        float: none;
        clear: both;
		margin-top:0px;
		margin-left:20px;
    }
	#navbar li{
		margin-top:15px;
	}
		
    #navbar ul ul a {
        padding: 0px 10px;
    }
    .f-icns {
        margin-top: 45px;
        margin-left: 30px;
        position: absolute;
    }
    .copy {
        margin-top: 46px;
        float: right;
        width: 20%;
    }
    #footer .bendera {
        margin-top: -3px;
        position: absolute;
        margin-left: -50px;
        display: block;
    }
    
    /*--- why cyras ---*/
    .wc {
        padding: 7%;
    }
    .vision {
        margin-left: -9%;
        height: 25%;
        width: 49%;
        background-size: 100% auto;
    }
    .duduk2 {
        float: right;
        margin-right: -9%;
        width: 69%;
        height: 25%;
        background-size: auto 100%;
    }
    .ovm {
        width: 144px;
    }
    .cyrtex {
        height: 360px;
        width: 64%;
    }
    
    .cyrtex #post p {
        font-size: 11px;
        line-height: 18px;
    }
    
    /*--- our brands ---*/
    .sret {
        width: 80%;
        float: right;
    }
    .liat2, .gelas,
    .oa .bel, .oa .laptop {
        width: 50%;
        height: 244px;
        background-size: auto 100%;
    }
    .obisi {
        height: 480px;
        margin-top: 30px;
    }
    .our-brands .scroll-y {
        margin-left: 86%;
    }
    .child-brands .scroll-y {
        margin-left: 86%;
    }
    .uz {
        width: 90%;
    }
    .uz .frame {
        float: left;
        background: none;
        width: 50%;
        height: auto;
        margin-bottom: 20px;
    }
    .uz .frame img {
        border: 5px solid #fff;
        box-shadow: 1px 1px 3px #aaa;
        width: 90%;
        height: auto;
    }
    .uz .desc {
        float: left;
        width: 45%;
        margin-left: 15px;
        margin-top: 10px;
    }
    .uz .desc h3 {
        text-align: left;
    }
    .uz .desc p {
        font-size: 11px;
        line-height: 18px;
    }
    .cugi {
        width: 100%;
    }
    .cugi p {
        font-size: 11px;
        line-height: 18px;
    }
    .cob {
        width: 100%;
        margin: 5px 0px;
        height: auto;
    }
    .child-brands .cob {
        height: 370px;
        margin-top: 15px;
    }
    .imgo {
        width: 25%;
        height: auto;
        background: none;
        float: left;
    }
    .imgo img {
        margin-left: 12px;
        margin-top: 10px;
        width: 90%;
        height: auto;
        border: 5px solid #fff;
        box-shadow: 1px 1px 3px #aaa;
    }
    .brx {
        height: 168px;
    }
    .cgo {
        height: auto;
        float: left;
        width: 70%;
        margin-left: 27px;
    }
    .fs .cgo {
        margin-left: 50px;
    }
    .cgo p {
        line-height: 18px;
        font-size: 11px;
    }
    .ngisi2, .ngiris2 {
        height: 244px;
        width: 384px;
    }
    .ngiris2 {
        background-size: auto 100%;
    }
    
    /*--- our assistance ---*/
    .oa .sret {
        width: 75%;
    }
    .quote {
        display: none;
    }
    .coa {
        line-height: 18px;
        font-size: 11px;
        height: auto;
        width: auto;
        margin: 0px;
    }
    
    /*--- partner login ---*/
    .pl {
        background-size: auto 100%;
        background-position: -300px center;
    }
    
    /*--- financial report ---*/
    .sendakep, .keleleran {
        width: 50%;
        height: 244px;
        background: url(images/kantoran.jpg) no-repeat;
    }
    .sendakep {
        background-position: -225px 0px;
    }
    .keleleran {
        background-position: -225px -180px;
    }
    .kiri {
        margin-right: 10px;
        width: 45%;
    }
    .kanan {
        width: 50%;
        float: right;
    }
    .fr {
        width: 45% !important;
    }
    .srot {
        width: 40% !important;
    }
    .intru {
        width: 90%;
        background-position: 95% center;
    }
    .bbtm {
        width: 95%;
    }
    /*--- contact us ---*/
    .cuc {
        width: 600px;
        margin: 10px auto;
    }
    .col {
        margin-right: 20px;
    }
    .col2 {
        width: 380px;
        margin-top: 10px;
    }
    .juc {
        width: 160px;
        margin-right: 30px;
        float: left;
    }
    
    /*--- news ---*/
    .dunia2 {
        background-image: url(images/dunia3.jpg);
        width: 50%;
        height: 244px;
    }
    .tangan2 {
        background-image: url(images/tangan3.jpg);
        width: 50%;
        height: 244px;
    }
    .entric {
        height: 460px;
        width: 59%;
    }
    .new .entric #post {
        width: 100%;
    }
    .new .kiri {
        width: 200px;
    }
    .new .ptt {
        width: 43%;
        float: left;
    }
    .new .ptt img {
        width: 90%;
    }
    .new .entric #post .anu {
        width: 53%;
        margin-left: 47%;
    }
    
    
    /*--- careers ---*/
    .haha2, .jempol2, .loncat2 {
        width: 33.33%;
        height: 244px;
    }
    .haha2 {
        background-image: url(images/haha3.jpg);
    }
    .jempol2 {
        background-image: url(images/jempol3.jpg);
    }
    .loncat2 {
        background-image: url(images/loncat3.jpg);
    }
    .crr .sret {
        width: 85%;
    }
    .crr .entric {
        width: 100%;
    }
    .crr .entric #post {
        width: 100%;
    }
    
    .poste {
        height: 440px;
    }
	.pagenavi2{
		margin-top:-20px;
	}
    
    .scroll-y {
        position: absolute;
        height: 60px;
        width: 27px;
        margin-left: 86%;
        margin-top: 333px;
    }
    .snews {
        margin-left: 93%;
        margin-top: -200px;
    }
    .hotres, .our-ass {
        display: none;
    }
    .scars {
        margin-left: 88%;
        margin-top: -200px;
    }
    /*--- message ---*/
    .msg .entric {
        width: 100%;
    }
}