.main{justify-content:center;align-items:center;}
.left_section{width:50%;height:100%;margin-top:-100px;float:right;}
.right_section{width:50%;height:100%;float:left;padding:0 0 0 20px;}
video{width: 100%;height: 56.25%;margin-top: 21.875%;}
.our_supply_menu{height:100%; margin:0 auto;}
ul,li{margin-right:15px;padding:0;list-style:none}

.sup_menu .item{float:right;position:relative}
.sup_menu .item .new{height:28px;padding:3px 7px 0 0;top:41px;width:140px; background:#0e5c38;color:#FFF;display:block;font-family:'Poppins','Tajawal', sans-serif;font-size:18px;position:absolute;text-transform:uppercase;z-index:1; }
.sup_menu .item a{background-color:#FFF;color:#820922;display:block;overflow:hidden;position:absolute;box-shadow:0 7px 7px 0 #CCC;-moz-box-shadow:0 7px 7px 0 #CCC;-webkit-box-shadow:0 7px 7px 0 #CCC}
.sup_menu .item a:hover{z-index:2;overflow:visible;position:absolute;-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;-o-transition:height .2s ease-in-out;-ms-transition:height .2s ease-in-out;transition:height .2s ease-in-out}
.sup_menu .item:hover .new{z-index:3}
.sup_menu .item a h3{border:0;color:#000;font-size:18px;margin:-28px 0 0.5em 0;padding:0;text-align:center;text-transform:uppercase; }
.sup_menu .item a p{color:#432;font-size:16px;margin:0 -14px 0 0;padding:0 14px 10px 14px;background-color:#ffd200;box-shadow:0 7px 7px 0 #CCC;-moz-box-shadow:0 7px 7px 0 #CCC;-webkit-box-shadow:0 7px 7px 0 #CCC}

.our_supply_menu .sup_menu{float:right;margin:0 0 10px 0}
.our_supply_menu .sup_menu .item{height:200px;padding:0 10px 0 0;width:425px}
.our_supply_menu .sup_menu .item a{height:25px;padding:159px 14px 0 0;top:1px;width:400px;text-decoration:none;background-color:#74ab26;}
.our_supply_menu .sup_menu .item a:hover{height:132px;padding-top:250px;background-color:#ffd200;}
.our_supply_menu .sup_menu .item a img{clip:rect(0px,372px,130px,0px);height:220px;position:absolute;top:14px;width:372px}
.our_supply_menu .sup_menu .item a:hover img{clip:auto}
.our_supply_menu .sup_menu .item .new{right:-1px}


@media only screen and (max-width: 967px) {
.our_supply_menu{ width:700px;margin:0 auto;}
.our_supply_menu .sup_menu {margin: 0 0 10px -10px;}
.our_supply_menu .sup_menu .item {height:200px;padding:0 10px 0 0;width:340px;}
.our_supply_menu .sup_menu .item a img {clip: rect(0px,282px,130px,0px);height:176px;width:282px;}
.our_supply_menu .sup_menu .item a:hover {padding-top: 200px;}
.our_supply_menu .sup_menu .item a {width:310px;}
.sup_menu .item a p {color:#432;font-size:16px;margin-right:-14px;padding:0 14px 14px 0;}
.left_section {width:100%;}
.right_section {width:100%;}
blockquote {margin:470px 0 20px;}
}

@media only screen and (max-width: 620px) {
.our_supply_menu .sup_menu {margin: 0 0 10px -10px;}
.our_supply_menu{ width:330px;margin:0 auto;}
.our_supply_menu .sup_menu .item {height:200px;padding:0 0 0 10px;width:300px;}
.our_supply_menu .sup_menu .item a img {clip: rect(0px,282px,130px,0px);height:176px;width:282px;}
.our_supply_menu .sup_menu .item a:hover {padding-top: 200px;}
.our_supply_menu .sup_menu .item a {width:310px;}
.sup_menu .item a p{color:#432;font-size:16px;margin:0 -14px 0 0;padding:0 14px 0 14px;}
.left_section {width:100%;}
.right_section {width:100%;}
blockquote {margin:200px 0 20px;}
}