/*
 Theme Name:   Garment Graphics Online
 Theme URI:    http://garmentgraphicsonline.info
 Description:  A custom theme for made for Garment Graphics Online
 Author:       Formative Web Solutions
 Author URI:   http://formativewebsolutions.com
 Template:     mystile
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/


@import url("../mystile/style.css");
@import url("css/garmentslider.css");


/* =Theme customization starts here
-------------------------------------------------------------- */
@media only screen and (max-width: 1100px){
  nav#navigation.col-full.parent{
    margin-bottom: -29px;
  }
  ul#main-nav.nav.fr.parent{ 
  font-size: 120% !important;   
  }
}

@media only screen and (max-width: 1024px){
   #logo img{
    width: 96%;
  }
  ul#main-nav.nav.fr.parent{
    bottom: 5% !important;
  }

  body.home section#main{
    padding: 0;
  }

  div.breadcrumb-trail, section#main, #main, article#contact-page{
    padding-left: 2%;
  }

  section#main, #main{
  width: 74.2%;
  }

  .layout-full #main{
    width: 98% !important;
    padding: 0 1% !important;
  }

  body .entry img {
    border-radius: 0;
  }

  .hompage-img{
    width: 98%;
  }

  #sidebar{
    margin-top: -3%;
  }
  div.footer-wrap{
    top: 40px;
    position: relative;
  }
}
@media only screen and (max-width: 900px){
  ul#main-nav.nav.fr.parent{
  left: 15% !important; 
  }

  .phone h3{
    font-size: 160% !important;
  }
  .phone img{
    margin: 0 0 0 5%;
  }
}

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

.images .thumbnails{
    top: 41% !important;
  }
}

@media only screen and (max-width: 800px) {
  div.social-icons{
    display: none;
  }

  #wrapper .garmentslider {
  width: 100% !important;
  height: 365px !important;
  }
  #wrapper ul.slides h1{
    font-size: 42px;
    padding-left: 2%;
  }
  #wrapper ul.slides h3{
    font-size: 25px;
  }
  #wrapper ul.slides input.btn{
    font-size: 26px;
    padding: 0 15px !important;
    margin: 0px;
  }
  #wrapper ul.slides .one-half{
  width: 47.9166666666% !important; /* 552px / 1152px */
  float: left !important;
  margin-left: 4.166666666% !important;
  }
  #wrapper ul.slides .first {
  margin-left: 0 !important;
  }
  .ms-bullets.ms-dir-h{
    display: none;
  }

  .phone h3 a{
    top: -7px;
    position: relative;
  }
  #footer #credit img{
    width: 40%;
  }

  .widget h3{
    width: 98%;
  }
}

@media only screen and (max-width: 599px) {
  .five-sixths,
  .four-fifths,
  .four-sixths,
  .one-fifth,
  .one-fourth,
  .one-half,
  .one-sixth,
  .one-third,
  .three-fifths,
  .three-fourths,
  .three-sixths,
  .two-fifths,
  .two-fourths,
  .two-sixths,
  .two-thirds,
  .offset-by-one {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
  }
  .garmentslider{
    width: 100% !important;
    height: 300px !important;
  }
}


@media only screen and (min-width: 769px) {
  #header{
    height: 160px;
  }
}

@media only screen and (max-width : 767px){
  #header{
    margin-bottom: 6% !important;
  }

  section#main, #main{
    width: 98% !important;
  }

   section#main, #main, article#contact-page{
    padding: 1% !important;
  }
  body .entry img {
  width: 98% !important;
  margin: 0 auto;
  }

  .thumbnails {
  position: relative !important;
  left: initial !important;
  margin-top: 3%;
  float: right !important;
  }

  .images .thumbnails a {
  width: 65% !important;
  }

  form.variations_form.cart {
  top: 58% !important;
  }

  a.woo-sc-button.small {
  position: absolute;
  right: 0;
  }

  .threecol-one.last {
  margin-top: 10px;
  margin-bottom: 20%
  }

  .single-product .summary .product_meta {

  }

  #sidebar{
    border-top: 2px solid #B2B2B1 !important;
    margin-top: 5% !important;
    padding-left: 2%;
  }
  div.primary{
   margin-top: 4%;
  }

  footer#footer {
  margin-top: 4%;
  text-align: center;
  font-size: 195%;
  }
  .footer-wrap{
    border: none !important;
  }

  .footer-wrap .widget h3{
  color: #ff3300 !important;
  }

  section#footer-widgets .block{
    width: 100% !important;
  }

  .widget ul{
  font-size: 160% !important;
  text-align: center;
  margin-left: -2.5% !important;
  width: 98%;
  }
  .widget_shopping_cart_content{
    width: 88% !important;
  }
  p.buttons, p.total{
    text-align: center !important;
  }
  dl.variation {
  float: right;
  }

  div#woo_search-4{
    text-align: center;
  }

  .textwidget .phone h3{
  font-size: 300% !important;
  position: relative;
  top: 8px;
  }
  footer div#credit {
  width: 100%;
  margin-bottom: 20%;
  }
  footer div#credit img{
    width: 20% !important;
  }
}
@media only screen and (max-width : 699px) {
  .col-full .parent ul#main-nav.nav.fr.parent {
  font-size: 100% !important;
  }

}

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

  /* 1. GLOBAL DROPDOWN STYLES (these are purely for the dropdown layout and you should only edit the width of the dropdowns) */
  ul.nav {
    position: relative;
    margin-bottom: 0;
    /* LEVEL 2 */
    /* LEVEL 3 */
  }
  ul.nav li {
    position: relative;
    float: left;
    zoom: 1;
    list-style: none;
  }
  ul.nav li a {
    display: block;
    padding: .53em 1em;
  }
  ul.nav ul {
    width: 15.379em;
    visibility: hidden;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    margin: 0;
  }
  ul.nav ul li {
    float: none;
  }
  ul.nav ul li a {
    width: 100%;
    display: inline-block;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
  }
  ul.nav ul ul {
    left: 100%;
    top: 0;
  }
  ul.nav li:hover > ul {
    visibility: visible;
    display: block;
  }
/* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */
  #header #navigation {
    display: block !important;
    margin-top: .382em;
  }
  #header #navigation ul.nav {
    float: right;
    /* LEVEL 2 */
    /* LEVEL 3 */
  }
  #header #navigation ul.nav > li a {
    border: 1px solid #fcfcfc;
    background: #fcfcfc;
    font-weight: bold;
    position: relative;
    -webkit-border-radius: 0.236em;
    border-radius: 0.236em;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #header #navigation ul.nav > li a:hover {
    border-color: #000;
    background: #000;
  }
  #header #navigation ul.nav > li:hover a {
    border-color: #000;
    background: #000;
  }
  #header #navigation ul.nav > li.current-menu-item > a,
  #header #navigation ul.nav > li.current_page_item > a {
    color: #ff4800;
  }
  #header #navigation ul.nav > li.parent a {
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #header #navigation ul.nav > li.parent a:after {
    font-family: 'WebSymbolsRegular';
    display: inline-block;
    font-size: .857em;
    margin-left: .618em;
    content: ";";
    color: #e3dad7;
    font-weight: normal;
  }
  #header #navigation ul.nav > li.parent a:hover:before {
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: #000;
    z-index: 99999;
  }
  #header #navigation ul.nav > li.parent:hover a:before {
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: #000;
    z-index: 99999;
  }
  #header #navigation ul.nav > li.parent:hover a:after {
    color: #ff4800;
  }
  #header #navigation ul.nav > li.parent ul li a:after {
    visibility: hidden;
  }
  #header #navigation ul.nav > li.parent ul li.parent a:after {
    visibility: visible;
    content: "]";
    float: right;
  }
  #header #navigation ul.nav > li.parent ul li.parent ul li a:after {
    visibility: hidden;
  }
  #header #navigation ul.nav > li.parent ul li.parent ul li.parent a:after {
    visibility: visible;
    content: "]";
  }
  #header #navigation ul.nav > li.parent ul li.parent ul li.parent ul li a:after {
    visibility: hidden;
  }
  #header #navigation ul.nav ul {
    border: 1px solid #000;
    margin-top: -1px;
    padding: .372em 0;
    box-shadow: 0 0.202em 0 0 rgba(232, 228, 227, 0.4);
    -webkit-box-shadow: 0 0.202em 0 0 rgba(232, 228, 227, 0.4);
    background: #000;
  }
  #header #navigation ul.nav ul li a {
    border: 0;
    background: #000;
  }
  #header #navigation ul.nav ul ul {
    left: 100%;
    top: -0.372em;
  }
  h3.nav-toggle {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
   body #header #navigation ul.nav{
    right: 0 !important;
    position: relative !important;
    left: 0 !important;
    margin-top: 0 !important;
  }
  h3.nav-toggle{
  top: 4.9em !important;
  }
  #wrapper .garmentslider {
  width: 100% !important;
  height: 235px !important;
  }
  div#garment-home-slider.garmentslider ul.slides h1{
    font-size: 20px;
  }
  div#garment-home-slider.garmentslider ul.slides h3{
    font-size: 16px;
  }
  div#garment-home-slider.garmentslider ul.slides input.btn{
    font-size: 16px;
    padding: 0 15px !important;
    margin: 0px;
  }
  div#garment-home-slider.garmentslider ul.slides .one-half{
  width: 47.9166666666% !important; /* 552px / 1152px */
  float: left !important;
  margin-left: 4.166666666% !important;
  }
  div#garment-home-slider.garmentslider ul.slides .first {
  margin-left: 0 !important;
  }
  body form.variations_form.cart {
  top: 57% !important;
  }
  .images .thumbnails {
  top: 35% !important;
  position: absolute !important;
  right: 0;
  width: 15% !important;
  }
  body .woo-sc-hr {
  margin-top: 12% !important;
  }
}

@media only screen and (max-width: 570px) {
  h3.nav-toggle{
  top: 4.6em !important;
  }
}

@media only screen and (max-width: 530px) {
  h3.nav-toggle{
  top: 4.2em !important;
  }
  body .images .thumbnails {
  top: 35.5% !important;
  }
}

@media only screen and (max-width: 505px) {
  body form.variations_form.cart {
  top: 58% !important;
  }
}

@media only screen and (max-width: 490px) {
  h3.nav-toggle{
  top: 4em !important;
  }
  body .images .thumbnails {
  top: 34% !important;
  }
}

@media only screen and (max-width: 474px){
  body form.variations_form.cart {
  top: 58.5% !important;
  }
} 

@media only screen and (max-width: 420px) {
  
  #header h3.nav-toggle{
  top: 3.8em !important;
  }
  
  body .top-info{
    font-size: 200%;
  }

  h1.product_title.entry-title {
  position: relative;
  bottom: 20px;
  text-align: center;
  }

  p.price {
  text-align: center;
  margin-top: -30px;
  margin-bottom: 50px !important;
  }

  body .images .thumbnails {
  top: 31% !important;
  width: 23% !important;
  }

  .threecol-two p {
  width: 98%;
  padding-left: 2%;
  }

  .threecol-one.last {
  margin-top: 15px;
  }

  body form.variations_form.cart {
  top: 57% !important;
  }


  .single-product .summary .product_meta, .related.products {
  text-align: center;
  }

  div.primary{
   margin-top: 6%;
  }

  #footer-widgets .block, #sidebar{
    padding-left: 2%;
  }
  #footer {
  border-top: none;
  padding: 0;
  margin-left: 15%;
  }

  #footer #credit img {
  width: 30%;
  }

  div#credit {
  margin-bottom: 10%;
  }
}
@media only screen and (max-width: 400px){
  body h3.nav-toggle{
  top: 2.8em !important;
  }
  body .top-info{
    font-size: 180%;
  }
  body ul.products li.product {
  margin-right: 1.5% !important;
  margin-left: 0%;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ 
  .images .thumbnails {
  left: 0 !important;
  float: none !important;
  width: initial !important;
  margin-top: 3%;
  }
}




/* 04f - Column Classes ----------- */

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 4.166666666%; /* 48px / 1152px */
}

.one-half,
.three-sixths,
.two-fourths {
  width: 47.9166666666%; /* 552px / 1152px */
}

.one-third,
.two-sixths {
  width: 30.555555555%; /* 352px / 1152px */
}

.four-sixths,
.two-thirds {
  width: 65.277777777%; /* 752px / 1152px */
}

.one-fourth {
  width: 21.875%; /* 252px / 1152px */
}

.three-fourths {
  width: 73.958333333%; /* 852px / 1152px */
}

.one-fifth {
  width: 16.666666666%; /* 192px / 1152px */
}

.two-fifths {
  width: 37.5%; /* 432px / 1152px */
}

.three-fifths {
  width: 58.333333333%; /* 672px / 1152px */
}

.four-fifths {
  width: 79.166666666%; /* 912px / 1152px */
}

.one-sixth {
  width: 13.194444444%; /* 152px / 1152px */
}

.five-sixths {
  width: 82.638888888%; /* 952px / 1152px */
}

.first {
  margin-left: 0;
}

.last {
width: 25.555555555%;
}




body{
  background: #fffefe;
  color: #555860;;
  padding: 0 !important;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

div.breadcrumb-trail{
  margin-top: 3%;
  margin-bottom: -3%
}

hr {
  background-color: #B2B2B1;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin: 0;
}

a {
  color: #555860;
}

a:hover {
  color: #ff3300;
}

h1, h2, h3, h4, h5, h6{
  color: #ff3300;
}

a.button, a.comment-reply-link, #commentform #submit, .submit, input[type=submit], input.button, button.button, a.button:hover, a.comment-reply-link:hover, #commentform #submit:hover, .submit:hover, input[type=submit]:hover, input.button:hover, button.button:hover {
text-decoration: none;
background-color: #ff3300 !important;
border: none;
box-shadow: none;
-webkit-box-shadow: none;
text-shadow: 0 1px 0 #000000 !important;
webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

#header #navigation ul.nav {
  margin-top: -4% !important;
  right: 7%;
  position: relative;
}

.top-info{
  text-align: center;
  color: #ff3300;
  margin: 2% 0;
  font-size: 250%;
}

.freeship{
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
}

.hompage-img{
  margin: 4% auto;
}

ul#main-nav li{

}

#navigation ul#main-nav ul{
  border: 0px solid #292929 !important;
  padding: 0px !important;
}

#header #navigation ul.nav > li.parent:hover a:before{
  background-color: #292929 !important;
}

ul#main-nav ul.sub-menu li{
  background: #000000;
  margin-right: 0%;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px 0px 0px 0px;
  border-radius: 0px 0px 0px 0px; 
  font-size: 70%;
}

ul.products li.product a:hover h3{
  color: #ff3300;
}

form.searchform input{
  margin-bottom: 4%;
}

#top {
  background: #000000 !important;
  color: #fffefe;
  margin: 0 !important;
}

#header{
  background-color: #000000;
  max-width: 100%;
  margin-bottom: .2em;
  border-bottom:none;
  padding-bottom: 8.4% !important;
}

#header hgroup{
  float: none !important;
}

#header #logo{
  float: none !important;
}

#logo img{
display: block; 
margin-right: auto;
margin-left: auto;
}

#navigation{
  background-image: none;
  border: none;
  background-image: none;
  border: none;
  border-radius: 0;
  margin-top: -1%;
}

#header #navigation{
  float: none !important;
  background: #000000;
}

#header #navigation ul.nav{
font-size: 1.5em;
margin-top: -8%;
}

#header #navigation ul.nav > li a{
  background:none !important;
  border: none !important;
  color: #fffefe !important;
}

#header #navigation ul.nav > li a:hover{
  color: #ff3300 !important;
}

#header #navigation ul.nav > li.current-menu-item > a, #header #navigation ul.nav > li.current_page_item > a{
  color: #ff3300 !important;
}

#header .nav-toggle{
  top: 2.2em;
right: .3em;
background-color: ##ff3300 !important;
border: 0em solid ##ff3300;
background-image: none;
-webkit-box-shadow: inset 0 0px 0 rgba(0, 127, 197, 0.4), inset 0 0px 0 ##ff3300 ;
-moz-box-shadow: inset 0 0px 0 rgba(0, 127, 197, 0.4), inset 0 0px 0 ##ff3300 ;
}

div#wrapper{
  margin-top: -2%;
}

#footer-widgets ul, .widget{
  font-size: 82%;
}

.widget h3{
  font-weight: bolder;
  color: #ff3300;
  border: none;
  border-width: 0;
  padding: 0;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 1px 3px rgba(0, 0, 0, .85);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 1px 3px rgba(0, 0, 0, .85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 1px 3px rgba(0, 0, 0, .85);
  background-image: -moz-linear-gradient(50% 0, rgba(255, 255, 255, .1), rgba(0, 0, 0, .25) 100%);
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, from(rgba(255, 255, 255, .1)), to(rgba(0, 0, 0, .25)));
  height: 36px;
  line-height: 36px;
  text-align: center;
  width: 98%;
}

a.woo-sc-button.small {
  padding: 4px 8px !important;
  font-size: 0.7em !important;
  float: left !important;
  margin: 0% 0 0% 0 !important;
}

.shortcode-pinterest.fr {
width: 43px;
}

.threecol-two p span {
  color: inherit !important;
}

#sidebar{

}

.post, .type-page{
  margin-bottom: 0 !important;
}

.home #breadcrumbs{
  display: none;
}

ul.products {
  margin-top: 2%;
}


 
.entry ul.products li.product img{
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
}


.entry img {
width: 100% !important;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
padding: 0 !important;
}

.hompage-img img {
border-radius: 2em;
}

.post img, .type-page img{
  border: 0;
}

.freeship{
  border-radius: 0px !important;
}

.page-info{
  color: #ff3300;
  font-size: 145%;
  text-align: center;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin: 4% 0 1% 0;
}

mark.count{
  display: none;
}

.images .thumbnails{
  border: 0;
  position: relative;
  left: 185%;
  float: left;
  width: 90px;
  top: 2%;
}

.images .thumbnails a.zoom.first{

}

.images .thumbnails a{
  border-right: 0;
  float: left;
  width: 70px;
  margin-bottom: 6%;
}

.images .thumbnails a:last-child{

}
.images .thumbnails a img{
  opacity: 1;
  filter: alpha(opacity=@opacity * 100);
  border-radius: 80px;
  padding: 0;
}

form.variations_form.cart {
  position: absolute;
  left: 0;
  top: 41%;
}

table.variations td{
  border-bottom: 0;
}

a.reset_variations {
  position: absolute;
  right: 3%;
  margin-top: 8%;
}

.variations_button {
  position: relative;
  top: 10px;
}
button.single_add_to_cart_button.button.alt {
margin-bottom: 14px;
}
/*=======Contact Page========*/

#cpshop, #user, #ship, #guarantee ul, ol{
  list-style-position: inside;
}

form#contactForm {
  height: 700px;
  width: 98%;
}


/*==========footer============*/
.footer-wrap{
  background: #fffefe !important;
  color: #555860;
  margin:0 !important;
  border-top: 2px solid #B2B2B1;
  padding: 0 2% !important;
}

#footer-widgets{
  padding: 2% 0 0 0;
  border: none;
}

#footer-widgets .block{
  width: 24% !important;
  margin-right: 1% !important;
}


#footer {
    border-top: none;
    padding: 0;
}

.footer-wrap .widget h3{
  color: #555860;
}

.widget_shopping_cart_content {
  width: 78%;
}

div#credit {
width: 23%;
}

.powered{
  color: ##ff3300;
}

#footer-widgets ul {
  color:#000000;
}

#footer-widgets ul li{
  margin-left: 1%;
}

.phone img{
float: left;
width: 12%;
margin: 1% 0% 0 13%;
}

.phone h3{
-moz-border-radius: none;
-webkit-border-radius: none;
border-radius: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
background-image: none;
background-image: none;
font-size: 230%;
}


/*-----------Slider------------*/

#border {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 1px 3px rgba(0, 0, 0, .85);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 1px 3px rgba(0, 0, 0, .85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 1px 3px rgba(0, 0, 0, .85);
  background-image: -moz-linear-gradient(50% 0, rgba(255, 255, 255, .1), rgba(0, 0, 0, .25) 100%);
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, from(rgba(255, 255, 255, .1)), to(rgba(0, 0, 0, .25)));
  height: 36px;
  line-height: 36px;
  text-align: center;
  width: 98%;
  margin: 0 auto;
}