@charset "utf-8";
/* CSS Document */

@viewport {
   width: device-width;
   zoom:1;
}


@font-face {
    font-family: OpenSans;
    src: url(/font/OpenSans-Regular.ttf);
}
@font-face {
    font-family: OpenSans;
    src: url(/font/OpenSans-Bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: OpenSans;
    src: url(/font/OpenSans-Semibold.ttf);
    font-weight: 600;
}
* {
    box-sizing: border-box;
          -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
}


a{ color: #000000;
text-decoration: none;
outline: 0;
}
a:hover{color: #01BCB5;}


input[type=text] {
   box-sizing: border-box;
      -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
   
}
input[type=password] {
   box-sizing: border-box;
      -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
   
}


body { font-family: OpenSans; font-size: 14px; margin: 0; padding: 0;
   box-sizing: border-box;
      -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
}


.middle{
  float: left;
  width: 100%;
  min-height: 600px;
}

.top{
    float: left;
    width: 100%;
}

.top_r1{
    float: left;
    width: 100%;
}


.top_left{
    
    position: absolute;
}
.top_middle{
float: left;
width: 100%;
text-align: center;
margin-top: 10px;
}

  .top_mobile_logo{
  position: absolute;
        position: fixed;
  left: 0;
    top: 0px;
        width: 100%;
        z-index: 899;
        text-align: center;
        height: 45px;
        line-height: 45px;
        background-color: #fff;
  
  color:#000000; font-family: 'OpenSans', sans-serif; font-size:24px;
  }

.logolink{
  font-size: 15px;
}
.logolink_sp{
  color: #01BCB5
}

.top_right{
    position: absolute;
    right: 0px;
    top: 0px;
    

}


.top_right_0{
    float: left;
    font-size: 24px;
        margin-right: 15px;
    margin-top: 15px;
    cursor: pointer;
}

.top_right_1{
    float: left;
    width: 150px;
     margin-right: 30px;
    margin-top: 15px;
    border-bottom: 0px #000000 solid;
    line-height: 26px;
}

.top_right_2{
    float: left;
       font-size: 24px;
    margin-right: 20px;
    margin-top: 15px;
}
.top_right_3{
    float: left;
    font-size: 24px;
    margin-right: 60px;
    margin-top: 15px;
}

a.top_links{
    color: #000000;
}

a.top_links:hover{
    color: #01BCB5;
}


h2.top_r{
    font-size: 30px;
    color: #51545B;
    padding: 0;
    margin: 0;
}

.top_logo{
    color: #01BCB5;
}

.top_r2{
    float: left;
    width: 100%;

}

.topcart{
  position: relative;
    left: 15px;
    top: -40px;
display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #e60000;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  line-height: 22px;
  

}



.top_procurar{
  width: 100%;
  border: none;
  border-bottom: 1px #000000 solid;
  font-size: 16px;
  padding-left: 8px;
  padding-bottom: 4px;
  background-color: #ffffff;
  font-size: 14px;

}

.top_procurar:focus{

  border-bottom: 1px #000000 solid;
  
}

.top_livesearch{
  margin-top: 20px;
border: 1px #000000 solid;
display: none;
z-index: 800000;
background-color: #fff;
}


.up-arrow {
    display: inline-block;
    position: relative;
    border: 1px solid #777777;
    text-decoration: none;
    border-radius: 2px;
    padding: 5px;
    margin-top: 20px;
    background-color: #fff;
    display: none;
    background-color: #fff;
    z-index: 800000;
}
.up-arrow:before {
    content: '';
    display: block;  
    position: absolute;
    left: 65px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: black;
}

.up-arrow:after {
    content: '';
    display: block;  
    position: absolute;
    left: 66px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: white;
}



 /* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #fff;
  font-family: Arial;
  text-align: center;
   border-bottom: 1px #CCCCCC solid;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 
}

/* The dropdown container */
.dropdown {
 display: inline-block;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #000000;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  /*background-color: red;*/
  
}



.navbar a:hover, .dropdown:hover .top_pil {
  /*background-color: red;*/
  color: #01BCB5
}


/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  
  width: 100%;
  left: 0;
   border-bottom: 1px #CCCCCC solid;
   border-top: 1px #CCCCCC solid;
  z-index: 1000000;
  

}

/* Mega Menu header, if needed */
.dropdown-content  .hhsd{
  background: transparent;
 background-color: #ffffff;
  padding: 16px;
  color: white;
}

.header {
    background: transparent;
    height: 4px;
    }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 200px;
  padding: 5px;
  background-color: #fff;
  height: 270px;
    margin-left: 30px;
}

/* Style links inside the columns */
.column a {
  float: none;
  color: black;
  padding: 5px;
  padding-left: 0px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 14px;
  font-weight: normal;
  color: #999999;
  
}

/* Add a background color on hover */
.column a:hover {
  background-color: #fff;
  color: #000;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
} 

.top_co_rub{
    border-bottom: 1px #BDBDBD solid;
    width: 100%;
    margin-bottom: 5px;
    text-align: left;
    font-size: 13px;
    font-weight: normal;
}

h3.top_menu_h3{
  font-weight: normal;
}



.bottom{
  float: left;
  width: 100%;
  background-color: #F4F4F4;
  margin-top: 30px;
}

.bottom_r1{
  float: left;
  width: 100%;
  height: 10px;

}

.bottom_r2{

  width: 100%;
  max-width: 800px;
  margin: auto;

}


.bottom_r2_c1{
  float: left;
  width: 33%;

}


.bottom_r2_c1_b{
  
margin: auto;

width: 200px;
}

h4.bottom_inf{
 font-size: 15px;
  text-align: center;

}

ul.bottom_ul{
list-style: none;
}


.bottom_r3{
float: left;
  width: 100%;
text-align: center;
padding: 30px;


   box-sizing: border-box;
      -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;

}



a.bottom_a_s{

font-size: 28px;
margin: 10px;

  }



.top_mob{
  width: 100%;
  float: left;
  display: none;
}

  /* mobile menu */

.menu_frame_i{
  width: 100%;
  
  float: left;
  height: 45px;
    
    position: fixed;
    z-index: 900;
    background-color: #fff;
    background-color: transparent;
    
}


.menu_gnu1{
  
  
  float: left;
  font-size: 22px;
  margin-left: 15px;
  cursor: pointer;
    height: 45px;
    line-height: 45px;
}

.menu_gnu1:hover{
color:#01BCB5;
}

.menu_gnu2{
  
  float: left;
  font-size: 22px;
  margin-left: 30px;
  cursor: pointer;
        height: 45px;
    line-height: 45px;
}
.menu_gnu2:hover{
color:#01BCB5;
}


.menu_gnu3{
  
  
  float: right;
  font-size: 22px;
  margin-right: 15px;
  cursor: pointer;
    height: 45px;
    line-height: 45px;
}


.menu_gnu4{
  
  
  float: right;
  font-size: 22px;
  margin-right: 25px;
  cursor: pointer;
    height: 45px;
    line-height: 45px;
}




.under{
  width: 100%;
  float: left;
}


#menu_men{
  width: 90%;
  
  position: absolute;
    top:45px;
    left:0;
    display: none;
  border-bottom: 1px solid #dddddd;
  background-color: #fff;
    
    position: absolute; z-index: 700;
    position: fixed;
    
     overflow-y: scroll;
    height: 400px;
}





#menu_s{
  width: 100%;
  
  
    top:45px;
    left:0;
  background-color: #fff;
  
  display: none;
  border-bottom: 1px solid #dddddd;
    z-index: 700;
    position: fixed;
    height: 50px;
  
}



        .menu_s_b{ background-color: #F5F5F5;  margin: 1px;
      font-family: 'OpenSans', sans-serif;
      font-size: 14px;
      margin: 1px;
      line-height: 48px;
      float: left;
      width: 100%;
      
    }
    
    
.menu_s_b1{ 
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;

          }
          
.menu_s_b2{ 
          float: left;
      font-size: 28px;
      margin-left: 20px;
      margin-top: 7px;
      color:#f45294;
          }




    .menu_sbox{ background-color: #fff; border-top: 1px solid #DADADA; 
    height: 50px;
    float: left;
    width: 100%;
    cursor: pointer;

    }
    
        .menu_sbox_b{ background-color: #F5F5F5;  margin: 1px;
      font-family: 'OpenSans', sans-serif;
      font-size: 14px;
      margin: 1px;
      line-height: 48px;
      
    }
    
.menu_sbox_icon{ 
  color:#01BCB5; font-family: 'OpenSans', sans-serif; font-size:24px;
  margin-right: 10px;
  margin-left: 10px;
  font-weight: bold;
float: left;
width: 15px;

    }
    
    .menu_sbox_text{ 
float: left;
    }
    
    
        .menu_ubox{ 

width: 95%;
margin-left: auto; margin-right: auto;
    }
    
    
            .menu_ubox_rub{ 
float: left;
width: 100%;
font-family: 'OpenSans', sans-serif;
      font-size: 14px;
      font-weight: bold;
      padding-bottom: 5px;
      padding-top: 5px;
      color:#333333;
    }
                .menu_ubox_und{ 
float: left;
width: 100%;
border-top: 1px solid #DADADA;
padding-bottom: 5px;
      padding-top: 5px;

    }

  /* mobile end */


  /* Small devices (phones) */
       @media only screen and (max-width: 810px){
.top_r2{
  display: none;
}

.top_r1{
  display: none;
}

.top_mob{
  display: inline-block;
}



.top_right_0{
  display: none;
}
.top_right_1{
  display: none;
}

       }



  /* Small devices (phones) */
       @media only screen and (max-width: 767px){

.bottom_r2_c1{
   width: 100%;
}

.middle{
  min-height: 200px;
}




  
}


   @media only screen and (max-width: 380px){
  .top_mobile_logo{
    font-size: 15px;
    }
  }