/*
Theme Name: Hoang Yen Group
Description: Used to style the responsive layout.
*/

.main_menu ul,
.main_content ul.watch_list,
.lang_sel_list_horizontal ul,
#bottom .bottom_list_gallery {margin: 0; padding: 0; list-style: none;}

.banner img {width: 100%; height: auto;}

.main_menu ul li a,
#lang_select ul li a,
.bottom_gallery .watch_item a.inner_link {text-decoration: none;}

.responsive_show {display: none;}

/*Icon Menu Responsive*/
.main_menu .responsive_show {}
.main_menu .responsive_show .icon:after {
    content: '';
    position: absolute; top: 10px; left: 16%;
    width: 68%; height: 5px;
    background: #fff;
    box-shadow: 
    	0 10px 0 #fff, 
    	0 20px 0 #fff;
}
.main_menu .responsive_show .icon{
    background: #430303;
	border: none;
	width: 48px;
	height: 45px;
	text-indent: -900em;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	outline: none;
	float: right;
	display: block;
}
@media only screen and (max-width: 1280px) {
    .responsive_show {display: block;}
    .header {height: auto !important; margin-bottom: 15px; padding: 0;}
    .header .container {position: relative;}

    /*Header Logo*/
    .custom_logo {padding-top: 20px;}
    .custom_logo a.logo {
        position: relative; left: auto; top: auto; margin: 0;
        width: 180px; height: 86px;
    }

    /*Header languages + search*/
    .top_right {float: none; overflow: hidden; margin: 0;}
    /*Languages*/
    #lang_select {float: none; margin-left: 0;}
    #lang_sel_list {float: right;}
    #lang_select ul li {width: 48px;}
    #lang_select ul li a {padding: 10px 7px; font-size: 13px;}
    /*Search*/
    .top_right .top_search {display: none;}
    .menu-top-menu-container .top_search {display: block;}
    .top_search {width: 237px; margin: 10px auto 0; float: none;}
    #lang_select {top: 10px !important;}
    .topsearch input[type="text"] {width: 225px;}

    /*Header Menu*/
    .main_menu .responsive_show,
    .menu-top-menu-container,
    #lang_select {
        position: absolute; right: 0; top: 0; z-index: 9999; width: 100%;
    }
    .main_menu .responsive_show {top: 65px}
    .menu-top-menu-container {
        display: none; top: 120px; padding: 25px 0;
        background: #180100;
        background: transparent\9;
        background:rgba(24,1,0,0.95);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2180100,endColorstr=#f2180100);
        zoom: 1;
    }

    .main_menu ul {float: none;}
    .main_menu ul li {float: none; text-align: center; margin: 0;}
    .main_menu ul li a:after {display: none !important;}
    .main_menu ul li a {color:#fff; padding: 13px 0;}

    .submenu_wrapper {display: none !important;}
    .submenu_wrapper ul li {width: 124px;}
    .submenu_wrapper ul li a .menu_clock_img {width: 124px; height: 190px; margin: 15px 0 0 0;}
    .submenu_wrapper ul li a .menu_clock_img img {max-width: 100px;}
}
@media only screen and (max-width: 1170px) {
    .main_menu .responsive_show, #lang_select {right: 20px;}
}
@media only screen and (max-width: 1023px) {
    /*Homepage*/
    .home_container .list-watches {margin-left:0; margin-right:0;}
    .home_container .list-watches .list-watches-item {width: 100%; float: none; clear: both;}
    .home_container .list-watches .list-watches-item .inner {margin: 0; height: auto !important;}
    .home_container .list-watches .list-watches-item .inner .thumbnail {height: auto; text-align: center;}
    .home_container .list-watches .list-watches-item .inner .thumbnail img {display: inline-block; visibility: hidden;}
}
@media only screen and (max-width: 768px) {
    /*Contact page*/
    .main_content .gform_wrapper form .gform_body .gfield_label {width: 100%; text-align: left; padding: 0; margin-bottom: 10px;}
    .main_content .gform_wrapper form .gform_body .gfield_label,
    .main_content .gform_wrapper form .gform_body .ginput_container,
    .main_content .gform_wrapper form .gform_body .gfield_captcha_container {display: block;}
    .main_content .gform_wrapper form .gform_body .ginput_container,
    .gfield_captcha_container {width: 100%;}
}
@media only screen and (max-width: 650px) {
    /*Homepage - Hightlight products*/
    .home_container .list-watches .list-watches-item .inner .thumbnail,
    .home_container .list-watches .list-watches-item .inner .detail {width: 100%; float: none; clear: both;}
    .home_container .list-watches .list-watches-item .inner .detail {padding: 20px !important;}
    .home_container .list-watches .list-watches-item .inner .thumbnail {margin: 20px 0 0; background: none !important;}
    .home_container .list-watches .list-watches-item.style-3 .inner .thumbnail,
    .home_container .list-watches .list-watches-item.style-4 .inner .thumbnail {margin: 0 0 20px !important;}
    .home_container .list-watches .list-watches-item .inner .thumbnail img {width: auto; max-height: 250px; visibility: visible;}
    .home_container .list-watches .list-watches-item .inner .detail {text-align: center !important;}
}
@media only screen and (max-width: 480px) {
    /*Editor style*/
    .mceContentBody h1, .main_content h1 {font-size: 30px;}
    .mceContentBody td,
    .main_content td {padding: 8px 5px 8px 0;}
    /*Homepage - Hightlight products*/
    .home_container .list-watches .list-watches-item .inner .thumbnail img {width: auto; max-height: 150px;}
}


/* #Tablet (Portrait)
================================================== */
    /* Note: Design for a width of 768px */
@media only screen and (min-width: 960px) and (max-width: 1200px) {
    /*Header Menu*/
    .submenu_wrapper ul li {width: 160px;}
    .submenu_wrapper ul li a .menu_clock_img {width: 160px; height: 190px; margin: 15px 0 0 0;}
    
    /*Inner page - Title*/
    .title_center .page_title:before {left: -370px;}
    .title_center .page_title:after {right: -370px;}
    .title_center .page_title:before,
    .title_center .page_title:after {width: 370px;}
    
    .title_center .page_title {font-size: 30px; line-height: 30px;}
    
    /*Homepage*/
    .bottom_gallery .watch_item .inner_link .inner_img img {max-width: 150px;}
    .bottom_gallery .watch_item .inner_link .inner_title {font-size: 12px; line-height: 12px;}
    
    .bottom_gallery .owl-prev ,.bottom_gallery .owl-next,
    .small_thumbnail .owl-prev ,.small_thumbnail .owl-next {display: none !important;}
    
    /*Product page*/
    .archive_banner {background:none !important; height: auto;}
    .archive_banner img {visibility: visible;}
    
    
    .main_content ul.watch_list li .inner_item {width: 100%; height: 230px;}
    .main_content ul.watch_list li .inner_link_newest {min-height: 60px;}
    
    .single_watch_thumb #top span {width: 380px; height: 464px;}
    .single_watch_thumb #top img {max-width: 380px;}
    
    #bottom .bottom_list_gallery .owl-item a {width: 68px; height: 68px;}
    #bottom .bottom_list_gallery .owl-item a img {max-width: 68px;}
}

@media only screen and (min-width: 960px) and (max-width: 1024px) {
    .topsearch input.search_txt {font-size: 15px; width: 187px;}
}

/* #Tablet (Portrait)
================================================== */
    /* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    /*Inner page - Title*/
    .title_center .page_title:before {left: -170px;}
    .title_center .page_title:after {right: -170px;}
    .title_center .page_title:before,
    .title_center .page_title:after {width: 170px;}
    
    .title_center .page_title {font-size: 25px; line-height: 25px;}   
    
    /*Homepage*/
    .bottom_gallery .watch_item .inner_link .inner_img {height: 180px;}
    .bottom_gallery .watch_item .inner_link .inner_title {font-size: 12px; line-height: 12px; margin-top: 20px;}
    
    .bottom_gallery .owl-prev ,.bottom_gallery .owl-next,
    .small_thumbnail .owl-prev ,.small_thumbnail .owl-next {display: none !important;}
    
    /*Product page*/
    .archive_banner {background:none !important; height: auto;}
    .archive_banner img {visibility: visible;}
    
    .main_content ul.watch_list li {width: 33.333%;}
    .main_content ul.watch_list li .inner_item {width: 100%; height: 230px;}
    
    .single_watch_thumb #top span {width: 295px; height: 361px;}
    .single_watch_thumb #top img {max-width: 295px;}
    
    #bottom .bottom_list_gallery .owl-item a {width: 60px; height: 60px;}
    #bottom .bottom_list_gallery .owl-item a img {max-width: 60px;}
    
    .bottom_related_content h3:after {width: 540px; right: -540px;}
}

/*  #Mobile (Portrait)
================================================== */
    /* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
    body {background-size:cover;}

    /*Inner page - Title*/
    .title_center .page_title:before {left: -20px;}
    .title_center .page_title:after {right: -20px;}
    .title_center .page_title:before,
    .title_center .page_title:after {display: none;}
    .title_center {text-align: left; margin: 0;}
    .title_center .page_title,
    .main_content .home_cat_title {font-size: 22px; line-height: 30px; padding: 0;}
    
    /*Inner page - Editor styling*/
    .mceContentBody h2, .main_content h2 {font-size: 20px; line-height: 28px;}
    .mceContentBody h3, .main_content h3 {font-size: 18px; line-height: 26px;}
    
    .text_size25 {font-size: 20px; line-height: 28px;}
    
    /*Inner page - Visual Composer*/
    .mceContentBody img[class*="wp-image-"], .main_content img[class*="wp-image-"] {max-width: 80%; margin: auto; display: block; padding-bottom: 20px;}
    
    /*Banner*/
    .meyersbox .banner_text {}
    
    /*Homepage*/
    .meyersbox .banner_text:before {display: none;}
    .meyersbox .banner_text p {font-size: 7px !important; line-height: 10px !important;}    

    .bottom_gallery.owl-carousel .owl-item {}
    .bottom_gallery .watch_item .inner_link .inner_img {height: 150px;}
    .bottom_gallery .watch_item .inner_link .inner_img img {max-width: 150px;}
    .bottom_gallery .watch_item .inner_link .inner_title {font-size: 12px; line-height: 12px; margin-top: 20px;}
    .bottom_gallery .watch_item .inner_link .inner_img .inner_btn {font-size: 12px; margin-left: -70px;}
    
    .bottom_gallery .watch_item .inner_link .inner_img .inner_btn {margin-left: -66px;}
    
    /*Product page*/
    .archive_banner {background:none !important; height: auto;}
    .archive_banner img {visibility: visible;}
    
    .main_content ul.watch_list li {width: 50%;}
    .main_content ul.watch_list li .inner_item {width: 100%; height: 130px; margin:0;}
    .main_content ul.watch_list li .inner_item img {max-width: 120px;}
    .main_content ul.watch_list li .inner_link_newest {margin:20px 0 0 0; font-size: 12px; line-height: 17px;}
    
    .single_watch_thumb,
    .inner_page_content.haft_content {width: 100%; float: none;}
    .inner_page_content.haft_content {padding-bottom: 0;}
    .inner_page_content.haft_content #bottom {position: relative; bottom: auto; left: auto; margin: 20px 0 20px 0;}
    
    .single_watch_thumb #top span {width: 300px; height: 367px;}
    .single_watch_thumb #top img {max-width: 300px;}
    
    #bottom .bottom_list_gallery .owl-item a {width: 60px; height: 60px;}
    #bottom .bottom_list_gallery .owl-item a img {max-width: 60px;}    
    
    .bottom_gallery .owl-prev, .small_thumbnail .owl-prev {left: 0;}
    .bottom_gallery .owl-next, .small_thumbnail .owl-next {right: 0;}

}

 /* #Mobile (Landscape)
================================================== */
    /* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    /*Header languages + search*/
    .top_right {width: 420px;}
    .top_search {width: 360px;}
    .topsearch input[type="text"] {width: 349px;}
    
    /*Inner page - Visual Composer*/
    .mceContentBody img[class*="wp-image-"], .main_content img[class*="wp-image-"] {max-width: 50%;}
    
    /*Homepage*/
    .bottom_gallery .watch_item .inner_link .inner_img img {max-width: 135px;}
    
    /*Product page*/
    .single_watch_thumb #top span {width: 420px; height: 513px;}
    .single_watch_thumb #top img {max-width: 420px;}
    
    #bottom .bottom_list_gallery .owl-item a {width: 100px; height: 100px;}
    #bottom .bottom_list_gallery .owl-item a img {max-width: 100px;}

}