/*/ Fabriser, S.A. de C.V. (www.fabriser.com)/*/


.contain                      {  width: 100%;
                                margin: 0 auto;
                                box-sizing: border-box; }

.column,
.columns                      {width: 100%;
                              float: left;
                              box-sizing: border-box;
                              padding: 0 40px }

@media (min-width: 400px) {
.contain                          {width: 100%;
                                  padding: 0; }
}


.logoc                          {width: 25%;
                                  float: left;
                                  box-sizing: border-box;
                                  padding: 0 10px}   






@media (min-width: 767px) {

  .contain                       { width: 100%; padding: 0 }
  .column,
  .columns {}
  .column:first-child,
  .columns:first-child            {margin-left: 0; }


  .logoc                         {width: 20%;} 
  .one.column,
  .one.columns                    { width: 8.33333333333%; }
  .two.columns                    { width: 16.6666666667%; }
  .three.columns                  { width: 25%;            }
  .four.columns                   { width: 33.3333333333%; }
  .five.columns                   { width: 41.6666666667%; }
  .six.columns                    { width: 50%;            }
  .seven.columns                  { width: 58.3333333333%; }
  .eight.columns                  { width: 66.6666666667%; }
  .nine.columns                   { width: 75%;          }
  .ten.columns                    { width: 83.3333333333%; }
  .eleven.columns                 { width: 91.6666666667%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }
}


body, section                    {margin: 0; padding: 0}

p, li, h1, h2, h3, h4, h5        {font-family: 'Arial'}        

p, li                            {font-size: 14pt;  }
h1                               {font-size: 50pt; margin-bottom: -30px;}
h3                               {font-size: 28pt;}

iframe                          {width: 100%;  height: 300px}

section                         {width: 100%; float: left;}

article                         {width: 80%; margin: auto;}

.b-black                        {background-color: #000;}
.b-yellow                         {background-color: #FFCD33;}
.b-gray                         {background-color: #666666}
.b-gray2                        {background-color: #D7D7D7}



.text-contact                   { padding: 20px 50px; text-align: center;}



.logo                           {height: 22%; width: 20%; margin: auto; padding: 20px 5px;}
.logo img                       { width: 100%;}



.line                          {background: #FFCD33;
                                min-height: 20px; display: block;
                                position: fixed; bottom: 0; padding: 1px; margin: 0; 
                               line-height: 8pt;}

.line p                         {font-size: 10pt; font-weight: lighter; color: #000; 
                                text-align: center; text-transform: uppercase;}



.intro                          {background-image: url(images/fabrimin_index.jpg);
                                background-size: cover;
                                background-position: center;
                                height: 450px;}

.intro-inf                      {position: relative;
                                color: #fff;
                                text-align: right;
                                height: 400px }

.inf                            {position: absolute;
                                right: 0;
                                bottom: 1px;}

.intro-about                    {color: #fff;
                                padding: 25px 0;
                                text-align: center;}

.intro-about2                   {color: #000;
                                padding: 80px 0;
                                text-align: center;}

.intro-about p                  {font-size: 18pt;}

.cntct                          { padding: 80px 0;}


.prdcts-tipe                    {padding: 80px 0; margin-bottom: 150px}


.prdcts-tipe ul li               {padding: 5px 0; font-size: 14pt;}

.prdcts-tipe ul li a             {text-decoration: none; color:#000; }

.prdcts-tipe ul li a:hover       {color: #FFCD33; font-size: 20pt; font-weight: bold;}

.gal-prdcts                       {padding: 120px 0 120px 0;}

.gal-prdcts .gal-icon img         {width: 100%; border: 6px solid #fff;
                                  -moz-box-shadow: 1px 1px 3px 2px #242323;
                                  -webkit-box-shadow: 1px 1px 3px 2px #242323;
                                  box-shadow:         1px 1px 3px 2px #242323;}

.gal-prdcts h2 img              {max-height: 20px}


.title                          {text-align: center;
                                color: #fff;
                                text-transform: uppercase;
                                letter-spacing: 1pt}

.logos_clientes                 { margin-bottom: 100px; margin-top: 20px} 

.logos_clientes h2              {background-color: #FFCD33; padding: 20px 0; color: #fff;}

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

/*/ header 
=======================================================================
======================================================================= /*/
header *, *:before, 
*:after                     {-webkit-box-sizing: border-box;
                             -moz-box-sizing: border-box; 
                             box-sizing: border-box;}

header                      {height: 70px;
                            width: 100%;
                            float: left;
                            position:relative;                            
                            z-index: 998;
                            text-align: center;
                            background: #FFCD33;
                            -moz-transition: background 0.5s ease-in-out;
                            -o-transition: background 0.5s ease-in-out;
                            -webkit-transition: background 0.5s ease-in-out;
                            -ms-transition: background 0.5s ease-in-out;
                            transition: background 0.5s ease-in-out;}



#nav-wrap, #nav-wrap ul, 
#nav-wrap li, #nav-wrap a   {margin: 0;    
                             padding: 0;  
                             border: none;    
                             outline: none;}



.arrow_box {
  position: relative;
  background: #FFCD33;
  border: 4px solid #c2e1f5;
  display: inline;}

.arrow_box:after, .arrow_box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  display: inline;}


.arrow_box:after {
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #FFCD33;
  border-width: 30px;
  margin-left: -30px;
  display: inline;}
  
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-top-color: #FFCD33;
  border-width: 36px;
  margin-left: -36px;
  display: inline;
}

/* nav-wrap */
#nav-wrap                   {font-family: Arial, sans-serif;
                            font-weight: 400; 
                            text-transform: uppercase;
                            letter-spacing: .4px;
                            display: inline-block;
                            font-size: 14pt;}


/* hide toggle button */
#nav-wrap > a               {display: none;}

ul#nav                      {min-height: 12px;
                            width: auto; 
                            text-align: center;}

ul#nav li                   {position: relative;
                            list-style: none;
                            display: inline-block;}

ul#nav li a                 {display: inline-block;
                            padding: 24px 25px 2px 25px;
                            text-decoration: none;
                            color:  #666;
                            -moz-transition: all 0.2s ease-in-out;
                            -o-transition: all 0.2s ease-in-out;
                            -webkit-transition: all 0.2s ease-in-out;
                            -ms-transition: all 0.2s ease-in-out;
                            transition: all 0.2s ease-in-out;}


ul#nav li a:hover           {display: inline-block;
                            text-decoration: none;
                            margin-bottom: 1px;
                            color: #989ca5}

ul#nav li a:active          {background-color: transparent !important;}

ul#nav li.current a         {background:  #ccc;   color: white;}


.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.8) url(images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #000;
  opacity: 1;
}

@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}




/***********************************************
Mobile (portrait 300px)
***********************************************/
@media only screen and (max-width:767px) {

.example                                        {  }


h1                               {font-size: 34pt; margin-bottom: -20px}
h3                               {font-size: 14pt;}

article                         {width: 95%; margin: auto;}

.prdcts-tipe ul                  {text-align: left; margin-left: -20px }

.prdcts-tipe ul li               {padding: 5px 0; font-size: 12pt; }

.prdcts-tipe ul li a             {text-decoration: none; color:#000; }

.prdcts-tipe ul li a:hover       {color: #FFCD33; font-size: 16pt; font-weight: bold;}



/*/ Mneu Principal
=======================================================================
=======================================================================/*/

header 					{	background: #FFCD33; 
                        	box-shadow: 1px 1px 3px 2px #000000;
                        	height: 50px;
                            width: 100%;
                           }



.arrow_box                {display: none;  }                           

.arrow_box:after, .arrow_box:before {display: none}

.arrow_box:after          {display: none;}
.arrow_box:before         {display: none;}


#nav-wrap {
                        z-index: 991;
                        display: block;
                        margin-top: 0;
                        width: 100%;
                        float: none;
                        position: absolute;
                        top: 0;
                        right: 0;
    }

#nav-wrap > a {
                        background:  #000f24;
                        border: none;
                        color: white;
                        height: 50px;
                        min-width: 60px;
                        font-size: 12pt;
                        text-align: left;
                        float: right;
                        padding: 0;
                        position: relative;
    }
#nav-wrap .menu-text {
                        text-transform: uppercase;
                        margin-right: 60px;
                        padding-left: 20px;
                        vertical-align: middle;
                        line-height: 60px;
                        display: none;
    }

#nav-wrap .menu-icon {
                        display: inline-block;
                        width: 20px;
                        height: 3px;
                        margin-top: -3px;
                        position: absolute;
                        right: 20px;
                        top: 50%;
                        bottom: auto;
                        left: auto;
                        background: white;
    }

#nav-wrap .menu-icon:before, 
#nav-wrap .menu-icon:after {
                        content: '';
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        background-color: inherit;
                        left: 0;
    }
#nav-wrap .menu-icon:before {bottom: 6px; }
#nav-wrap .menu-icon:after {top: 6px; }
#nav-wrap ul#nav {
                        background: #000f24;
                        padding: 54px 45px 60px 45px;
                        margin: 0;
                        height: auto;
                        display: none;
                        clear: both;
                        width: 100%;
                        float: none;
                        position: relative;
                        top: 0;
                        right: 0;}

#nav-wrap ul#nav > li {
                        display: block;
                        float: none;
                        height: auto;
                        text-align: left;
                        border-bottom: 1px dotted #3b4558;
                        padding: 6px 0; }

#nav-wrap ul#nav > li:first-child {border-top: 1px dotted #3b4558;}

#nav-wrap ul#nav li a {
                        display: block;
                        width: auto;
                        padding: 0;
                        padding: 12px 0;
                        line-height: 16px;
                        border: none;  }

#nav-wrap ul#nav li a:hover {color: #ccc;}
#nav-wrap ul#nav li.current > a {   background: none;
                                        color: #fff;}

.js #nav-wrap a.mobile-btn {    display: none;}

.js #nav-wrap a#toggle-btn {    display: block;  }

.no-js #nav-wrap:not(:target) > a:first-of-type, 
.no-js #nav-wrap:target > a:last-of-type {    display: block;}

.no-js #nav-wrap:target ul#nav {display: block; }

}