/* make sidebar nav vertical */ 

@media (min-width: 768px){

  .affix-content .container {

    width: 700px;

  }   



  

    .affix-content .container .page-header{

    margin-top: 0;

  }

  .sidebar-nav{

        position:fixed; 

        width:100%;

  }

  .affix-sidebar{

    padding-right:0; 

    font-size:small;

    padding-left: 0;

  }  

  .affix-row, .affix-container, .affix-content{

    height: 100%;

    margin-left: 0;

    margin-right: 0;    

  } 

  .affix-content{

    background-color:white; 

  } 

  .sidebar-nav .navbar .navbar-collapse {

    padding: 0;

    max-height: none;

  }

  .sidebar-nav .navbar{

    border-radius:0; 

    margin-bottom:0; 

    border:0;

  }

  .sidebar-nav .navbar ul {

    float: none;

    display: block;

  }

  .sidebar-nav .navbar li {

    float: none;

    display: block;

  }

  .sidebar-nav .navbar li a {

    padding-top: 12px;

    padding-bottom: 12px;

	padding-right:91%;

  }  

}



@media (min-width: 769px){

  .affix-content .container {

    width: 600px;

  }

    .affix-content .container .page-header{

    margin-top: 0;

  }  

}



@media (min-width: 992px){

  .affix-content .container {

  width: 900px;

  }

    .affix-content .container .page-header{

    margin-top: 0;

  }

}



@media (min-width: 1220px){

  .affix-row{

    overflow: hidden;

  }



  .affix-content{

    overflow: auto;

  }



  .affix-content .container {

    width: 1000px;

  }



  .affix-content .container .page-header{

    margin-top: 0;

  }

  .affix-content{

    padding-right: 30px;

    padding-left: 30px;

  }  

  .affix-title{

    border-bottom: 1px solid #ecf0f1; 

    padding-bottom:10px;

  }

  .navbar-nav {

    margin: 0;

  }

  .navbar-collapse{

    padding: 0;

  }

  .sidebar-nav .navbar li a:hover {

    background-color: #428bca;

    color: white;

  }

  .sidebar-nav .navbar li a > .caret {

    margin-top: 8px;

  }  

}



.navbar-default .navbar-nav > li > a {



    color: #0879c9 !important;



}

.img_border

{

border:#000000 solid 1px;

text-align:center;

}

.text_style

{

font-size:14px;

font-weight:bold;

color:#0879c9;

text-align:center;

}

.btn_product

{

padding:5px;

text-align:center;

background:#0879c9;



}

.btn_product a

{

color:#FFFFFF;

font-weight:bold;

text-decoration:none;

}

.btn_product a:hover

{

color:#FFFFFF;

font-weight:bold;

text-decoration:none;

}









.row { display:flex; flex-wrap: wrap }

.header { margin-top:2em; }

.menu { text-align:right; }

#mainmenu { margin:0; }

#mainmenu .btn-link { font-weight:bold; color:grey; text-decoration:none; }

#mainmenu .btn-link:hover { color: #369;  }

#mainmenu .btn-link.active { color: #369;  }

.submenu { border-top:2px solid #369; display:none; }

.submenu .btn-link,.submenu .btn-link a { font-weight:bold; color:grey; text-decoration:none; }

.submenu a .btn-link:hover { color: #369;  }

.submenu a .btn-link.active { color: #369;  }



.product-display { padding-left:0; display:flex; flex-wrap:wrap; }

#product-image { width:100%; }





#product-logo { position:absolute; border:1px black #333; }

#product-logo img { max-height:100%; max-width:100%; }

.product-data .brand-logo { height:1em; }



.product-options h4 { display:inline-block; margin-top:0; }

.product-options h4 + span { float:right; cursor:pointer; }

.product-options h4 + span:hover { color:#369; }

#colors ul,#sizes ul { margin:0; padding:0; }

#colors li { display:inline-block; margin:0.25em; height:2em; width:2em; border-radius:1em; color:#fff }

#colors li span { top:.375em;left:.5em; }

#sizes li { display:inline-block; margin:0.25em; height:2em; width:2em; border-radius:1em; border:solid 2px #999; color:#999; font-weight:bold; text-align:center; line-height:175%; text-transform:uppercase; cursor:pointer;}

#colors li.active { border:solid 2p #eee; box-shadow: 0 0 0 3px #ace; }

#sizes li.active { background: #369; color:white; border-color:#369; }

#logo-display { margin:0 0 1em; padding:1em; }

.logo { display:block; margin:0 auto;}

#text-display { display:block; margin:0.25em; font-size:1.5em; font-family:sans-serif; text-align:center; font-weight:bold;  color:black}

#text-preview-sans { font:bold 1.25em sans-serif; }

#text-preview-serif { font:bold 1.25em serif; margin: 0 0 0 .25em}

#text-preview-italic { font:bold italic 1.25em serif; margin: 0 0 0 .25em }

#text-preview-color { background-color:white; border: solid 1px buttonface; margin: 0 0 0 .25em }

.price { color:#369; }

.price sup { font-size:55%; }



.btn.add { height:1em;width:1em; line-height:.5em; font-size:5em; border-radius:100%; transition:all .3s; transition-timing-function:cubic-bezier(0,.25,.25,3); }



/* .btn.add:hover { box-shadow:0 0 0 .025em #eee, 0 0 0 .1em #f00 }

 */

.modal .logo { padding:1em 0; -webkit-filter: drop-shadow( 3px 3px 3px #ccc ); }

.modal .logo.white path { fill:white; ); }



.modal table th { text-align:center; }

.modal table td { padding:.25em; }



@media(max-width:768px) {

  .header .row:first-child { text-align:center; }

}





.zoom-btn { position:absolute; height:2em; width:2em; border:solid 2px #999; padding:.375em; border-radius:100%; line-height:1em; color:#999; z-index:5; }

.zoom-btn.active { background:#999; color:#fff; }

.zoom-view {display:none; position:absolute; height:12em; width:12em; border:solid 2px #999; border-radius:100%; overflow:hiden; z-index:2; }

.zoom-view img { position:absolute; }

.activeZoom { overflow:hidden; }



#zoom-logo { position:absolute; top:0;left:0; border:1px black #333; z-index:2; }

#zoom-logo img { max-height:100%; max-width:100%; z-index:2; }



.navbar-default

{

background:none !important;

}

.heading_text h3

{

color:#0879c9;

font-size:18px;

background:#666666;

padding:10px;

}

.pro_txt

{

color:#0879c9;

font-size:30px;

text-align:center;



}

.pro_txt2

{

color:#0879c9;

font-size:14px;

text-align:center;

margin-bottom:4%;



}



.hot_product

{

background:#0879c9;

color:#FFFFFF;

font-size:14px;

padding:2%;

text-align:center;

font-weight:bold;

margin-top:10%;

margin-bottom:7%;

}



.box_border

{

border:#000000 solid 1px;

margin:2% 0 2% 0;

}





.navbar

{

min-height:0px;

margin-bottom:0px!important;

}

.txt_colr

{

color:#000000;

}



/*======================content tab =================*/



.tabs {

  max-width: 900px;

  margin: 0 auto;

  padding: 0 20px;

}

#tab-button {

  display: table;

  table-layout: fixed;

  width: 100%;

  margin: 0;

  padding: 0;

  list-style: none;

}

#tab-button li {

  display: table-cell;

  width: 20%;

}

#tab-button li a {

  display: block;

  padding: 0em;

  background: #eee;

  border: 1px solid #ddd;

  text-align: center;

  color: #000;

  text-decoration: none;

}

#tab-button li:not(:first-child) a {

  border-left: none;

}

#tab-button li a:hover,

#tab-button .is-active a {

  border-bottom-color: transparent;

  background: #fff;

}

.tab-contents {

  padding: .5em 2em 1em;

  border: 1px solid #ddd;

}







.tab-button-outer {

  display: none;

}

.tab-contents {

  margin-top: 20px;

}

@media screen and (min-width: 768px) {

  .tab-button-outer {

    position: relative;

    z-index: 2;

    display: block;

  }

  .tab-select-outer {

    display: none;

  }

  .tab-contents {

    position: relative;

    top: -1px;

    margin-top: 0;

  }

}



/*======================content tab =================*/

.margin_top

{

margin-top:3%;

}

.border

{

border-bottom:#333333 1px solid;

margin-bottom:2%;

margin-top:2%;

text-align:center;

}

.image_style

{

margin:2% 2%;

border:#333333 solid 1px;

text-align:center;

}

dl, ol, ul {



    margin-top: 0;

    margin-bottom: 0rem!important;



}

.navbar-light .navbar-nav .nav-link {



    color:#000000!important;



}









/*============== about ==================gallery*/



.btn:focus, .btn:active, button:focus, button:active {

  outline: none !important;

  box-shadow: none !important;

}



#image-gallery .modal-footer{

  display: block;

}



.thumb{

  margin-top: 15px;

  margin-bottom: 15px;

}



/*============== about ==================gallery*/

/*============== Home ==================marquee*/
.marq
{
color:#F44336;
font-size:14px;
font-weight:bold;

}
.border_box
{
border:#CCCCCC solid 4px;
height:230px;
}
/*============== Home ==================marquee*/


/*============== Home ==================slider*/
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/*================================================*/
@import url('https://fonts.googleapis.com/css?family=Roboto');
.carousel-item > div {
  float: left;
}
.carousel-by-item [class*="cloneditem-"] {
  display: none;
}
/*============== Home ==================slider*/

.margin_top
{
margin-top:4%;
}
.ftr_color
{
background:#0879c9;
padding:2% 0 2% 0;
font-size:12px;
margin-top:.1%;
}
.ftr_color a
{
color:#FFFFFF;
}
.img_box
{
border:#666666 solid 1px;
padding:1%;
text-align:center;
margin-bottom:1%;
}
.txt_clr
{
text-align:justify;
color:#000000;
margin-bottom:2%;
}
.img-cen 
{
border:#FF0000 solid 0px;
float:left;
clear:both;
width:100%;
text-align:center;
}
.img-cen img
{
text-align:center;
width:100%;

}
.tech_bg
{
background:#000099;
width:100%;
}

.tech_img img
{
width:100%;
height:150px;
}








.contact-form{
    background: #fff;
    margin-top: 1%;
    margin-bottom: 5%;
    width: 100%;
}
.contact-form .form-control{
    border-radius:1rem;
}
.contact-image{
    text-align: center;
}
.contact-image img{
    border-radius: 6rem;
    width: 11%;
    margin-top: -3%;
    transform: rotate(29deg);
}
.contact-form form{
    padding: 8%;
	
}
.contact-form form .row{
    margin-bottom: -7%;
}
.contact-form h3{
    margin-bottom: 8%;
    margin-top: -10%;
    text-align: center;
    color: #0062cc;
}
.contact-form .btnContact {
    width: 50%;
    border: none;
    border-radius: 1rem;
    padding: 1.5%;
    background: #dc3545;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
.btnContactSubmit
{
    width: 50%;
    border-radius: 1rem;
    padding: 1.5%;
    color: #fff;
    background-color: #0062cc;
    border: none;
    cursor: pointer;
}