/*smart phone small and medium devices*/
@media screen and (max-width: 435px){
    header{z-index:100;position:relative;}
    menu{position:relative;height:100px;background:#fff;}
    #header_wrapper{height: 100%;width: 100%;margin: 0px auto;}
    #logo{float:left;padding:5px;height:100%;}
    #name{width:100%;text-align:center;padding:5px;float:left;color:#c89a28;height:100%;}
    #name h6,#name h1{color:#000;text-align:left;margin-top: 10px;}
    #name h1{color:#c89a28;font-size:1.3em;}#name h6{color:#3c2415;font-size:.9em;}#contacts{display:none;}
    #menu_toggler{background:#3c2415;text-align:center;cursor:pointer;color:#FFF;display:flex;box-shadow: 0px 0px 3px #444;}
    #menu_icon{width:40%;padding:10px;font-size: 1em;margin:0px auto;}
    #navigation{border-top:1px solid #eee;background:#fff;display:none;width:100%;}
    #navigation ul.topul  {width:100%;padding:0;display:block;list-style: none;text-align:center;margin:0;}
    #navigation ul.topul > li {width:100%;background:#fff;}
    #navigation ul.topul > li a {width:100%;display:block;text-decoration:none;padding:10px;transform:none;color:#3c2415;}
    #navigation ul.topul > li.active,#navigation ul.topul > li:hover{background: #3c2415;color: #c89a28;}
    #navigation ul.topul  > li.active a,#navigation ul.topul > li:hover a{color: #ddd;}
    #navigation ul.topul  li ul{position:relative;width:100%;list-style:none;display:none;margin:0;}
    #navigation ul.topul  li ul > li{transition: background 0.3s;transform:none;background:#c89a28;border-bottom:1px solid #fff;}
    #navigation ul.topul  li ul > li:last-child{border-bottom:none;}
    #navigation ul.topul  li ul > li a{width:100%;display: block;text-decoration: none;padding:10px;transform: none;color:#3c2415;text-align:center;text-indent:21px;}
}

/*smart phone landscape and ipad land scape*/
@media only screen and (min-width: 436px) and (max-width: 800px){
    header{z-index:100;position:relative;}
    menu{position:relative;height:100px;background:#fff;}
    #header_wrapper{height: 100%;width: 100%;margin: 0px auto;}
    #logo{float:left;padding:5px;height:100%;}
    #name{width:100%;text-align:center;padding:5px;float:left;color:#c89a28;height:100%;}
    #name h6,#name h1{color:#000;text-align:left;margin-top: 10px;}
    #name h1{color:#c89a28;font-size:1.3em;}#name h6{color:#3c2415;font-size:.9em;}#contacts{display:none;}
    #menu_toggler{background:#3c2415;text-align:center;cursor:pointer;color:#FFF;display:flex;box-shadow: 0px 0px 3px #444;}
    #menu_icon{width:40%;padding:10px;font-size: 1em;margin:0px auto;}
    #navigation{border-top:1px solid #eee;background:#fff;display:none;width:100%;}
    #navigation ul.topul  {width:100%;padding:0;display:block;list-style: none;text-align:center;margin:0;}
    #navigation ul.topul > li {width:100%;background:#fff;}
    #navigation ul.topul > li a {width:100%;display:block;text-decoration:none;padding:10px;transform:none;color:#3c2415;}
    #navigation ul.topul > li.active,#navigation ul.topul > li:hover{background: #3c2415;color: #c89a28;}
    #navigation ul.topul  > li.active a,#navigation ul.topul > li:hover a{color: #ddd;}
    #navigation ul.topul  li ul{position:relative;width:100%;list-style:none;display:none;margin:0;}
    #navigation ul.topul  li ul > li{transition: background 0.3s;transform:none;background:#c89a28;border-bottom:1px solid #fff;}
    #navigation ul.topul  li ul > li:last-child{border-bottom:none;}
    #navigation ul.topul  li ul > li a{width:100%;display: block;text-decoration: none;padding:10px;transform: none;color:#3c2415;text-align:center;text-indent:21px;}
}

/*work in a width of 850 px customed */
@media only screen and (min-width: 801px) and (max-width: 1000px){
    header{z-index:100;position:relative;}
    menu{position:relative;height:100px;background:#fff;}
    #header_wrapper{height: 100%;width: 100%;margin: 0px auto;}
    #logo{float:left;padding:5px;height:100%;}
    #name{width:100%;text-align:center;padding:5px;float:left;color:#c89a28;height:100%;}
    #name h6,#name h1{color:#000;text-align:left;margin-top: 10px;}
    #name h1{color:#c89a28;font-size:1.3em;}#name h6{color:#3c2415;font-size:.9em;}#contacts{display:none;}
    #menu_toggler{background:#3c2415;text-align:center;cursor:pointer;color:#FFF;display:flex;box-shadow: 0px 0px 3px #444;}
    #menu_icon{width:40%;padding:10px;font-size: 1em;margin:0px auto;}
    #navigation{border-top:1px solid #eee;background:#fff;display:none;width:100%;}
    #navigation ul.topul  {width:100%;padding:0;display:block;list-style: none;text-align:center;margin:0;}
    #navigation ul.topul > li {width:100%;background:#fff;}
    #navigation ul.topul > li a {width:100%;display:block;text-decoration:none;padding:10px;transform:none;color:#3c2415;}
    #navigation ul.topul > li.active,#navigation ul.topul > li:hover{background: #3c2415;color: #c89a28;}
    #navigation ul.topul  > li.active a,#navigation ul.topul > li:hover a{color: #ddd;}
    #navigation ul.topul  li ul{position:relative;width:100%;list-style:none;display:none;margin:0;}
    #navigation ul.topul  li ul > li{transition: background 0.3s;transform:none;background:#c89a28;border-bottom:1px solid #fff;}
    #navigation ul.topul  li ul > li:last-child{border-bottom:none;}
    #navigation ul.topul  li ul > li a{width:100%;display: block;text-decoration: none;padding:10px;transform: none;color:#3c2415;text-align:center;text-indent:21px;}
}

/*work for ipad min and kindle fire*/
@media only screen and (min-width: 1001px) and (max-width: 1150px){
    header{z-index:100;position:relative;}
    menu{position:relative;height:120px;background:#fff;}
    #header_wrapper{height: 100%;width: 70%;margin: 0px auto;}
    #logo{float: left;height:100%;margin-right: 10px;}
    #name{width:65%;text-align:left;padding:10px;float:left;height:100%;padding-top:25px;}
    #name h6{color:#3c2415;}
    #contacts{width:35%;text-align:left;padding-top:27px;float:left;height:100%;text-align: right;}
    #contacts ul {list-style-type:none;}
    #contacts ul li{color:#3c2415;margin:5px 0;font-weight: bold;}
    #contacts ul li a{color:#3c2415;background: #c89a28;padding: 3px 10px;border-radius:50px;}
    #menu_toggler{display:none;}
    #navigation{background:#3c2415;}
    #menu_wrapper{height: 100%;width: 70%;margin: 0px auto; margin:0 auto;padding: 0;display: flex;list-style: none;text-align:center;}
    #navigation ul.topul > li {width:14%;transition: background 0.3s;background:#3c2415;}
    #navigation ul.topul > li a {width:100%;display:block;text-decoration:none;padding:20px;color:#fff;white-space: nowrap;overflow: hidden !important;text-overflow: ellipsis;}
    #navigation ul.topul > li.active,#navigation ul.topul > li:hover{border-bottom:6px solid #c89a28;color: #c89a28;border-right:3px solid #3c2415;border-left:3px solid #3c2415;}
    #navigation ul.topul  > li.active a,#navigation ul.topul > li:hover a{color: #c89a28;}
    #navigation ul.topul  li ul{position:absolute;transform:skew(20deg);width:200%;left:0%;list-style:none;display:none;z-index:3000;}
    #navigation ul.topul  li ul > li{transition: background 0.3s;transform:none;background:#c89a28;border-bottom:1px solid #fff;}
    #navigation ul.topul  li ul > li:last-child{border-bottom:none;}
    #navigation ul.topul  li ul > li a{width:100%;display: block;text-decoration: none;padding:10px;transform: none;color:#3c2415;text-align:left;text-indent:21px;}
}

/*large screen style sheet*/
@media screen and (min-width: 1151px){
    header{z-index:100;position:relative;}
    menu{position:relative;height:120px;background:#fff;}
    #header_wrapper{height: 100%;width: 70%;margin: 0px auto;}
    #logo{float: left;height:100%;margin-right: 10px;}
    #name{width:65%;text-align:left;padding:10px;float:left;height:100%;padding-top:25px;}
    #name h6{color:#3c2415;}
    #contacts{width:35%;text-align:left;padding-top:27px;float:left;height:100%;text-align: right;}
    #contacts ul {list-style-type:none;}
    #contacts ul li{color:#3c2415;margin:5px 0;font-weight: bold;}
    #contacts ul li a{color:#3c2415;background: #c89a28;padding: 3px 10px;border-radius:50px;}
    #menu_toggler{display:none;}
    #navigation{background:#3c2415;}
    #menu_wrapper{height: 100%;width: 70%;margin: 0px auto; margin:0 auto;padding: 0;display: flex;list-style: none;text-align:center;}
    #navigation ul.topul > li {width:14%;transition: background 0.3s;background:#3c2415;}
    #navigation ul.topul > li a {width:100%;display:block;text-decoration:none;padding:20px;color:#fff;white-space: nowrap;overflow: hidden !important;text-overflow: ellipsis;}
    #navigation ul.topul > li.active,#navigation ul.topul > li:hover{border-bottom:6px solid #c89a28;color: #c89a28;border-right:3px solid #3c2415;border-left:3px solid #3c2415;}
    #navigation ul.topul  > li.active a,#navigation ul.topul > li:hover a{color: #c89a28;}
    #navigation ul.topul  li ul{position:absolute;transform:skew(20deg);width:200%;left:0%;list-style:none;display:none;z-index:3000;}
    #navigation ul.topul  li ul > li{transition: background 0.3s;transform:none;background:#c89a28;border-bottom:1px solid #fff;}
    #navigation ul.topul  li ul > li:last-child{border-bottom:none;}
    #navigation ul.topul  li ul > li a{width:100%;display: block;text-decoration: none;padding:10px;transform: none;color:#3c2415;text-align:left;text-indent:21px;}
}

/*desktop style sheet*/
@media only screen and (min-width: 1151px) and (max-width: 999999999999px){
    header{z-index:100;position:relative;}
    menu{position:relative;height:120px;background:#fff;}
    #header_wrapper{height: 100%;width: 70%;margin: 0px auto;}
    #logo{float: left;height:100%;margin-right: 10px;}
    #name{width:65%;text-align:left;padding:10px;float:left;height:100%;padding-top:25px;}
    #name h6{color:#3c2415;}
    #contacts{width:35%;text-align:left;padding-top:27px;float:left;height:100%;text-align: right;}
    #contacts ul {list-style-type:none;}
    #contacts ul li{color:#3c2415;margin:5px 0;font-weight: bold;}
    #contacts ul li a{color:#3c2415;background: #c89a28;padding: 3px 10px;border-radius:50px;}
    #menu_toggler{display:none;}
    #navigation{background:#3c2415;}
    #menu_wrapper{height: 100%;width: 70%;margin: 0px auto; margin:0 auto;padding: 0;display: flex;list-style: none;text-align:center;}
    #navigation ul.topul > li {width:14%;transition: background 0.3s;background:#3c2415;}
    #navigation ul.topul > li a {width:100%;display:block;text-decoration:none;padding:20px;color:#fff;white-space: nowrap;overflow: hidden !important;text-overflow: ellipsis;}
    #navigation ul.topul > li.active,#navigation ul.topul > li:hover{border-bottom:6px solid #c89a28;color: #c89a28;border-right:3px solid #3c2415;border-left:3px solid #3c2415;}
    #navigation ul.topul  > li.active a,#navigation ul.topul > li:hover a{color: #c89a28;}
    #navigation ul.topul  li ul{position:absolute;transform:skew(20deg);width:200%;left:0%;list-style:none;display:none;z-index:3000;}
    #navigation ul.topul  li ul > li{transition: background 0.3s;transform:none;background:#c89a28;border-bottom:1px solid #fff;}
    #navigation ul.topul  li ul > li:last-child{border-bottom:none;}
    #navigation ul.topul  li ul > li a{width:100%;display: block;text-decoration: none;padding:10px;transform: none;color:#3c2415;text-align:left;text-indent:21px;}
}