/*
 Project Name: Guia de medidas Digisoft
 Theme Name: Default
 Author: Digisoft E-commerce
 
 Sumary:
 [ 1 - Commons ]
 
*/


/*************************
 1- Commons
**************************/

.measurement-guide-box-lnk {display: block;}
.measurement-guide-box-lnk > a {background: transparent url(../img/measurement-guide/icon-hanger-product.svg) left center no-repeat; color: #999; display: inline-block; font-size: 11px; line-height: 14px; margin: 5px 0 0 0; padding: 0 0 0 32px;}

#measurement-guide-wrapper {background: transparent url(../img/measurement-guide/px-wrapper.png) 0px 0px repeat; height: 100%; left: 0px; position: fixed; opacity: 0; text-align: center; top: 0px; visibility: hidden; width: 100%; z-index: 99999;}
#measurement-guide-wrapper > .mg-box {background-color: #FFF; height: 530px; left: 50%; margin-left: -440px; margin-top: -265px; position: fixed; text-align: left; top: 50%; width: 880px;}
#measurement-guide-wrapper .mg-top-bar {border-bottom: 1px solid #e0e1e2; box-sizing: border-box; height: 56px; padding: 10px 20px;}
#measurement-guide-wrapper .mg-top-bar #close-mg-btn {background: transparent url(../img/measurement-guide/icon-close.svg) center center no-repeat; float: right; height: 14px; margin: 10px 0 0 0; width: 14px;}
#measurement-guide-wrapper .mg-top-bar #close-mg-btn:hover {cursor: pointer;}
#measurement-guide-wrapper .mg-top-bar h6 {/*background: transparent url(../img/measurement-guide/icon-hanger-box.svg) left center no-repeat;*/ float: left; font-weight: 600; padding: 6px 5px 6px 0px;}
#measurement-guide-wrapper .mg-box-content {padding: 20px;}
#measurement-guide-wrapper ul.body-info {list-style: none;}
#measurement-guide-wrapper ul.body-info > li {display: inline-block; vertical-align: top;}
#measurement-guide-wrapper ul > li.body-guide {background: #fff url(../img/measurement-guide/woman-guide.jpg) left center no-repeat; display: inline-block; height: 420px; width: 35%;}
#measurement-guide-wrapper ul > li.info-guide {width: 64%;}
#measurement-guide-wrapper ul > li.info-guide > h5 {width: 100%; text-align: center; margin: 50px 0 0 0; font-weight: 500; font-size: 14px;}
#measurement-guide-wrapper .title-table-mg {display: block; font-size: 14px; font-weight: 400; margin: 20px 0 5px 0;}
#measurement-guide-wrapper table {margin: 50px auto 50px;}
#measurement-guide-wrapper table thead td {font-weight: 400;}
#measurement-guide-wrapper table tr > td {border: 1px solid #e0e1e2; box-sizing: border-box; padding: 3px 10px; width: 74px; text-align: center;}
#measurement-guide-wrapper table tr > td:first-of-type {text-align: left;}
#measurement-guide-wrapper .info-change {text-align: center; margin: 30px 0 0 0;}
#measurement-guide-wrapper .info-change > span {background: transparent url(../img/measurement-guide/icon-change.svg) center 0px no-repeat; display: block; padding: 40px 0 4px 0; font-size: 14px; font-weight: 400; font-family: Open Sans, sans-serif;}

@media screen and (max-width: 900px) {
    #measurement-guide-wrapper > .mg-box {height: 95%; left: 2.5%; margin-left: 0; margin-top: 0; top: 2.5%; width: 95%;}
    #measurement-guide-wrapper ul > li.body-guide, #measurement-guide-wrapper ul > li.info-guide {display: block; width: 100%; max-height: 350px; background-size: contain;}
    #measurement-guide-wrapper ul > li.body-guide {background-position: center center;}
    #measurement-guide-wrapper .info-change {display: none;}
    #measurement-guide-wrapper ul > li.info-guide > h5  {margin: 20px auto;}
    #measurement-guide-wrapper table {margin: 20px auto;}
}

@media screen and (max-width: 600px) {
    #measurement-guide-wrapper table tr > td {width: auto;}    
}

@media screen and (max-width: 530px) {
    #measurement-guide-wrapper table tr > td {font-size: 11.5px;}    
    #measurement-guide-wrapper .info-change > p {font-size: 11.5px;}
}

@media screen and (max-width: 480px) {
    #measurement-guide-wrapper table tr > td {padding: 2px 3px;}    
}

@media screen and (max-width: 370px) {
    #measurement-guide-wrapper ul > li.info-guide > h5 {font-size: 12px;}
    #measurement-guide-wrapper table tr > td {padding: 2px 2px; font-size: 11px;}    
    #measurement-guide-wrapper .info-change > p {font-size: 11px;}
}

@media screen and (max-width: 340px) {
    #measurement-guide-wrapper .mg-box-content {padding: 20px 7px;}
    #measurement-guide-wrapper ul > li.info-guide > h5 {font-size: 11px;}
    #measurement-guide-wrapper table tr > td {padding: 2px 2px; font-size: 11px;}    
}