@charset "utf-8";

/*
Theme Name: Terra Flooring 
Theme URI: http://www.terraflooring.com.au
Author: p3k WEB
Author URI: http://www.p3kweb.com
Description: Wordpress theme of the Terra Flooring website ;)
Version: 1.0
*/

/* ---------------- RESET ---------------- */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h4, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0;  font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
    :focus { outline: 0;}
    a, a:link, a:visited, a:hover, a:active{text-decoration:none}
    table { border-collapse: separate;border-spacing: 0;}
    th, td {text-align: left; font-weight: normal;}
    img, iframe {border: none; text-decoration:none;}
    ol, ul {list-style: none;}
    input, textarea, select, button {font-size: 100%;font-family: inherit; margin:0; padding:0;}
    select {margin: inherit;}
    hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}


    html {  }
    body{ font-family: 'Open Sans', sans-serif; font-size:62.5%; color:#454547; font-weight:300; background: url(assets/img/terraflooring-wood.jpg) fixed; height: auto;  }
    b { font-weight:900 }

    /*  BORDA ARREDONDADA  */
    .radius {  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

    /*  EFEITO SMOTH  */
    .smoth { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

    /*  IES  */
    .ie8 input {line-height:2.0 !important;}
    .ie7 input {line-height:3.0 !important;}

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

    .fixed { position: fixed; z-index: 9999; }
    .relative { position: relative; }

    /*  MARGINS  */
    .nomargin { margin: 0 0 0 0 !important; }

    /*  ROW  */
    .row { position: relative; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 1260px; }


    /* responsive image */
    img {
      max-width: 100%;
      height: auto;
    }
    @media \0screen {
        img { 
        width: auto; /* for ie 8 */
        }
    }



/* ---------------- RESET END ---------------- */


 
/* ---------------- MENU MOBILE ---------------- rgb(220, 72, 81) */ 

 #menu { display:none; }
 .black { width: 100%; height: 100%; margin: 0; position: fixed; z-index: 1; background: #dc4851  }
 .menu_phone { display:block; position: fixed; z-index: 999; width: 35px; height: auto; cursor:pointer; padding: 3.5em 2em;   }
 .on-swift { background: #dc4851 }
 .off-swift { background: none }

 .header-fixo #menu { margin: 0; font-size: 2.6em; float: left; width: 100%; height: 100%; background:; position: absolute; top: 0; z-index: 3; }


 .header-fixo #menu .big { width: 100%; margin: 2% 0; padding: 2em 0 0; float: left; position: relative;z-index: 3; }
 .header-fixo #menu .big a { width: 100%; text-align: left; position: relative; z-index: 998; float: left; color: #FFF; margin: 0 0 0 0;padding: 5% 10%;cursor: pointer; border-left: 10px solid transparent; font-weight: 100; }
 .header-fixo #menu .big a:hover { border-left: 10px solid #FFF; font-weight: 900   }

  .header-fixo #infos2 { float: right; margin: 6px 20px 0 0; position: absolute; top: 0; right: 0; z-index: 99 }
  .header-fixo #infos2 p {float: left; margin: 1.55em 0.2em 0; color: #FFF; font-size: 0.5em; font-weight: 700; text-transform: uppercase;}
  .header-fixo #infos2 a { float: left; border: 2px solid #FFF; text-transform: uppercase; color: #FFF; font-weight: 600; width: 28px; height:28px; border-radius: 25px; margin: 13px 0 0 7px; cursor: pointer;}
  .header-fixo #infos2 a:hover { background: #FFF; color: #dc4851}
  .header-fixo #infos2 a i { font-size: 0.6em; padding: 7px 0; width: 100%; text-align: center; margin: 0; float: left; }


 .header-fixo {position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 70px; background: #F9F8F6; border-bottom: 1px solid #EFE5D9; display: none}


 .header-fixo h1 {display: none}
 .header-fixo img {width: 197px; margin:9px 0 0 100px;}

  .header-fixo #infos { float: right; margin: 6px 20px 0 0; position: relative; }
  .header-fixo #infos p {float: left; margin: 1.55em 0.2em 0; color: #dc4851; font-size: 1.3em; font-weight: 700; text-transform: uppercase;}
  .header-fixo #infos a { float: left; border: 2px solid #dc4851; text-transform: uppercase; color: #dc4851; font-weight: 600; width: 28px; height:28px; border-radius: 25px; margin: 13px 0 0 7px; cursor: pointer;}
  .header-fixo #infos a:hover { background: #dc4851; color: #f4f1ec}
  .header-fixo #infos a i { font-size: 1.3em; padding: 8px 0; width: 100%; text-align: center; margin: 0 }


    .header-fixo .busca { width: 34px; font-size: 1.6em; color: #000; background: url(assets/img/terraflooring-lupa.png) 10px 5px no-repeat #F9F8F6; display: block; overflow: hidden; margin: 15px 229px 0 0; padding: 0; position: absolute; top: 0; right: 0 }
    .header-fixo .busca:hover { opacity: 1 }
    .header-fixo .busca div { width: 35px; height: 100%; position: absolute; top: 0; left: 0; float: left; background:; cursor: pointer; margin:0; }
    .header-fixo .busca div:hover { opacity: .8 }
    .header-fixo .busca.active { width: 185px; opacity: 1 }
    .header-fixo .busca input {float: left; height: 27px; color: #999; margin: -11px 0 0 35px; border: 0; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 10px 0 0 0.5em; font-style: italic; background: #F9F8F6 }





  /* -------- ICON MENU HAMBURGUER ANIMATED  ------- */
        #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 2px; width: 35px; background: white; position: absolute; display: block;content: '';  }
        #nav-toggle span:before { top: -12px; }
        #nav-toggle span:after { bottom: -12px; }

        #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; }
        #nav-toggle.active span { background-color: transparent;  }
        #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; }
        #nav-toggle.active span:before { transform: rotate(45deg); }
        #nav-toggle.active span:after { transform: rotate(-45deg); }




/* ---------------- HEADER  ---------------- */
    header { width: 100%; height: 250px; padding-bottom: 0; position: relative; background:; float: left; z-index: 9}
    header .left { width: auto; height: auto; float: left; background:; }
    header .left h1 { display: none; }
    header .left img { width: 148px; float: left; margin: 20px 0 0; }

    header .right { width: 77%; height: auto; float: right; border-top: 2px solid #dc4851; position: relative; }
    header .right #menu-desktop { float: left; margin: 57px 0 0 0;  }
    header .right #menu-desktop .links { float: left; margin: 2.5em 1.25em 0; color: #dc4851; font-size: 1.4em; font-weight: 400; text-transform: uppercase; position: relative; }
    header .right #menu-desktop .active { color: #c49b63 !important; cursor: default;  }
    header .right #menu-desktop .links p { float: left;  } 
    header .right #menu-desktop .links span {transition: all 500ms ease-out; float: left; width: 0%; height: 1px; background: #c59c60; position:absolute; bottom: -5px; left: 0   }
    header .right #menu-desktop .links:hover > span { width: 100% }
    header .right #menu-desktop .active:hover > span { width: 0 !important; }


    /* ---------------- HOVER OF PRODUCTS  ---------------- */
    header .right #menu-desktop .prodover { cursor: default; float: left; margin: 2.5em 1.5em 0; color: #dc4851; font-size: 1.4em; font-weight: 400; text-transform: uppercase; height: 50px; }
    header .right #menu-desktop .prodover span {transition: all 500ms ease-out; float: left; width: 0%; height: 1px; background: #c59c60; position:absolute; bottom: 12px; left: 0; z-index: 2   }
    header .right #menu-desktop .prodover:hover > span { width: 100% }
    header .right #menu-desktop .prodover span:hover >  ul {height: 150px; padding: 4% 2%; opacity: 1;}

    header .right #menu-desktop .prodover:hover > ul {height: 150px; padding: 4% 2%; opacity: 1;}
    header .right #menu-desktop ul {opacity: 0; width: 96%; background: rgba(255, 255, 255, 0.9); padding: 0 2%; height: 0; margin: 130px 0 0 0; float: left; position: absolute; top: 0; left: 0; transition: all 200ms ease-out; z-index: 999 }
    header .right #menu-desktop ul li { width: 18.4%; height: 100%; margin: 0 2% 0 0; background: #dc4851; float: left; position: relative; display: block; overflow: hidden; }
    header .right #menu-desktop ul li:last-child { margin: 0 0 0 0; }

    
    header .right #menu-desktop ul li figure { width: 100%; height: 100%; background-size: cover !important; background-position: top center !important;
      transition: all 500ms ease-out; margin: 0; padding: 0; position: relative; z-index: 1}

    header .right #menu-desktop ul li a:hover > figure { 
       -webkit-transform: scale(1.15, 1.15);
       -moz-transform: scale(1.15, 1.15);
       -ms-transform: scale(1.15, 1.15);
       -o-transform: scale(1.15, 1.15);
       transform: scale(1.15, 1.15);
       opacity: 0;
    }
    header .right #menu-desktop ul li h4 { width: 100%; margin-top: -12px; font-size: 1.3em; color:#FFF; float: left; font-weight: 700; text-align: center; position: absolute; top: 50%; left: 0; z-index: 2; text-transform: none; text-shadow: 0px 0px 16px #000; }



    header .right #menu-desktop ul li .plus { float: left; border: 2px solid #F3F2EE; color: #F3F2EE; font-weight: 600; width: 33px; height: 33px; border-radius: 25px; cursor: pointer; position: relative; top: 50%; left: 50%; margin:-18px 0 0 -18px;  }
    header .right #menu-desktop ul li:hover > .plus { background: #F3F2EE; color: #dc4851}
    header .right #menu-desktop ul li .plus i { font-size: 1.45em; padding: 8px 0; width: 100%; text-align: center; margin: 0; }

    header .right #menu-desktop ul li p { position: absolute; top: 50%; width: 100%; text-align: center; margin: 1.5em 0 0;
    color: #F3F2EE;    font-size: 1.0em;    font-weight: 300;    text-transform: lowercase; font-weight: 300;  }

    header .right #menu-desktop ul li:hover > .plus {
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }










    /* ---------------- HOVER OF ABOUT US  ---------------- */
    header .right #menu-desktop .aboutover { cursor: default; float: left; margin: 2.5em 1em 0; color: #dc4851; font-size: 1.4em; font-weight: 400; text-transform: uppercase; height: 50px; background:; position: relative;}
    header .right #menu-desktop .aboutover span {transition: all 300ms ease-out; float: left; width: 0%; height: 1px; background: #c59c60; position:absolute; bottom: 10px; left: 0; z-index: 2   }
    header .right #menu-desktop .aboutover:hover > span { width: 100% }

    header .right #menu-desktop .aboutover:hover > div {height: auto; padding:  1.5em; opacity: 1;}
    header .right #menu-desktop .aboutover div {opacity: 0; width: 112px; background: rgba(255, 255, 255, 0.9); padding:0; height: 0; margin: 40px 0 0 0; float: left; position: absolute; top: 0; left: 0; transition: all 200ms ease-out; display: block; overflow: hidden; }
    header .right #menu-desktop .aboutover div a { width: 100%; float: left; margin: 0 0 1em 0; font-weight: 300; color: #c59c60; text-transform: none;  }
    header .right #menu-desktop .aboutover div a:last-child { margin: 0; }
    header .right #menu-desktop .aboutover div a:hover { text-decoration: underline; }





    header .right #infos { float: right }
    header .right #infos .top { float: right; clear: both; margin-top: 30px;}
    header .right #infos .top .field { float: right;
    height: 30px;
    color: #c49b63;
    margin: 0;
    border: 0;
    border: 1px solid #c49b63;
    border-radius: 25px;
    padding: 0 0 0 1em;
    font-style: italic;
    width: 307px;
    font-size: 1.3em;
    background: none
    }
    header .right #infos .top .btn { right: 10px; top: 37px; position: absolute; z-index: 999; background: url(assets/img/terraflooring-lupa.png); width: 18px; height: 18px; border: 0; cursor: pointer;  }
    header .right #infos .top .btn:hover { opacity: .7  }

    ::-webkit-input-placeholder {
       color: #c49b63;
    }

    :-moz-placeholder {
       color: #c49b63;
    }

    ::-moz-placeholder {
       color: #c49b63;  
    }

    :-ms-input-placeholder {  
       color: #c49b63;  
    }

    header .right #infos .bottom { float: left; clear: both; }

    header .right #infos p {float: left; margin: 1.3em 1em 0; color: #dc4851; font-size: 2em; font-weight: 700; text-transform: uppercase;}
    header .right #infos a { float: left; border: 1px solid #dc4851; text-transform: uppercase; color: #dc4851; font-weight: 600; width: 29px; height: 29px; border-radius: 25px; margin: 2.5em 0.75em; cursor: pointer;}
    header .right #infos a:hover { background: #dc4851; color: #f4f1ec}
    header .right #infos a i { font-size: 1.5em; padding: 7px 0; width: 100%; text-align: center; margin: 0 }







/* ---------------- SETOR  ---------------- */
    #setor1 { width: 100%; height: auto; padding-bottom: 7.5%; position: relative; background:; ; float: left; z-index: 8}
  



/* ---------------- SETOR  ---------------- */
    #setor2 { width: 100%; height: auto;  position: relative; background:; float: left; z-index: 8}

    #setor2 .top { width: 100%; float: left; margin: 0 0 2.5em 0; }
    #setor2 .top div { width: 85px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em  }
    #setor2 .top h3 { width: 100%; font-size: 4.8em; color:#dc4851; float: left; clear: both; font-weight: 700; text-align: left; line-height: 1;  }

    #setor2 ul { width: 100%; float: left; }
    #setor2 ul li { width: 18.4%; height: 240px; margin: 0 2% 0 0; background: #dc4851; float: left; position: relative; display: block; overflow: hidden; cursor: pointer; }
    #setor2 ul li:last-child { margin: 0 0 0 0; }

    
    #setor2 ul li figure { width: 100%; height: 100%; background-size: cover !important; background-position: top center !important;
      transition: all 500ms ease-out; margin: 0; padding: 0; position: relative; z-index: 1}
    #setor2 ul li a:hover > figure { 
       -webkit-transform: scale(1.15, 1.15);
       -moz-transform: scale(1.15, 1.15);
       -ms-transform: scale(1.15, 1.15);
       -o-transform: scale(1.15, 1.15);
       transform: scale(1.15, 1.15);
       opacity: 0;
    }
    #setor2 ul li h4 { width: 100%; margin-top: -12px; font-size: 2.6em; color:#FFF; float: left; font-weight: 700; text-align: center; position: absolute; top: 50%; left: 0; z-index: 2; text-shadow: 0px 0px 26px #000; }


     #setor2 ul li .plus { float: left; border: 2px solid #F3F2EE; color: #F3F2EE; font-weight: 600; width: 33px; height: 33px; border-radius: 25px; cursor: pointer; position: relative; top: 50%; left: 50%; margin:-18px 0 0 -18px;  }
     #setor2 ul li:hover > .plus { background: #F3F2EE; color: #dc4851}
     #setor2 ul li .plus i { font-size: 1.9em; padding: 8px 0; width: 100%; text-align: center; margin: 0; }

     #setor2 ul li p { position: absolute; top: 50%; width: 100%; text-align: center; margin: 1.4em 0 0; color: #F2F1EC; font-size: 1.6em; font-weight: 300;  }

     #setor2 ul li:hover > .plus {
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }




/* ---------------- SETOR  ---------------- */
    #setor3 { width: 100%; height: auto; padding-top: 7.5%; position: relative; background:; float: left; z-index: 8; display: block; overflow: hidden;}

    #setor3 .box { width: 25%; height: auto; background:; float: left; position: relative;  }
    #setor3 .box img { float: left; margin:0 0 5em 0; padding: 0 }
    #setor3 .box div { width: 42px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em; clear: both;  }
    #setor3 .box h4 { width: 75%; font-size: 3.8em; color:#dc4851; float: left; clear: both; font-weight: 700; text-align: left; line-height: 1; position: relative; z-index: 3  }
    #setor3 .box a {float: left; width: 100%; text-align: left; margin: 1em 0 0; color: #c49b63; font-size: 1.6em; font-weight: 300; position: relative;z-index: 4; cursor: pointer; }
    #setor3 .box a:hover { text-decoration: underline; }

    #setor3 .last { width: 50%; height: 379px;   }
    #setor3 .last .imgab { position: absolute; bottom: 0; left: 160px; z-index: 2; margin: 0  }
    #setor3 .last .text { position: absolute; top: 0; right: -50px; z-index: 1; color: #c49b63; font-size: 1.5em; font-weight: 300; border-radius: 50%; border: 1px solid #e7dcc9; width: 317px; height: 317px; text-align: right; line-height: 1.3; background: none  }
    #setor3 .last .text p { padding: 75px 50px 0 50px }



  /* ---------------- SECTION PRODUCTS  ---------------- */


    #products { width: 100%; height: auto; padding-top: 0; position: relative; background:; float: left; z-index: 8; color: #c49b63;}
    #products .oneside { width: 19%; margin: 0 0 0 3%; float: left; font-size: 1.4em }
    #products .oneside div { width: 100%; float: left; display: block; overflow: hidden;}
    #products .oneside span { float: left; width: 5px; height: 8px; margin: 11px 5% 0 0; background: url(assets/img/terraflooring-products-seta.png);   }
    #products .oneside h3 { float: left; text-transform: uppercase; font-weight: bold; margin: 2% 0; cursor: default;   }
    #products .oneside h3 a { color: #c49b63   }
    #products .oneside ul { width: 100%; height: 0; float: left; }
    #products .oneside div:hover > ul { height: auto }
    #products .oneside ul li { width: 100%; float: left; }
    #products .oneside ul li a { width: 100%; float: left; color: #c49b63; margin: 2% 0 2% 5% }
    #products .oneside ul li a:hover { text-decoration: underline;}

    #products .oneside ul li ul { height: inherit; }
    

    #products .oneside .open ul { height: auto}
    #products .oneside .open span { width: 8px; height: 5px; background-position: -5px 0; margin-top: 11px;  }
    #products .oneside div:hover > span { width: 8px; height: 5px; background-position: -5px 0; margin-top: 11px;  }


    #products .oneside ul li .active { color: #dc4851 }
    #products .oneside ul li .active:hover { text-decoration: none }


    #products .twoside { width: 78%; float: left;  }

    #products .twoside .swiper-container { height: 415px } 
    #products .twoside .swiper-container .left { width: 100%; top: 10%; } 

    #products .twoside h4 { width: 100%; float: left; font-size: 1.6em; margin: 4% 0 }

    #products .twoside .textures { width: 100%; float: left; font-size: 1.4em; margin:; color: #dc4851 }
    #products .twoside .textures li { float: left; width: 15.5%; margin: 0 4.5% 2% 0; height: auto; min-height: 218px; background:; }
    #products .twoside .textures li:last-child { margin: 0 0 0 0; }

    #products .twoside .textures li img { float: left; width: 100%; border-radius: 50% }
    #products .twoside .textures li p { float: left; width: 100%; text-align: center; margin: 4% 0 0 0; color: #dc4851; font-weight: 500 }


    #products .twoside .more-info { width: 100%; margin: 0 0 10%; float: left; font-size: 1.4em;}
    #products .twoside .more-info li { width: 29%; margin: 0 5% 0 0; float: left; }
    #products .twoside .more-info li:last-child { margin: 0 0 0 0; }
    #products .twoside .more-info li h5 { width: 100%; text-transform: uppercase; font-weight: bold; float: left; }
    #products .twoside .more-info li .one { width: 100%; margin: 2% 0 0; float: left; }

    #products .twoside .more-info li .one .full { width: 100%; float: left; margin: 0.2em 0; }

    #products .twoside .more-info li .one p { width: 50%; margin: 2% 0 2%; float: left; font-size: 0.9em; font-weight: 400;  }

    #products .twoside .more-info li .two { width:33.3%; min-height: 132px; margin: 2% 0 0; float: left; }
    #products .twoside .more-info li .two figure { width: 100%; float: left; margin: 0 }
    #products .twoside .more-info li .two figure div { width:53px; height: 53px; border:1px solid #c49b63; margin: 2% auto 0; text-align: center; border-radius: 50%; background: url(assets/img/terraflooring-products-elements3.png); }

    #products .twoside .more-info li .exception figure div { background: none !important; }

    #products .twoside .more-info li .two p { float: left; width: 100%; font-size: 0.8em; font-weight: 400; text-align: center; margin: 4% 0 0 0 }



    /* OLD ICONS
    #products .twoside .more-info li .two .static { background-position: 13px 10px; }
    #products .twoside .more-info li .two .duty { background-position: -56px 10px; }
    #products .twoside .more-info li .two .fade { background-position: -126px 11px; }
    #products .twoside .more-info li .two .fibre { background-position: 10px -52px; }
    #products .twoside .more-info li .two .years { background-position: -56px -49px; }
    #products .twoside .more-info li .two .prewashed { background-position: -126px -49px; }
    */


    /*   =========================   NEW ICONS   =========================   */

    /* Anti Static */
    #products .twoside .more-info li .two .static { background-position: -55px -123px; }
    /* Extra Heavy Duty */
    #products .twoside .more-info li .two .extra { background-position: -143px -123px; }
    /* Heavy Duty */
    #products .twoside .more-info li .two .heavy { background-position: -234px -123px; }
    /* Residential Heavy Duty */
    #products .twoside .more-info li .two .residential { background-position: -324px -123px; }
    /* Durable and Resimlient */ 
    #products .twoside .more-info li .two .durable { background-position: -54px -232px; }
    /* 4 Sided Click System (5G) */
    #products .twoside .more-info li .two .sided { background-position: -145px -231px; }
    /* 14mm Strand Woven */
    #products .twoside .more-info li .two .strand { background-position: -234px -232px; }
    /* Fibre and Colour Fusion */
    #products .twoside .more-info li .two .fibre { background-position: -54px -342px; }
    /* 20 year Warranty */
    #products .twoside .more-info li .two .year { background-position: -144px -342px; }
    /* Prewashed */
    #products .twoside .more-info li .two .prewashed { background-position: -235px -342px; }
    /* Easy to Clean and Mantain */
    #products .twoside .more-info li .two .easy { background-position: -54px -454px; }
    /* Eco Friendly */
    #products .twoside .more-info li .two .eco { background-position: -144px -452px; }
    /* Quick and Easy Installation */
    #products .twoside .more-info li .two .quick { background-position: -234px -452px; }
    /* Contains Fibreglass Reinforcenent Layer */
    #products .twoside .more-info li .two .contains { background-position: -54px -562px; }
    /* Nano Silver Layer Protects Against Bacteria */
    #products .twoside .more-info li .two .nano { background-position: -144px -562px; border-radius: 0; border: 0; }
    /* Waterproof */
    #products .twoside .more-info li .two .Waterproof { background-position: -234px -562px; }
    /* Commercial Rated */
    #products .twoside .more-info li .two .CommercialRated { background-position: -53px -697px; }
    /* Provides Sound Insulation */
    #products .twoside .more-info li .two .ProvidesSoundInsulation { background-position: -144px -696px; }
    /* Contract Light Medium Duty */
    #products .twoside .more-info li .two .ContractLightMediumDuty { background-position: -54px -807px; }
    /* Modern Square Pattern */
    #products .twoside .more-info li .two .ModernSquarePattern { background-position: -144px -807px; }
    /* Fade and Stain Resistant */
    #products .twoside .more-info li .two .FadeandStainResistant { background-position: -234px -807px; }


    /* 5 year Warranty */
    #products .twoside .more-info li .two .year-five { background-position: -324px -232px; }
    /* 10 Year Warranty */
    #products .twoside .more-info li .two .year-ten { background-position: -324px -342px; }
    /* 12 Year Warranty */
    #products .twoside .more-info li .two .year-twelve { background-position: -324px -452px; }
    /* 25 Year Warranty */
    #products .twoside .more-info li .two .year-twentyfive { background-position: -324px -562px; }


    /*  NEW NEWS ICONS  */

    /* Lifetime Warranty */
    #products .twoside .more-info li .two .lifetime1 { background-position: -414px -122px; }
    /* Lifetime Warranty */
    #products .twoside .more-info li .two .Lifetime2 { background-position: -414px -232px; }
    /* Bevelled Edge */
    #products .twoside .more-info li .two .bevelled { background-position: -414px -342px; }
    /* Uniclic */
    #products .twoside .more-info li .two .uniclic1 { background-position: -414px -453px; }
    /* Uniclic Multifit */
    #products .twoside .more-info li .two .uniclic2 { background-position: -414px -563px; }





    /* XXXXXXXXXX 
    #products .twoside .more-info li .two .XXXXXXXXX { background-position: XXXXXXXXX; }
    */

    /* =========================      NEW ICONS END     ========================= */









    #products .twoside .more-info li .tre { width:100%; margin: 2% 0 4%; float: left; }
    #products .twoside .more-info li .tre span { width:14px; height: 14px; margin: 0 4% 0; float: left; background: url(assets/img/terraflooring-products-down.png); }
    #products .twoside .more-info li .tre a { color: #c49b63; float: left; font-size: 0.9em; font-weight: 400; }
    #products .twoside .more-info li .tre a:hover { text-decoration: underline; }


  /* ---------------- SECTION CATEGORY ---------------- */

    #products { width: 100%; height: auto; background-color:; padding-bottom: 10%; position: relative; background:; float: left; z-index: 8; color: #c49b63;}
    #products .triside { width: 78%; float: left; font-size: 1.4em; }
    #products .triside .top { width: 100%; float: left; margin: 0 0 5% 0; }
    #products .triside .top div { width: 85px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em  }
    #products .triside .top h3 { width: 100%; font-size: 3.8em; color:#dc4851; float: left; clear: both; font-weight: 700; text-align: left; line-height: 1;  }

    #products .triside ul { width: 100%; float: left; }
    #products .triside ul li { width: 31.3%; height: 320px; margin: 0 2% 2% 0; background: #dc4851; float: left; position: relative; display: block; overflow: hidden; }

    
    #products .triside ul li figure { width: 100%; height: 100%; background-size: cover !important; background-position: top center !important;
      transition: all 500ms ease-out; margin: 0; padding: 0; position: relative; z-index: 1}
    #products .triside ul li a:hover > figure { 
       -webkit-transform: scale(1.15, 1.15);
       -moz-transform: scale(1.15, 1.15);
       -ms-transform: scale(1.15, 1.15);
       -o-transform: scale(1.15, 1.15);
       transform: scale(1.15, 1.15);
       opacity: 0;
    }
    #products .triside ul li h4 { width: 100%; margin-top: -12px; font-size: 2em; color:#FFF; float: left; font-weight: 700; text-align: center; position: absolute; top: 50%; left: 0; z-index: 2; text-shadow: 0px 0px 26px #000; }



  /* ---------------- SECTION ABOUT US ---------------- */


    #aboutus { width: 100%; height: auto; padding-top: 0; position: relative; background:; float: left; z-index: 8; color: #c49b63;}

    #aboutus .girl-all { width: 100%; height: 100%; float: left; background: url(assets/img/terraflooring-element-girl2.png) left bottom no-repeat; }


    #aboutus .oneside { width: 25%; min-height: 670px; float: left; font-size: 1.4em; }
    #aboutus .oneside .top { width: 100%; float: left; margin: 0 0 2em 0; }
    #aboutus .oneside .top div { width: 85px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em  }
    #aboutus .oneside .top h3 { width: 100%; font-size: 2.8em; color:#dc4851; float: left; clear: both; font-weight: 700; text-align: left; line-height: 1;  }

    #aboutus .oneside .left { float: left; }
    #aboutus .oneside .left .ball { float: left; border: 1px solid #dc4851; text-transform: uppercase; color: #dc4851; font-weight: 600; width: 29px; height: 29px; border-radius: 25px; margin: 0; cursor: pointer;}
    #aboutus .oneside a:hover > .left .ball { background: #dc4851; color: #f4f1ec}
    #aboutus .oneside a:hover > .right p { text-decoration: underline;}
    #aboutus .oneside .left .ball i { font-size: 1em; padding: 8px 0; width: 100%; text-align: center; margin: 0 }
    #aboutus .oneside .right { float: left; margin: 0.5% 0 0 4% }
    #aboutus .oneside .right img { float: left; }
    #aboutus .oneside .right p { float: left; margin: 1% 0 0; text-transform: uppercase; font-weight: 900; font-size: 0.8em; color:#dc4851; clear: both;  }

    #aboutus .oneside a.write { 
        color: #dc4851;
        float: left;
        margin: 40px 0 0 0;
        font-weight: 700;
        text-transform: uppercase;
        padding: 0.5em 1em 0.6em;
        border: 1px solid #dc4851;
        border-radius: 50px;
        font-size: 0.8em;
        clear: both;
    }
    #aboutus .oneside a.write:hover {background: #dc4851; color: #f4f1ec; }




    #aboutus .twoside { width: 75%; float: left;  }

    #aboutus .twoside .box { width: 45%; min-height: 310px; margin: 0 0 5% 5%; float: left;  }
    #aboutus .twoside .box .left { width: 23%; height: 100%; min-height: 200px; float: left; background: url(assets/img/terraflooring-element-baloom2.png) no-repeat; background-size: 100% auto }
    #aboutus .twoside .box .left img { width: 80%; height: auto; margin:10% 0 0 10%; float: left; border-radius: 50% }

    #aboutus .twoside .box .right { width: 70%; margin: 0 0 0 7%; float: left; }

    #aboutus .twoside .box .right .top { width: 100%; float: left; margin: 0 0 0 0; }
    #aboutus .twoside .box .right .top div { width: 85px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em  }
    #aboutus .twoside .box .right .top h4 { width: 100%; font-size: 1.8em; color:#dc4851; float: left; clear: both; font-weight: 300; text-align: left; line-height: 1;  }
    #aboutus .twoside .box .right .top p { float: left; clear: both; color: #c49b63; font-size: 1.2em }

    #aboutus .twoside .box .right h5 { width: 100%; float: left; margin: 5% 0; color: #c49b63; font-size: 2.8em; font-style: italic;  }
    #aboutus .twoside .box .right h5 b { font-family: times; color: #dc4851;}

    #aboutus .twoside .box .right .deps { width: 100%; float: left; clear: both; font-style: italic; font-size: 1.5em }

    #aboutus .twoside .box .right a { width: 100%; float: left; clear: both; text-transform: uppercase; color:#dc4851; font-size: 1.1em; font-weight: 900; margin: 6% 0 0 }
    #aboutus .twoside .box .right a:hover { text-decoration: underline; }


  /* ---------------- SECTION FORM ---------------- */
  #contato {width: 100%; height: auto; background:; float: left; margin-bottom: 7%; }
 
  #contato .logo {text-indent: -100000px; width: 203px; height: 73px; background: url(assets/img/terraflooring-logo2.png); background-size: 203px 73px;
  top: 5%; left: 3.5%; position: absolute; z-index: 3}

  #contato .btn-fechar {text-indent: -100000px; width: 32px; height: 32px; background: url(assets/img/terraflooring-close.png); background-size: 32px 32px; top: 7.5%; right: 5%; position: absolute; cursor: pointer; z-index: 3; opacity: 1;}
  #contato .btn-fechar:hover { opacity: .7}

  #contato form { width:50%; background:; float:left; margin: 0 0 0 8%;  }
  #contato form ul { width:100%; margin:0 0 3.5% 0; float: left; position: relative;}
  #contato form ul label { width:20%; float:left; margin:0.5em 2% 0 0; font-size: 1.8em; color: #c49b63; font-weight: 300; text-align: left; background:;}
  #contato form ul .field { width:76% !important; height: 40px; padding:0 0 0 2%; float:left; font-size: 1.8em; font-weight: 300; font-style: italic; background:none; border:0; border-bottom: 1px solid #c59c60; color: #666; margin: 0; position: relative !important;
    bottom: 0 !important;
    left: 0 !important;  }

  #contato form ul textarea {  width:75% !important; height: 120px; margin:2% 0 0 ;  padding:2% 0 0 2%; float:left; font-size: 1.8em; font-weight: 300; font-style: italic; background:none; border:0; border: 1px solid #c59c60; color: #666; resize:none; position: relative !important;
    bottom: 0 !important;
    left: 0 !important;}
  #contato form .mess {  margin:2% 0 0 !important }

  #contato form ul .btn { background: none; float: left; border: 2px solid #dc4851; font-size: 1.4em; text-transform: uppercase; color: #dc4851; font-weight: 600; padding: 0.5em 3em; border-radius: 25px; margin:1.5em 22%; cursor: pointer;}
  #contato form ul .btn:hover { background: #dc4851; color: #f4f1ec}

  #contato form .cleareer { clear:both; }

  #contato .info { width:30%; background:; float:left; margin: 0 0 0 8%; }
  #contato .info .top { width:100%; float:left; }
  #contato .info .top div { width:100%; float:left; margin: 0 0 5% }
  #contato .info .top div figure {width: 13px; height: 14px; background: url(assets/img/terraflooring-icons.png); background-size: 13px 127px; float: left;  margin: 0.4em 0.75em 0 0; padding: 0 }
  #contato .info .top div p {float: left; color: #dc4851; font-size: 1.6em; }
  #contato .info .top div a p:hover {text-decoration: underline; }

  #contato .info .top div .icon-2 { background-position: 0 -35px }
  #contato .info .top div .icon-3 { background-position: 0 -76px }
  #contato .info .top div .icon-4 { background-position: 0 -115px; height: 12px; }


  #contato .info .bottom { width:100%; float:left; color: #c49b63; font-size: 1.3em; }
  #contato .info .bottom p { float: left; margin: 0 0 1.5% 0 }

  #contato form .g-recaptcha { margin-left: 21.7%; margin-top: 26px}

  #contato form ul .error {
        position: absolute;
    bottom: -20px;
    left: 22.2%;
    width: 100%;
    color: #dc4851;
    font-size: 116%;
    font-weight: 700;
  }




  /* ---------------- SECTION PROMO ---------------- */


    #promotions { width: 100%; height: auto; background-color:; padding-top: 0; position: relative; background:; float: left; z-index: 8; color: #c49b63;}
    #promotions .oneside { width: 56%; margin: 0 0 0 22%; background:; float: left; font-size: 1.4em; }
    #promotions .oneside .top { width: 100%; float: left; margin: 0 0 10% 0; }
    #promotions .oneside .top div { width: 85px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em  }
    #promotions .oneside .top h3 { width: 100%; font-size: 2.8em; color:#dc4851; float: left; clear: both; font-weight: 700; text-align: left; line-height: 1;  }

    #promotions .oneside .box { width: 100%; float: left; margin: 0 0 10% 0; }
    #promotions .oneside .box img { width: 100%; float: left; }
    #promotions .oneside .box h4 { width: 100%; float: left; color:#dc4851; font-size:2em; font-weight: 700; margin: 5% 0; }
    #promotions .oneside .box h4 a { color:#dc4851; }
    #promotions .oneside .box p { float: left; color:#c49b63; font-size:1em; font-weight: 400  }

    #promotions .oneside .box .share { width: 100%; float: left; margin: 5% 0; }
    #promotions .oneside .box .share p { font-size:0.9em; text-transform: uppercase; font-weight: 400; float: left; color:#dc4851; margin: 2px 0 0 0; }
    #promotions .oneside .box .share a { font-size:1em; color:#dc4851; float: left; margin: 0 0 0 1em }
    #promotions .oneside .box .share a:hover { opacity: .7 }


    #promotions .oneside .box .newlink {
        float: left;
        color: #DC4851;
        font-weight: 700;
        font-size: 1.3em;
        text-decoration: underline;
        margin: 5% 0 0 0;
        clear: both;
    }
    #promotions .oneside .box .newlink:hover { text-decoration: none; }

    #promotions .oneside .box .test {float: left; margin: 5% 0; line-height: 1.7;}

    #promotions a.newlink2 {
        float: left;
        color: #DC4851;
        font-weight: 700;
        font-size: 1.1em;
        text-decoration: underline;
        margin: 1% 0 0 0;
        clear: both;
    }
    #promotions a.newlink2:hover { text-decoration: none; }

    #promotions .oneside .box .test .newlink2 {margin: 5% 0; }


  /* ---------------- SECTION ABOUT US ---------------- */

    #about_us_real { width: 100%; height: auto; padding-top: 0; position: relative; background:; float: left; z-index: 8; color: #c49b63;}

    #about_us_real .content { width: 100%; float: left; padding-bottom: 3% }

    #about_us_real .oneside { width: 25%; float: left; font-size: 1.4em; background:; }
    #about_us_real .oneside .top { width: 85%; float: left; margin: 0 0 2em 0; }
    #about_us_real .oneside .top div { width: 85px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em  }
    #about_us_real .oneside .top h3 { width: 100%; font-size: 2.8em; color:#dc4851; float: left; clear: both; font-weight: 700; text-align: left; line-height: 1;  }


    #about_us_real .twoside { width: 50%; float: left; padding-bottom:; font-size: 1.3em; background:; }
    #about_us_real .twoside p { width: 85%; margin: 0 0 3% 0; float: left;}

    #about_us_real .treside { width: 25%; float: left; padding-bottom:; font-size: 1.3em; background:; }
    #about_us_real .treside img { margin: 0 1em 0 0; float: left;}
    #about_us_real .treside p { padding: 0 0 0 0; line-height: 1.6; }
    #about_us_real .treside p b { line-height: 0}


    #about_us_real ul { width: 100%; float: left; }
    #about_us_real ul li { width: 94%; height: 240px; margin: 0 0 6% 0; background: #dc4851; float: left; position: relative; display: block; overflow: hidden; }
    #about_us_real ul li:last-child { margin: 0 0 0 0; }

    
    #about_us_real ul li figure { width: 100%; height: 100%; background-size: cover !important; background-position: bottom center !important;
      transition: all 500ms ease-out; margin: 0; padding: 0; position: relative; z-index: 1}
    #about_us_real ul li:hover > figure { 
       -webkit-transform: scale(1.15, 1.15);
       -moz-transform: scale(1.15, 1.15);
       -ms-transform: scale(1.15, 1.15);
       -o-transform: scale(1.15, 1.15);
       transform: scale(1.15, 1.15);
    }

    #about_us_real .twoside .left { width: 50%; float: left; }
    #about_us_real .twoside .right { width: 50%; float: right; }



    #about_us_real .oneside ul li { height: 310px; margin: 10% 0 6% 0; }
    #about_us_real .twoside .left ul li:first-child { height: 360px }
    #about_us_real .twoside .left ul li:last-child { height: 250px }
    #about_us_real .twoside .right ul li:first-child { height: 250px }
    #about_us_real .twoside .right ul li:last-child { height: 360px }
    #about_us_real .treside ul li { height: 320px; margin: 25% 0 6% 0; }


    #about_us_real .treside .link { float: left; margin: 20% 0 0 36%;}
    #about_us_real .treside .link a { float: left; border: 2px solid #dc4851; text-transform: uppercase; color: #dc4851; font-weight: 600; width: 34px; height:34px; border-radius: 25px; margin: 13px 0 0 7px; cursor: pointer; margin-bottom: 5em}
    #about_us_real .treside .link a:hover { background: #dc4851; color: #FFF}
    #about_us_real .treside .link a i { font-size: 1.6em; padding: 7px 0; width: 100%; text-align: center; margin: 0; float: left; }
    #about_us_real .treside .link a p { float: left; clear: both; color:#c59c60; position: relative; margin: 1em 0 0 -11px; width: 120px; text-transform: none; font-weight: 400 }


    #about_us_real .last .oneside { width: 100% }
    #about_us_real .last .twoside { width: 100%; background:; }
    #about_us_real .last .twoside .left { width: 50%; float: left; }
    #about_us_real .last .twoside .right { width: 50%; float: left; }
    #about_us_real .last .twoside ul li { width: 100%; margin: 0 0 10% 0; background: none; }
    #about_us_real .last .twoside ul li img { width: 25%; margin: 0 5% 0 0; float: left; border-radius: 50% }
    #about_us_real .last .twoside ul li div { width: 70%;  float: left; font-weight: 400 }
    #about_us_real .last .twoside ul li div h5 { float: left; clear: both; color: #dc4851; font-size: 1.4em; margin: 0; }
    #about_us_real .last .twoside ul li div h6 { float: left; clear: both; color: #c59c60; font-size: 0.8em; text-transform: uppercase; }
    #about_us_real .last .twoside ul li div a { float: left; clear: both; color: #c59c60; font-size: 0.8em; margin: 3% 0 }
    #about_us_real .last .twoside ul li div a:hover { text-decoration: underline; }
    #about_us_real .last .twoside ul li div p { float: left; clear: both; color: #c59c60; font-size: 1.0em; }

    #about_us_real .last .twoside .left ul li:first-child { height: auto; margin: 0 0 10% 0;}
    #about_us_real .last .twoside .left ul li:last-child { height: auto; margin: 0 0 10% 0;}
    #about_us_real .last .twoside .right ul li:first-child {height: auto; margin: 0 0 10% 0;}
    #about_us_real .last .twoside .right ul li:last-child {height: auto; margin: 0 0 10% 0;}




  /* ---------------- SECTION TERMS ---------------- */

    #terms { width: 100%; height: auto; padding-top: 0; position: relative; background:; float: left; z-index: 8; color: #c49b63;}

    #terms .girl-all { width: 100%; height: 100%; float: left; background: url(assets/img/terraflooring-element-girl2-op1.png) left bottom no-repeat; }
    #terms .excep { background: url(assets/img/terraflooring-element-girl2-op3.png) -80px bottom no-repeat; background-size: 37% auto !important; }


    #terms .oneside { width: 25%; float: left; font-size: 1.4em; min-height: 610px; }
    #terms .oneside .top { width: 100%; float: left; margin: 0 0 2em 0; }
    #terms .oneside .top div { width: 85px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em  }
    #terms .oneside .top h3 { width: 100%; font-size: 2.8em; color:#dc4851; float: left; clear: both; font-weight: 700; text-align: left; line-height: 1;  }


    #terms .twoside { width: 75%; float: left; padding-bottom: 10%; font-size: 1.3em }
    #terms .twoside p { width: 100%; margin: 0; float: left;}
    #terms .twoside strong { font-size: 1.1em; line-height: 3; }
    #terms .twoside ul { width: 100%; margin: 0; float: left;}
    #terms .twoside ul li { width: 95%; margin: 0 0 0 5%; float: left; list-style: initial;}

    #terms .twoside a.newlink {
        float: left;
        color: #DC4851;
        font-weight: 700;
        font-size: 1.3em;
        text-decoration: underline;
        margin: 5% 0 0 0;
        clear: both;
    }
    #terms .twoside a.newlink:hover { text-decoration: none; }




  /* ---------------- SECTION SEARCH RESULTS ---------------- */

    #search { width: 100%; height: auto; padding-top: 0; position: relative; background:; float: left; z-index: 8; color: #c49b63; }

    #search .girl-all { width: 100%; height: 100%; float: left; background: url(assets/img/terraflooring-element-girl2-op2.png) left bottom no-repeat; background-size: 23% auto; }

    #search .oneside { width: 25%; float: left; font-size: 1.4em; }
    #search .oneside .top { width: 100%; float: left; margin: 0 0 2em 0; }
    #search .oneside .top div { width: 85px; height: 1px; float: left; background:#c59c60; margin-bottom: 2em  }
    #search .oneside .top h3 { width: 100%; font-size: 2.8em; color:#dc4851; float: left; clear: both; font-weight: 700; text-align: left; line-height: 1;  }


    #search .twoside { width: 75%; min-height: 350px; background:; float: left; padding-bottom: 10%; font-size: 1.3em }
    #search .twoside p { width: 80%; margin: 0 0 0 10%; float: left; border-bottom: 1px solid #F1E1CB; padding: 3% 0 1%;}

    #search .twoside a { color: #c49b63 }
    #search .twoside a b { color: #dc4851; font-size: 135% }





/* ---------------- MENSAGEM DE SUCESSO ---------------- */
.modal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #dc4851; opacity: 1; z-index: 1000; display:;}
.modal .center { position: absolute; top: 50%; margin-top: -70px; width: 100%}
.modal p {font-size: 2em; 
    color: white;
    font-weight: 400;
    float: left;
    width: 100%; text-align: center;
    }
.modal a {
    border: 2px solid white;
    color: white;
    font-weight: 600;
    font-size: 1.4em;
    text-transform: uppercase;
    margin: 0;
    padding: 0.5em 3em;
    cursor: pointer;
    transition: all 100ms linear;
    clear: both;
    float: left;
    position: relative;
    left: 50%;
    margin: 1% 0 0 -70px; border-radius: 25px;
}
.modal a:hover { background:white; color: #dc4851 !important; }



/* ---------------- MENSAGEM DE SUCESSO END ---------------- */





















/* ---------------- FOOTER  ---------------- */
    footer { width: 100%; height: auto; padding-bottom: 2.5%; position: relative;  float: left; z-index: 8}

    footer .info { width:100%; border-top: 2px solid #dc4851; background:; float:left; margin: 0 0 0 0; }
    footer .info ul { float:left; margin: 14px 0 0 0; }
    footer .info div { float:left; margin: 2.5% 3em 0 0 }
    footer .info div.excep { width:203px; margin: 2.5% 0 0 0; }
    footer .info div.excep p { width:180px }
    footer .info div figure {width: 13px; height: 14px; background: url(assets/img/terraflooring-icons.png); background-size: 13px 127px; float: left;  margin: 0.1em 1em 0 0; padding: 0 }
    footer .info div p {float: left; color: #dc4851; font-size: 1.2em; }
    footer .info div p span {color: #c49b63; }
    footer .info div p span a {color: #c49b63; float: none; font-size: 1em;   }
    footer .info div a {float: left; color: #dc4851; font-size: 1.2em;  }
    footer .info div a:hover {text-decoration: underline;  }

    footer .info div .icon-2 { background-position: 0 -35px }
    footer .info div .icon-3 { background-position: 0 -76px }
    footer .info div .icon-4 { background-position: 0 -115px; height: 12px; }

    footer .info div img { width:31px; height:31px; float: left; margin: -0.8em 1em 0 0; }

    footer .info .p3k { float:right; margin: 29px 0 0 0; opacity: .30 }
    footer .info .p3k:hover { opacity: 1 }
    footer .info .p3k p { float:left; color: #000; font-size: 1.2em; font-weight: 500; margin: 4px 4px 0 0; }
    footer .info .p3k img { float:left; }

    footer .info .sociall { float: left; margin: 0.5% 0 0; clear: both; }


    @media (max-width:1295px) {
      footer .info ul {clear: both;}
      footer .info div.excep {width: auto}
      footer .info div.excep p {width: auto}
    }



/* ---------------- ANIMATIONS    ---------------- */


.animated { 
    -webkit-animation-duration: 0.8s; 
    animation-duration: 0.8s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
} 
.animated2 { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
} 
.animated3 { 
    -webkit-animation-duration: 1.2s; 
    animation-duration: 1.2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
} 
.animated4 { 
    -webkit-animation-duration: 4s; 
    animation-duration: 4s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
} 

@-webkit-keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 


.fadeInDown { 
    -webkit-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}


@-webkit-keyframes fadeOutDown { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    } 
} 
@keyframes fadeOutDown { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
} 
.mouse:hover .fadeInDown { 
    -webkit-animation-name: fadeOutDown; 
    animation-name: fadeOutDown; 
}





@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}


#at4-share {zoom:.7;}

/* new css */
.fa-file-pdf-o
{
	color:#dc4851;
}
.leftcnt
{
	float:left;
	margin-right: 20px;
}
.leftcnt1
{
	float:left;
}
.leftcnt12
{
	float:left;
	margin-right: 20px;
}
.leftcnt13
{
	float:left;
}
.textures ul li a img
{
	height:160px;
}
#products .twoside .more-info li .two .antislip {
   background-position: -54px -454px;
}
#products .twoside .more-info li .two .technology {
   background-position: -53px -697px;
}