/**** @font-face ****/ @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); /* font-family: 'Raleway', sans-serif; */ @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500); /* */ /**** Common Css ****/ #menu:not(.mm-menu) { display: none;} * { margin: 0; padding: 0; text-decoration: none; box-sizing: border-box; outline: none; border: none} body { font-family: 'Roboto', sans-serif; color: #706e6e; font-weight:400} .leftcontent { float: left} .rightcontent { float: right} .clear { clear: both} .disblk { display: block} .center { text-align: center} .ibvm { vertical-align: middle; display: inline-block} .ibvb { vertical-align: bottom; display: inline-block} .ibvt { vertical-align: top; display: inline-block} .pageblock { clear: both} .blockcontainer { display: block; overflow: hidden} .container { max-width: 1100px; width: 100%; margin: 0 auto} #pagewrapper { background: #fff} .pagesection { padding:102px 0} .ltspace { letter-spacing:2px} .pagettl {font-family: 'Raleway', sans-serif; font-weight:800; font-size:40px; line-height:40px; text-transform:uppercase} .pagesubttl {font-family: 'Raleway', sans-serif; font-weight:800; font-size:16px; color:#989797; text-transform:uppercase} .pagetext { font-family: 'Roboto', sans-serif; font-size:16px; font-weight:300; line-height:18px} .knowmore { border-radius: 20px; display: inline-block; font-size: 14px; font-weight: 500; padding:8px 30px; text-transform:uppercase; cursor:pointer} .knowmore a { color:#fff} .pgsubttl18{font-size:18px; font-weight:400; font-family: 'Roboto', sans-serif; color:#3e3d3d; line-height:20px; padding:20px 0 0} .innerbannersection {line-height: 0} .innerbannersection img {width:100%} .padding-top{ padding:20px 0 0} .pagesemittl { font-family: 'Raleway', sans-serif; font-size: 24px; font-weight: 800; line-height: 24px; text-transform: uppercase} /*** index page ***/ .bgecac23 {background:#ecac23} .bg3bc7bb {background:#3bc7bb} .bg121b31 {background:#121b31} .bg444545 {background:#444545} .bg00afef {background:#00afef} .bg008fc3 {background:#008fc3} .bg34495e {background:#34495e} .bgc9cbcb {background:#c9cbcb} .bg757e7e {background:#757e7e} .bgaf7b0b {background:#af7b0b} .bg2a3d6e {background:#2a3d6e} .bgebebeb{background:#ebebeb} .bgeab039{background:#eab039} .bg7ebcb2 {background:#7ebcb2} .bg005952{background:#005952} .bluetext { color:#2a3d6e} .whitetext { color:#ffffff} .texta7a5a5 {color:#a7a5a5} .text343434 {color:#343434} .lightbluetext{color:#00afef} /*header*/ #headerwrapper { box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); padding: 12px 0; z-index: 1; position:relative} .logo { line-height: 0} .navigation {padding: 16px 0 0} .responsivemenu{display:none} .navigation ul { list-style: outside none none} .navigation ul li {display: inline-block; font-family: 'Raleway', sans-serif; font-size: 13px; text-transform: uppercase; font-weight:600; margin:0 4px 0 0; letter-spacing:1px} .activenav{background:#2a3d6e; border-radius:20px} .navigation li.activenav a{color:#fff} .navigation ul li a {color:#2a3d6e; padding:8px 20px; display:block} .dropdown{position:relative} .dropdown::after { background:url("../images/dropdown.png") no-repeat right center; content: ""; height: 7px; position: absolute; right: 3px; top: 12px; width: 10px} .activenav.dropdown::after { background:url("../images/dropdown-active.png") no-repeat right center; right:10px} .dropdown.activenav {padding: 0 7px 0 0} .submenu { background: #ffffff; display: none; left:-16px; position: absolute; text-align: center; top: 31px} .navigation li.activenav .submenu li a { color: #2a3d6e; } .navigation ul li .submenu li { border-bottom: 1px solid; margin: 0; padding: 10px 0; width: 150px} .navigation ul li .submenu li:last-child {border: medium none} .navigation ul li .submenu li :last-child{border-bottom:none} .navigation ul li .submenu a {padding:0} .dropdown:hover .submenu{display:block} /* home banner*/ .bannersliderblk {position: relative} .bannersection {padding:0; position:relative} .bannersection .flex-direction-nav { display:none} .bannersection .flex-control-nav { bottom: 20px; left: auto; right: 8%; width: 90px} .bannersection .flex-control-paging li a { border:1px solid #9f9d9d; background:none; width:10px; height:10px} .bannersection .flex-control-paging li a.flex-active { background:#9f9d9d; border:1px solid #9f9d9d} .bannertext { color: #fff; left: 0; position: absolute; right: 0; text-align: center; top: 33%; text-transform:uppercase} .bannersubttl { font-family: raleway; font-size: 18px; font-weight: 700; word-spacing: 5px; color:#cfcece; display:none} .bannerttl { font-family: raleway; font-size: 48px; font-weight: 800; line-height: 48px; padding: 15px 0} .bannerknwmore { margin: 35px 0 0} /*home abt chirpal*/ .habtvideo { line-height: 0; position: relative; width:45%} .habtvideo iframe {width:100%; height:370px; border:0} .haboutright { padding: 0 0 0 5%; width: 50%} .habttext { margin: 10px 0 20px} .linebaseright {position:relative} .linebaseright::before { background:url("../images/line-1.png") repeat-y 0 0; content: ""; height: 289px; left: -50px; position: absolute; top: -55px; width: 10px; border-left:4px solid #2a3d6e} .linebaseright::after{display:none} .linebasttl {position:relative} .linebasttl::before { background:url("../images/line-2.png") repeat-x 0 0; content: ""; height: 17px; left: -103px; position: absolute; right: 0; top: -55px; width: 187px; border-top:4px solid #2a3d6e} .linebasttl::after { background:url("../images/line-4.png") no-repeat 0 0; content: ""; height: 24px; left: 80px; position: absolute; top: -51px; width: 10px; border-left:4px solid #2a3d6e} .linebasekm {position:relative} .linebasekm::before { background:url("../images/line-2.png") repeat-x 0 0; content: ""; height: 17px; left: -103px; position: absolute; right: 0; bottom: -74px; width: 187px; border-top:4px solid #2a3d6e} .linebasekm::after { background:url("../images/line-5.png") no-repeat 0 0; bottom: -57px; content: ""; height: 30px; left: 80px; position: absolute; width: 10px; border-left:4px solid #2a3d6e} /* home product */ .hproductslider .bx-wrapper .bx-pager {display:none} .hproductslider .bx-wrapper .bx-prev {left:0} .hproductslider .bx-wrapper .bx-next { right:0} .probanres{display:none} .hproductdes { padding: 80px 0 20px; text-align: center} .hproductttl { padding: 2px 0 6px} .proslidertext {width:50%} .prosliderimg {width:50%; line-height:0} .hourproductsliderwrp {clear:both; overflow:hidden} .productdestext { float: right; margin: 20% 50px; width: 500px; color:#fff; position:relative} .productdestext .pagetext { padding: 10px 0 20px; min-height:155px} .productdestext .pagettl { padding: 3px 0 0} .hproductno { color: rgba(255, 255, 255, 0.5); font-family: roboto; font-size: 110px; font-weight: 800; letter-spacing: 0; line-height: 110px; position: absolute;right:10%; top: 10%} .petresinno {color:rgba(0, 89, 82, 0.5)} .productdestext::after { background:url("../images/product-lineimg4.png") repeat-y 0 0; border-left: 4px solid #ecac23; content: ""; height: 352px; position: absolute; right: -130px; top: -55px; width: 4px; z-index:1} .productlinettl { position: relative} .productlinettl::after { background:url("../images/product-lineimg3.png") repeat-x 0 0; border-top: 4px solid #ecac23; content: ""; height: 15px; left: 70px; position: absolute; top: -55px; width: 555px;z-index:1} .productlinettl::before { background:url("../images/product-lineimg1.png") no-repeat 0 0; border-left: 4px solid #ecac23; content: ""; height: 18px; left: 66px; position: absolute; top: -55px; width: 10px} .productlineknmore {position:relative} .productlineknmore::after { background:url("../images/product-lineimg3.png") repeat-x 0 0; border-top: 4px solid #ecac23; bottom: -79px; content: ""; height: 15px; left: 70px; position: absolute; width: 555px; z-index:1} .productlineknmore::before { background:url("../images/product-lineimg2.png") no-repeat 0 0; border-left: 4px solid #ecac23; bottom: -64px; content: ""; height: 23px; left: 66px; position: absolute; width: 10px} .bg34495e .productdestext::after,.bg34495e .productlinettl::after,.bg34495e .productlinettl::before,.bg34495e .productlineknmore::after, .bg34495e .productlineknmore::before{ border-color:#3bc7bb} .bgc9cbcb .productdestext::after,.bgc9cbcb .productlinettl::after,.bgc9cbcb .productlinettl::before,.bgc9cbcb .productlineknmore::after, .bgc9cbcb .productlineknmore::before{ border-color:#2a3d6e} .bgecac23 .productdestext::after,.bgecac23 .productlinettl::after,.bgecac23 .productlinettl::before,.bgecac23 .productlineknmore::after, .bgecac23 .productlineknmore::before{ border-color:#2a3d6e} .bg7ebcb2 .productdestext::after,.bg7ebcb2 .productlinettl::after,.bg7ebcb2 .productlinettl::before,.bg7ebcb2 .productlineknmore::after, .bg7ebcb2 .productlineknmore::before{ border-color:#005952} /* home beyondfilms */ .beyondfilmssection .bx-controls-direction {display:none} .beyondfilmssection .bx-wrapper .bx-pager { background: #2a3d6e; bottom: -17px; left: 20px; padding: 15px 0 5px; width: 100px; z-index: 51} .beyondfilmssection .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {background:#fff !important} .beyondfilmssection .bx-wrapper .bx-pager.bx-default-pager a{width:8px; height:8px; background:#6a789a; margin:0 10px} .hbeyoundsemittl { color: #2a3d6e; font-family: raleway; font-size: 25px; font-weight: 800; line-height: 25px; text-transform: uppercase; padding:175px 0 0} .hbeyondfilmclider { position: relative} .hbeyoundslider {display:block; overflow:hidden; clear:both} .hbeyondfilmswrap {left: 37%; position: absolute; top: 22%; width: 100%; z-index:99} .beyoudimg { line-height: 0; position: relative; width:37%} .hbeyondright { padding: 0 0 0 5%; width: 60%; position:relative} .beyoudrightdes { padding: 0; width: 58%} .beyoudno { border-radius: 20px; color: #fff; font-family: roboto; font-size: 20px; font-weight: bold; left: 15px; line-height: 40px; position: absolute; text-align: center; top: 15px; width: 40px} .hbeyondright::after { background:url("../images/line-1.png") repeat-y 0 0; border-left: 4px solid #2a3d6e; content: ""; display: block; height: 331px; left: -51px; position: absolute; top: -40px; width: 100px} .bflinettl::before { background:url("../images/line-2.png") repeat-x 0 0; border-top: 4px solid #2a3d6e; content: ""; height: 17px; left: -51px; position: absolute; right: 0; top: -44px; width: 218px} .bflinettl::after { background:url("../images/line-4.png") no-repeat 0 0; border-left: 4px solid #2a3d6e; content: ""; height: 24px; left: 164px; position: absolute; top: -44px; width: 10px;} .hbeyondright::before { background:url("../images/line-2.png") repeat-x 0 0; border-top: 4px solid #2a3d6e; bottom: -261px; content: ""; height: 10px; left: -47px; position: absolute; width: 218px} .bflinemainttl { position: relative} .bflinemainttl::after {background: url("../images/line-5.png") no-repeat 0 0;border-left: 4px solid #2a3d6e; bottom: -247px; content: ""; height: 25px; left: 112px; position: absolute; width: 20px} /*managementsection*/ .managementsection {background:url(../images/manegement-bg.jpg) no-repeat center center; text-align:center; padding:102px 0 40px; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size:cover; background-size: cover;} .managementsection .pagetext {padding:15px 0 0} .managementsection .pagesubttl { color: #9abad4} .managttl { color: #fff; font-family: "Raleway",sans-serif; font-size: 14px; font-weight: bold; line-height: 14px; padding: 5px 0 3px; text-transform: uppercase; letter-spacing:1px} .managsubttl { color: #fff; font-family: raleway; font-size: 12px; font-weight: 500; line-height: 16px;letter-spacing:1px; min-height:35px} .hmanagmentwrap { margin: 40px 0; position:relative} .memberwrap { border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-right: 1px solid rgba(255, 255, 255, 0.25); display: inline-block; margin: 0 auto 0 -4px; text-align: center; width: 25%; position:relative; vertical-align:top} .memberwrap::after { background: rgba(255, 255, 255, 0.75); border-radius: 20px; content: ""; height: 6px; position: absolute; right: -3px; top: -3px; width: 6px} .memberwrap::before { background: rgba(255, 255, 255, 0.75); border-radius: 20px; content: ""; height: 6px; position: absolute; right: -3px; bottom: -3px; width: 6px} .memberwrap:last-child { border-right: 0 none} .memberwrap:last-child::after, .memberwrap:last-child::before{ display:none} .memberwrap:nth-child(4n) { border-right:none} .memberwrap:nth-child(4n)::after { display:none} .memberwrap:nth-child(n+5) .memberblk {padding: 45px 0 10px} .memberwrap:nth-child(n+5) {border-bottom:none} .hmanagmentwrap::after { background: rgba(255, 255, 255, 0.75); border-radius: 20px; bottom: 0; content: ""; height: 6px; left: -3px; margin: auto; position: absolute; top: -10px; width: 6px} .memberblk{padding:10px 0 35px} .memberblk{position:relative; overflow:hidden} .memberinfowrap {background: rgba(0, 0, 0, 0.8); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999; display:none} .memberinfo {background:#fff; border: 7px solid #525252; left: 0; margin: 0 auto; position: absolute; right: 0; top: 10%; max-width: 500px; width:80%; } .memberinfo .pagetext{font-size:14px; line-height:16px; margin:0 0 20px; padding:0} .memmoreinfodes { padding:35px 20px 30px} .memredmore {background: #fff; border-radius: 15px; display: inline-block; font-size: 11px;font-weight: 400; padding:4px 0; width:80px; margin:0 auto;cursor:pointer} .memcloes {position: absolute; right: 15px; top:10px; cursor:pointer} .memberinfoup {margin-top:0 !important} .memmoreinfodes .managttl, .memmoreinfodes .managsubttl{color:#343434} /*globalsection*/ .globalsection .pagetext {padding:15px 0 0; color:#3f3e3e } .hglobalfootprintimg {padding: 80px 0 0; position:relative} .hglobalfootprintimg img {width:100%} .countryname { background:#00AFF0; border-radius: 5px; color: #ffffff; display: none; font-size: 14px; font-weight: 400; padding: 2px 4px 1px; position:relative; z-index:2} .map-pointer{cursor:pointer} .gpcountrywrap{position:absolute;} .gpcountrywrap img { position: relative; z-index: 1; } .gpcountrywrap:hover .countryname {display: block; position: absolute; top:-22px} .gpi-newzealand { bottom:45px;right: 45px} .gpi-newzealand:hover .countryname { left: -42px; width:90px} .gpi-australia { bottom: 110px;right: 175px} .gpi-australia:hover .countryname { left: -24px} .gpi-korea {bottom: 306px; right: 184px} .gpi-korea:hover .countryname{ left: -13px} .gpi-malaysia {bottom: 200px; right: 267px} .gpi-malaysia:hover .countryname { left: -28px} .gpi-srilanka {bottom: 205px; right: 328px} .gpi-srilanka:hover .countryname { left: -22px} .gpi-malaysia {bottom: 198px; right: 265px} .gpi-malaysia:hover .countryname { left: -22px} .gpi-bangladesh {bottom: 260px; right: 298px} .gpi-bangladesh:hover .countryname { left: -35px} .gpi-nepal {bottom: 278px; right:317px} .gpi-nepal:hover .countryname{ left: -15px} .gpi-russia {top:209px; right:311px} .gpi-russia:hover .countryname { left: -18px} .gpi-oman{bottom:239px; right:410px} .gpi-oman:hover .countryname { left: -10px} .gpi-yemen{bottom:230px; right:435px} .gpi-yemen:hover .countryname { left: -10px} .gpi-uae {bottom:254px; right:400px} .gpi-uae:hover .countryname { left: -10px} .gpi-iran {bottom:280px; right:396px} .gpi-iran:hover .countryname { left: -10px} .gpi-bahrain { bottom: 263px; right: 421px} .gpi-bahrain:hover .countryname { left: -21px} .gpi-saudi-arabia {bottom:251px; right:447px} .gpi-saudi-arabia:hover .countryname { left: -39px; width: 94px} .gpi-jordan { bottom: 283px; right: 467px} .gpi-jordan:hover .countryname { left: -21px} .gpi-sudan { bottom: 242px; right: 482px} .gpi-sudan:hover .countryname { left: -15px} .gpi-egypt { bottom: 268px; right: 485px} .gpi-egypt:hover .countryname { left: -15px} .gpi-southafrica {bottom:84px; right:498px} .gpi-southafrica:hover .countryname {left: -40px; width: 95px} .gpi-namibia {bottom:100px; right:522px} .gpi-namibia:hover .countryname {left: -21px;} .gpi-zimbabwe {bottom:102px; right:484px} .gpi-zimbabwe:hover .countryname {left: -30px} .gpi-tanzania {bottom:151px; right:461px} .gpi-tanzania:hover .countryname {left: -22px} .gpi-malawi {bottom:138px; right:470px} .gpi-malawi:hover .countryname {left: -22px} .gpi-kenya {bottom:174px; right:462px} .gpi-kenya:hover .countryname {left: -18px} .gpi-mauritius {bottom:126px; right:395px} .gpi-mauritius:hover .countryname {left: -26px} .gpi-uganda {bottom:178px; right:480px} .gpi-uganda:hover .countryname {left: -22px} .gpi-argentina {bottom:67px; left:324px} .gpi-argentina:hover .countryname {left: -21px} .gpi-chile {bottom:88px; left:299px} .gpi-chile:hover .countryname {left: -13px} .gpi-brazil {bottom:160px; left:375px} .gpi-brazil:hover .countryname {left: -12px} .gpi-colombia {bottom:202px; left:284px} .gpi-colombia:hover .countryname {left: -23px} .gpi-peru {bottom:148px; left:277px} .gpi-peru:hover .countryname {left: -11px} .gpi-usa {top:275px; left:198px} .gpi-usa:hover .countryname {left: -45px; width:108px} .gpi-canada {top:215px; left:170px} .gpi-canada:hover .countryname {left: -23px;} .gpi-mexico {top:342px; left:195px} .gpi-mexico:hover .countryname {left: -17px} .gpi-guatenala {top:374px; left:232px} .gpi-guatenala:hover .countryname {left: -30px} .gpi-honduras {left: 253px; top: 374px} .gpi-honduras:hover .countryname {left: -27px} .gpi-salvador {left: 246px; top: 394px} .gpi-salvador:hover .countryname {left: -36px; width: 84px} .gpi-costarica {left: 258px; top: 385px} .gpi-costarica:hover .countryname {left: -32px; width: 76px} .gpi-senegal {bottom: 223px; left: 470px} .gpi-senegal:hover .countryname {left: -21px} .gpi-ivorycoast {bottom: 202px; left: 490px} .gpi-ivorycoast:hover .countryname {left: -31px; width: 78px} .gpi-togo {bottom: 207px; left: 511px} .gpi-togo:hover .countryname {left: -12px} .gpi-nigeria {bottom: 204px; left: 534px} .gpi-nigeria:hover .countryname {left: -18px} .gpi-germany {top: 255px; left: 539px} .gpi-germany:hover .countryname {left: -26px} .gpi-poland {top: 242px; left: 566px} .gpi-poland:hover .countryname {left: -14px} .gpi-spain {top: 288px; left: 498px} .gpi-spain:hover .countryname {left: -15px} .gpi-france {top: 278px; left: 514px} .gpi-france:hover .countryname {left: -21px} .gpi-belgium {top: 263px; left: 514px} .gpi-belgium:hover .countryname {left: -21px} .gpi-netherland {top: 249px; left: 523px} .gpi-netherland:hover .countryname {left: -32px} .gpi-uk {top: 247px; left: 508px} .gpi-uk:hover .countryname {left: -8px;} .gpi-italy {top: 285px; left: 555px} .gpi-italy:hover .countryname {left: -11px} .gpi-tunisia {top:302px; left: 533px} .gpi-tunisia:hover .countryname {left: -22px} .gpi-algeria {top:321px; left:520px} .gpi-algeria:hover .countryname {left: -19px} .gpi-slovenia {left: 567px; top: 271px} .gpi-slovenia:hover .countryname {left: -23px} .gpi-turkey {left: 617px; top: 293px} .gpi-turkey:hover .countryname {left: -15px} .gpi-ukraine {left: 614px; top: 260px} .gpi-ukraine:hover .countryname {left: -20px} .glftchdot { width: 6px; height: 6px; background: #2a3d6e; border-radius: 50%; margin: 0 auto} .glftchline { width: 1px; height: 204px; background: #2a3d6e; margin: 0 auto} .glftchlogo { border-radius: 50%; margin: 0 auto -15px} .indialocname{font-size:13px; color:#000; padding:2px 0 0} .indiawrap { position: absolute; right: 304px; top:43px} .hglobalfootprintimgres{display:none} /*hgetintouchsection*/ .hgetintouchsection{position: relative} .getiniframe { border-top: 1px solid #ababab} .getiniframe iframe {width:100%; height:560px; border:0} .getiniframe .gm-style .place-card-large{display:none !important} .hgetintouchwrap { padding: 45px 25px; position: absolute; top: 0; width: 330px; margin:102px 0 0} .hgitttl { font-family: raleway; font-size: 30px; font-weight: 800; letter-spacing: 2px; line-height: 30px; padding: 0 0 15px; text-transform: uppercase; position:relative} .hgitsubttl { color: #fff; font-family: raleway; font-size: 16px; font-weight: bold; letter-spacing: 2px; padding: 0 0 5px; text-transform: uppercase} .hgitenquire { border-radius: 20px; display: inline-block; font-size: 14px; font-weight: 400; margin: 20px 0 0; padding:10px 30px; text-transform: uppercase} .hgitcallblk { padding: 10px 0 0; vertical-align: middle} .hgitcallimg {line-height: 0} .hgetintouchwrap .pagetext {letter-spacing: 1px; line-height: 18px} .hgetintouchblk {position:relative} .hgetintouchblk::after { border-left: 3px solid #2a3d6e; content:""; height:390px; position:absolute; right:-148px; top:-65px; width: 100px} .hgitttl::after { border-top: 3px solid #2a3d6e; content: ""; height: 25px; position: absolute; right: -45px; top: -65px; width: 190px} .hgitttl::before { border-left: 3px solid #2a3d6e; content: ""; height: 20px; left: 134px; position: absolute; top: -65px; width: 10px} .hgitenquire::before { border-left:3px solid #2a3d6e; content:""; height:20px; left:134px; position: absolute; bottom:-65px; width:10px} .hgitenquire::after { border-top: 3px solid #2a3d6e; content:""; height:25px; position:absolute; right:-45px; bottom:-90px; width: 190px} /* footer */ .footersection {color: #bfbfbf; font-size: 13px; font-weight: 600; padding: 40px 0 25px; text-transform: uppercase; letter-spacing:1px} .ddlogotext {padding: 6px 3px 0 0} .copyrighttext {padding: 4px 0 0 0;} .gm-style .place-card-large{display:none} /*** about us page ***/ .nav {position: -webkit-sticky; top: 45px; z-index: 1;} .sticky {position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0} .abtnavigation {border-bottom: 1px solid #c4c4c4; padding: 20px 0 10px; text-align:center; background:#fff} .abtlink { color: #767575; display: block; font-family: raleway; font-size: 12px; font-weight: 600; letter-spacing: 1px; cursor:pointer} .abtlinkblk { display: inline-block; text-align: center; vertical-align: top; margin:0 5px 0 0; position:relative} .abtlinkblk:last-child { margin: 0} .abtimg{ width:77px; height:42px; margin:auto} .abtlinkname { background: none; margin: 5px 0 0; padding: 6px 10px 5px; text-transform:uppercase} .linkactive .abtlinkname { background: #00aff0 none repeat scroll 0 0; border-radius: 16px; color: #ffffff} .expansionlink {background:url(../images/subnavicon/expansion.png) no-repeat center top} .linkactive .expansionlink {background:url(../images/subnavicon/expansion-active.png) no-repeat center top} .globallink {background:url(../images/subnavicon/global.png) no-repeat center top} .linkactive .globallink {background:url(../images/subnavicon/global-active.png) no-repeat center top} .commitmentlink {background:url(../images/subnavicon/commitment.png) no-repeat center top} .linkactive .commitmentlink {background:url(../images/subnavicon/commitment-active.png) no-repeat center top} .milestoneslink {background:url(../images/subnavicon/milestones.png) no-repeat center top} .linkactive .milestoneslink {background:url(../images/subnavicon/milestones-active.png) no-repeat center top} .abtchirpalgrplink {background:url(../images/subnavicon/abtchiripal.png) no-repeat center top} .linkactive .abtchirpalgrplink {background:url(../images/subnavicon/abtchiripal-active.png) no-repeat center top} .managementlink {background:url(../images/subnavicon/management.png) no-repeat center top} .linkactive .managementlink {background:url(../images/subnavicon/management-active.png) no-repeat center top} .policieslink {background:url(../images/subnavicon/policies.png) no-repeat center top} .linkactive .policieslink {background:url(../images/subnavicon/policies-active.png) no-repeat center top} .abtchirpalsection {padding: 50px 0 80px} .abtchirpalsection .knowmore {margin:25px 0 0} .commitmentsection{background:url(../images/commitment-bg.jpg) no-repeat center center / cover; border-top:1px solid #ababab; border-bottom:1px solid #ababab;} .ourcommisubttl { color: #343434; font-family: raleway; font-size: 20px; font-weight: 800; letter-spacing: 2px; line-height: 22px; padding: 20px 0 0; text-transform: uppercase} .commitmentno { background: #00a0e3; border-radius: 20px; color: #ffffff; font-family: roboto; font-weight: bold; line-height: 40px; text-align: center; width: 40px; margin:0 10px 0 0} .commitmenttext { width: 86%} .commitmenttext { color: #484848; font-family: raleway; font-size: 16px; font-weight: 600; line-height: 20px} .commileft { border-right: 1px solid #a1a1a1; margin: 0 4% 0 0; width: 48%} .commileft:last-child {border-right: none; margin:0} .commitmentblk {margin: 0 0 25px} .commitmentwrp {margin: 50px 0 10px} .expanstionplansection {background: #ebeaea; padding:70px 0} .expdes { margin: 0 8% 0 0; width: 54%} .expanimg{line-height:0; width:38%; margin:0 0 0 -4px} .expanimg img{width:100%} .expanstionplansection .knowmore {margin:25px 0 0} /**** beyond manufacturing-facility ****/ .beyondsublinkblk { display: inline-block; position:relative} .beyondnavigation { border-bottom: 1px solid #c4c4c4; padding: 20px 0 10px; text-align: center} .beyondsubname { border-radius: 20px; color: #767575; margin: 5px; padding: 6px 15px 5px} .beyondlink { color: #767575; display: block; font-family: raleway; font-size: 12px; font-weight: 600; letter-spacing: 1px; cursor:pointer; text-transform:uppercase} .linkactive .beyondsubname {background: #00afef; color:#fff} .beyondsublinkimg{width:77px; height:48px; margin:auto} .manflinkimg{background:url(../images/subnavicon/manufacturing.png) no-repeat center top} .linkactive .manflinkimg{background:url(../images/subnavicon/manufacturing-active.png) no-repeat center top} .qulilinkimg{background:url(../images/subnavicon/quality.png) no-repeat center top} .linkactive .qulilinkimg{background:url(../images/subnavicon/quality-active.png) no-repeat center top} .csrlinkimg{background:url(../images/subnavicon/csr.png) no-repeat center top} .linkactive .csrlinkimg{background:url(../images/subnavicon/csr-active.png) no-repeat center top} .manfacturingsection{padding:60px 0} .manbopetsection{background:#ebeaea; padding:50px 0; overflow:hidden; display:block} .boppcapacity {border-bottom: 1px solid #c4c4c4; clear: both; margin: 0 0 50px; overflow: hidden; padding: 0 0 50px} .manbopetdes {width: 50%} .manbopetimg{line-height:0; text-align:right;width: 46%} .manbopetimg img{width:100%} .bopetttl{margin:25px 0 0} .capacitylist{padding:25px 0 20px} .capacitylist li { background:url("../images/star-icon.png") no-repeat left 5px; color: #3e3d3d; font-family: roboto; font-size: 16px; font-weight: 400; line-height: 18px; list-style: outside none none; padding: 0 0 10px 20px} .bopetcapacity { clear: both; display: block; overflow: hidden; padding: 0 0 12px} .bopeboldtext { color: #3e3d3d; font-family: roboto; font-size: 16px; font-weight: 500; line-height: 18px; width:50%} .bopetext { color: #3e3d3d; font-size: 16px; font-weight: 400; line-height: 18px; width:50%} /**** beyond-quality-assurance ****/ .qualitysection {padding: 60px 0 100px} .qualityassleft{width:43%} .qualityassright{width:52%} .certificate {margin: 25px 13px 0 -4px; width:48%} .certificate:last-child{margin: 0px 0 0 -4px} .certificate img {width: 200%} /**** beyond-sustainability-csr ****/ .conservationsection{background:#ebeaea;} .csrdesttl{padding:60px 0 } .csrsubttl{padding:25px 0 0} .waterconservation{width:50%; background:#ebeaea; padding:50px 0 30px} .energyconservation{width:50%; background:#e2e4e4; padding:50px 0 30px} .waterconright{width:550px} .energyconleft{width:520px; padding:0 0 0 30px} .conservationttl { font-size: 18px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase} .Conservationlist{padding:10px 0 0} .Conservationlist li { background:url("../images/star-icon.png") no-repeat left 10px; color: #3e3d3d; font-family: roboto; font-size: 16px; font-weight: 400; line-height: 30px; list-style: outside none none; padding: 0 0 6px 20px} .conservationsection .pagetext { color: #3e3d3d; font-size: 16px; line-height: 25px; padding: 10px 0 2px} .comappsection{padding:60px 0 10px} .comappwrap { padding: 40px 0 0} .comeventimg {line-height:0; width:50%} .comeventtext {width:50%} .comappttl{font-family:raleway; font-size:16px; line-height:16px; color:#3e3d3d; letter-spacing:1px; text-transform:uppercase; font-weight:800; padding:70px 0 10px } .comeventblk { clear: both; display: block; overflow: hidden} .blooddes { padding: 0 3% 0 0} .training { padding: 0 0 0 3%} /*** Films Subnavigation ***/ .filmssubnav{border-bottom: 1px solid #c4c4c4; overflow:hidden; display:block; clear:both} .filmsnavblk {border-bottom: 5px solid transparent; border-right: 1px solid #c4c4c4; margin: 00; float:left; padding: 15px 0 10px; text-align: center; width: 20%} .filmsnavblk:last-child {border-right: medium none} .filmsnavno { background: #aeaeae; border-radius: 20px; color: #ffffff; font-family: roboto; font-size: 16px; font-weight: 600; line-height: 35px; margin: 0 5px 0 0; width: 35px} .filmsnavname { color: #605f5f; font-family: roboto; font-size: 18px; font-weight: 400; line-height: 18px} .bopp-active .filmsnavno {background:#00afef} .bopp-active .filmsnavname{color:#00afef} .bopp-active.filmsnavblk{border-bottom:5px solid #00afef} .boppblk:hover .filmsnavno {background:#00afef} .boppblk:hover .filmsnavname{color:#00afef} .boppblk.filmsnavblk:hover {border-bottom:5px solid #00afef} .bopeta-ctive .filmsnavno {background:#34495e} .bopeta-ctive .filmsnavname{color:#34495e} .bopeta-ctive.filmsnavblk{border-bottom:5px solid #34495e} .bopetblk:hover .filmsnavno {background:#34495e} .bopetblk:hover .filmsnavname{color:#34495e} .bopetblk.filmsnavblk:hover {border-bottom:5px solid #34495e} .metallised-active .filmsnavno {background:#6b6b6b} .metallised-active .filmsnavname{color:#6b6b6b} .metallised-active.filmsnavblk{border-bottom:5px solid #6b6b6b} .metallisedblk:hover .filmsnavno {background:#6b6b6b} .metallisedblk:hover .filmsnavname{color:#6b6b6b} .metallisedblk.filmsnavblk:hover {border-bottom:5px solid #6b6b6b} .coated-active .filmsnavno {background:#ecac23} .coated-active .filmsnavname{color:#ecac23} .coated-active.filmsnavblk{border-bottom:5px solid #ecac23} .coatedblk:hover .filmsnavno {background:#ecac23} .coatedblk:hover .filmsnavname{color:#ecac23} .coatedblk.filmsnavblk:hover {border-bottom:5px solid #ecac23} .petresin-active .filmsnavno {background:#009237} .petresin-active .filmsnavname{color:#009237} .petresin-active.filmsnavblk{border-bottom:5px solid #009237} .petresinblk:hover .filmsnavno {background:#009237} .petresinblk:hover .filmsnavname{color:#009237} .petresinblk.filmsnavblk:hover {border-bottom:5px solid #009237} /** bopet-films page **/ .filmproductdes {width: 53%} .filmproductimg {width: 43%} .bopetimg { line-height: 0; padding: 0 0 8px} .bopetimg img {width:100%} .filmssubttl{font-family:raleway; font-size:18px; line-height:18px; color:#2f2f2f; font-weight:800; text-transform:uppercase; padding: 40px 0 20px} .slpfeaturelist li { background:url("../images/slpfeaturebullet.png") no-repeat left 8px; color: #706e6e; font-size: 16px; font-weight: 400; line-height: 22px; list-style: outside none none; padding: 0 0 15px 20px} .bopetfilmsdes { border-bottom: 1px solid #d3d2d2; clear: both;overflow: hidden; padding: 60px 0} .productttlwrap {padding: 65px 0} .productttl{ font-size:18px; line-height:18px; color:#fff; text-transform:uppercase; padding:12px 15px; font-family:raleway; font-weight:700; letter-spacing:1px; clear:both; overflow:hidden} .profilters { margin: 0 2% 2% 0; width: 27%} .prodescription { width: 71%} .proname, .pronameblk { width: 28%} .prodes, .prodesblk { width: 72%} .productdes {overflow: hidden; padding: 0 0 5%} .promainlink { background: url("../images/filters-icon.png") no-repeat right 7px; border-bottom: 1px solid #d3d2d2; color: #3e3e3e; width:98%; font-family: raleway; font-size: 18px; font-weight: 700; margin: 25px 0 0; padding: 0 0 7px; text-transform: uppercase; letter-spacing:1px} .checkboxblk {padding: 15px 0 0} .checkboxblk label { color: #706e6e; font-family: roboto; font-size: 16px; font-weight: 400; line-height: 16px; padding: 0 0 0 12px} .productdesblk { border-bottom: 1px solid #e1e0e0; display: block; overflow: hidden; padding: 30px 15px} .productdesblk:last-child {border: 0 none} .datasheet { border-radius: 20px; color: #ffffff; font-family: roboto; font-size: 14px; font-weight: 400; line-height: 14px; padding: 12px 20px 10px; text-align: center; text-transform: uppercase; display:inline-block; cursor:pointer} .prodestext { color: #6f6f70; font-size: 16px; font-weight: 400; width:60%} .pronameblk { font-family: raleway; font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 18px; text-transform: uppercase} .filters-responsive{display:none} /*** career page ***/ .careersection {padding: 70px 0} .careerdes{width:47%} .opportunities{width:44%} .opportunitiblk { border: 2px solid #637195} .opportunitittl { background: #384a78; color: #ffffff; font-family: raleway; font-size: 24px; font-weight: 800; letter-spacing: 1px; line-height: 24px; padding: 10px 25px; text-transform: uppercase} .opportunitides {padding: 30px 25px;} .oppttl{font-family:raleway; font-weight:800; font-size:18px; line-height:18px; margin:0 0 20px} .oppformblk { margin: 0 0 20px} .oppformname {color: #4c4a4a; font-size: 16px; font-weight: 400; width:30%} .oppformname span {color:red; font-weight:700} .oppformfild { width: 68%} .oppselect { background:url("../images/select.jpg") no-repeat right center; border: 1px solid #b0b0b0; border-radius: 5px; padding: 7px 10px; width: 100%; color: #4c4a4a; font-size: 16px; appearance:none; -moz-appearance:none; -webkit-appearance:none} .oppselect option{padding:0 0 0 10px} .oppinput { border: 1px solid #b0b0b0; border-radius: 5px; padding: 7px 10px; width: 100%; color: #4c4a4a; font-size: 16px} .oppbutton { border-radius: 20px; color: #ffffff; font-size: 14px; font-weight: 400; padding: 8px 10px; text-transform: uppercase; width: 110px; cursor:pointer} .oppbuttonblk { display: inline-block; margin: 0 15px 0 0} .oppbuttonblk:last-child { margin: 0} .oppbuttonwrp { margin: 0 0 0 31%} .appdestext { color: #4c4a4a; font-size: 13px; font-weight: 400; line-height: 16px; padding: 5px 0 15px} .captchablk { border: 1px solid #b0b0b0; border-radius: 5px; padding: 10px 0; text-align: center; vertical-align: middle; width: 180px} /**** contact page ****/ .contactaddres{width:50%} .contactform{width:48%} .contactifream iframe{width:100%; height:386px; border:0} .contactsection {padding: 70px 0} .contmainttl {font-family: raleway; font-size: 30px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding:0 0 20px 0} .contsubttl {color: #3e3d3d; font-family: raleway; font-size: 16px; font-weight: 700; letter-spacing: 1px;line-height: 16px; padding: 0 0 10px; text-transform:uppercase} .contactaddres .pagetext { color: #3e3d3d; line-height: 18px} .addimg {line-height: 0; padding:0 5px 0 0} .addreswrap {padding: 15px 0 0} .plantoffttl {padding: 40px 0 10px} .addtext {color: #3e3d3d;font-weight: 400} .addtext a {color: #3e3d3d} .contfildname {color: #4c4a4a; font-size: 16px; font-weight: 400; width:26%} .contfildname span {color:red; font-weight:700} .contfild{width:55%} .contactformttl { border-bottom: 2px solid; font-size: 24px; font-weight: 400; line-height: 24px; padding: 0 0 10px} .contactformdes { margin: 20px 0} .contformfildblk { margin: 0 0 20px} /*** about us page mileston section***/ .milestonesection{padding:60px 0} .milestonewrap{padding:380px 0; position:relative} .milestonewrap::before { background: #c7c7c7; border-radius: 3px; bottom: 0; content: ""; height: 6px; left: 0; margin: auto; position: absolute; top: 0; width: 6px} .milestonewrap::after { background: #c7c7c7; border-radius: 3px; bottom: 0; content: ""; height: 6px; right: 0; margin: auto; position: absolute; top: 0; width: 6px} .milestoneline{background:#c7c7c7; width:100%; height:1px; position:absolute; top:0; bottom:0; margin:auto} .milestonegrp {display: inline-block; margin: 0 0 0 -4px} .milestonblk {display: inline-block; margin: 0 12px; padding:0; position:relative} .milestonyear {border: 4px solid #d0d0d0; border-radius: 50px; box-shadow: 2px 1px 3px #737373 inset; color: #ffffff; font-family: roboto; font-size: 15px; font-weight: 500; height:80px; line-height:70px; width:80px; position:relative} .milestondes { left: -35px; position: absolute; text-align: center; width:165px} .milestontext{border-bottom: 1px solid #d9d9d9; color: #706e6e; font-size: 14px; line-height: 20px; padding: 0 0 5px; margin:5px 0 0} .milestontext:last-child {border: 0 none} .toppart .milestonyear::after { background: #c7c7c7; content: ""; height: 30px; left: 35px; position: absolute; top: -33px; width: 2px} .toppart .milestonyear::before { content: ""; height: 50px; left:12px; position: absolute; top: -82px; width: 50px} .bottompart .milestonyear::after { background: #c7c7c7; content: ""; height: 30px; left: 35px; position: absolute; bottom: -33px; width: 2px} .bottompart .milestonyear::before { content: ""; height: 50px; left:12px; position: absolute; bottom: -82px; width: 50px} .toppart .milestonyear.year2009::before{ background:url("../images/milestone/2011.png") no-repeat center center} .toppart .milestonyear.year2013::before{ background:url("../images/milestone/2013.png") no-repeat center center} .toppart .milestonyear.year2015::before{ background:url("../images/milestone/2015.png") no-repeat center center} .toppart .milestonyear.year2017::before{ background:url("../images/milestone/2017.png") no-repeat center center} .toppart .milestonyear.year2020::before{ background:url("../images/milestone/2013.png") no-repeat center center} .toppart .milestondes {bottom:170px} .bottompart .milestonyear.year2012::before{ background:url("../images/milestone/2012.png") no-repeat center center} .bottompart .milestonyear.year2014::before{ background:url("../images/milestone/2014.png") no-repeat center center} .bottompart .milestonyear.year2016::before{ background:url("../images/milestone/2016.png") no-repeat center center} .bottompart .milestonyear.year2018::before{ background:url("../images/milestone/2018.png") no-repeat center center} .bottompart .milestonyear.year2019::before{ background:url("../images/milestone/2012.png") no-repeat center center} .bottompart .milestondes { top:170px} .year2018{ background: #00afef; /* Old browsers */ background: -moz-linear-gradient(left, #00afef 50%, #eab039 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #00afef 50%,#eab039 50%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #00afef 50%,#eab039 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00afef', endColorstr='#eab039',GradientType=1 ); /* IE6-9 */} /*********************/ /*applications flexisel slider */ #flexisel{display:none} .clearout {clear:both} .nbs-flexisel-container { position:relative; max-width:100%; margin:0 auto} .nbs-flexisel-ul {position:relative; width:99999px; margin:0px; padding:0px; list-style-type:none; text-align:center} .nbs-flexisel-inner { overflow:hidden; float:left; width:94%; margin:0 3%} .nbs-flexisel-item {float:left; margin:0px; padding:0px; cursor:pointer; position:relative; line-height:0px} .nbs-flexisel-item img { width: 100%; cursor: pointer; position: relative} /*** Navigation ***/ .nbs-flexisel-nav-left,.nbs-flexisel-nav-right { width: 20px; height: 27px; position: absolute; cursor: pointer; z-index: 100; opacity: 0.5} .nbs-flexisel-nav-left { left: 10px; background: url(../images/applications-previous.png) no-repeat} .nbs-flexisel-nav-right { right: 5px; background: url(../images/applications-next.png) no-repeat;} .applicationswrapper{ border-bottom: 1px solid #d3d2d2; margin:50px 0 0; padding:0 0 70px} .applications-slider{ display:block; overflow:hidden; margin:50px 0 0} .applicationsblk { line-height: 0; margin: 0 6%; position:relative; overflow:hidden} .applicationsimg{border: 3px solid #cbcbcb} .applicationstext {position:absolute; top:0; left:0; right:0; text-align:center; display:none} .applicationsblk .applicationstext {display:block; background:rgba(000, 000, 000,0.7); width:100%;position:absolute; left:0; top:0; height:200px; padding:10px 0;font-size:14px; line-height:18px; margin-top:200px; padding:70px 0 0} .applicationstext {-webkit-transition: all 0.7s ease; transition: all 0.7s ease; position:relative; color:#fff; font-size:16px; line-height:20px; text-transform:uppercase; text-align:center; margin:20% 0 0} .applicationsblk:hover .applicationstext {margin-top:0 !important} .applicationstextup {margin-top:0 !important} .treatmentscrollbar {height: 300px; overflow: auto; margin:10px 0 0; padding: 0 0 30px} .filterclose{display:none} .innersubnavheading{display:none} .innerbopetimg {display: inline-block; width: 49%; vertical-align:top} .innerbopetimg:last-child {margin:0 0 0 0.9%} .bold{font-weight:500} /*** scrollToTop ***/ .scrollToTop{ width:40px; height:40px; padding:10px; position:fixed; bottom:50px; right:40px; display:none; background: url('../images/to-top.png') no-repeat 0px 0; z-index:99} .boppttl {color:#00afef} .bopetttl{color:#34495e} .metallisedttl{color:#6B6B6B} .coatedttl{color:#ECAC23} .petresin{color:#009237} .boppproductwrap .filters-responsive{background:#00afef} .boppproductwrap .productttl{background:#00afef} .boppproductwrap .datasheet{background:#00afef} .metallisedproductwrap .filters-responsive{background:#6b6b6b} .metallisedproductwrap .productttl{background:#6b6b6b} .metallisedproductwrap .datasheet{background:#6b6b6b} .brobutflid { background: #e5e5e5; border: 1px solid #b0b0b0; border-radius: 3px; color: #4c4a4a; font-size: 14px; line-height: 14px; padding: 10px 25px; position: relative; text-align: center; font-family: 'Roboto', sans-serif; width:45%; } .brobutflid .upload {position:absolute;opacity:0;width:120px;cursor:pointer;top:0;left:0;height:36px} .browfild {color: #4c4a4a} .brobuttext{width:50%} .ibvt { vertical-align:top; display:inline-block; } .videoslider { width:600px; margin:auto; } .slidevideo { display:none; } .slideblock { margin: 3% 1%; width: 30%; } .slideitm { background: #222222; color: #ffffff; font-family: verdana; font-size: 12px; height: 110px; line-height: 110px; text-align: center; text-transform: uppercase; } .slidevideo { background: #ffffff; bottom: 0; height:282px; left: 0; line-height: 500px; margin: auto; position: fixed; right: 0; text-align: center; top: 0; width: 500px; z-index:3; } .bgoverlay { position:fixed; background:rgba(0,0,0,.5); top:0; bottom:0; z-index:2; right:0; left:0; display:none; } .videoarrow { display:none; bottom: 0; height: 20px; left: 0; margin: auto; position:fixed; right: 0; top: 0; width: 500px; z-index: 28; } .close { display: none; left: 0; margin: auto; position: fixed; right: 0; text-align: right; top: 30px; width: 500px; z-index: 4; top:29%; } .slideitm > img { width: 100%; } .nxtarrow.rightcontent > img { background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0; border-radius: 4px; padding: 6px 4px 6px 8px; text-align: center; width: 32px; } .prevarrow.leftcontent > img { background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0; border-radius: 4px; padding: 6px 4px 6px 8px; text-align: center; width: 32px; } .close > img { width: 20px; background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0; border-radius: 4px; padding: 6px 4px 6px 8px; text-align: center; } .thankyoublk { margin: 15% 0; text-align: center; } .thankyouttl{ font-size: 45px; font-weight: 600;} .thankyoudes { font-size: 25px; line-height: 41px; } @media only screen and (max-width:1310px) { .productdestext{margin:15% 50px} } @media only screen and (max-width:1200px) { .container{width:96%; max-width:auto;} .comeventimg img{width:100%} .milestonblk{margin:0 10px} .milestontext{font-size:13px; line-height:18px} .milestondes{width:150px} .hglobalfootprintimg{width:960px; margin:0 auto} .gpcountrywrap{width:10px} .gpcountrywrap img {width:100%} .gpcountrywrap:hover .countryname{top:-20px} .gpi-australia { bottom: 100px; right: 154px} .gpi-srilanka { bottom: 181px; right: 287px} .indiawrap { right: 258px; top: 9px} .gpi-argentina { bottom: 57px; left: 288px} .gpi-chile { bottom: 75px; left: 263px} .gpi-brazil { bottom: 142px; left: 344px} .gpi-colombia { bottom: 179px; left: 245px} .gpi-usa {left: 170px; top: 236px} .gpi-mexico { left: 173px; top: 304px} .gpi-guatenala { left: 205px; top: 332px} .gpi-honduras { left: 220px; top: 337px} .gpi-salvador { left: 218px; top: 350px} .gpi-koria { bottom: 288px;right: 142px} .gpi-bangladesh { bottom: 224px; right: 261px} .gpi-nepal { bottom: 235px; right: 274px} .gpi-southafrica { bottom: 72px; right: 434px} .gpi-tanzania { bottom: 130px; right: 402px} .gpi-kenya { bottom: 154px; right: 401px} .gpi-nigeria { bottom: 173px; left: 470px} .gpi-togo { bottom: 178px; left: 452px} .gpi-ivorycoast { bottom: 175px; left: 428px} .gpi-senegal { bottom: 197px; left: 407px} .gpi-spain { left: 434px; top: 258px} .gpi-uae { bottom: 221px; right: 350px} .gpi-bahrain { bottom: 233px; right: 373px} .gpi-jordan {bottom: 245px; right: 406px} .gpi-italy { left: 485px; top: 257px} .gpi-slovenia { left: 495px; top: 246px} .gpi-netherland { left: 456px; top: 225px} .gpi-iran { bottom: 242px; right: 343px} .gpi-belgium { left: 447px; top: 238px} .gpi-turkey { left: 540px; top: 264px} .gpi-germany { left: 468px; top: 232px} .gpi-poland { left: 494px; top: 217px} .gpi-france { left: 446px; top: 250px} .gpi-ukraine { left: 532px; top: 235px} .gpi-tunisia { left: 465px; top: 275px} .gpi-saudi-arabia { bottom: 221px; right: 393px} .gpi-russia { right: 275px; top: 184px} .gpi-newzealand { bottom: 42px; right: 42px} .gpi-korea { bottom: 266px; right: 162px} .gpi-malaysia { bottom: 174px; right: 233px} .gpi-mauritius { bottom: 110px; right: 353px} .gpi-zimbabwe { bottom: 89px; right: 422px} .gpi-namibia { bottom: 88px; right: 458px} .gpi-malawi { bottom: 120px; right: 410px} .gpi-uganda { bottom: 159px;right: 412px} .gpi-oman { bottom: 209px; right: 356px} .gpi-yemen { bottom: 201px; right: 381px} .gpi-peru {bottom: 130px; left: 245px} .gpi-canada {left: 145px; top: 184px} .gpi-costarica {left: 228px; top: 346px} .gpi-egypt { bottom: 237px; right: 422px} .gpi-sudan { bottom: 217px; right: 416px } .gpi-algeria { left: 452px; top: 286px} .gpi-uk { left: 445px; top: 225px} } @media only screen and (max-width:1100px) { .navigation ul li{margin:0 0 0 -4px} .opportunities{width:50%} .careerdes{width:48%} .comappttl{padding:30px 0 0} .linebasttl::before, .linebasttl::after , .linebasekm::before , .linebasekm::after{display:none} .linebaseright::after{background:url(../images/about-line.png) no-repeat; width:232px; height:367px;content: ""; position:absolute; left: -50px; position: absolute;top: -55px; display:block} .linebaseright::before {display:none} .productdestext{width:auto} .productdestext::after, .productlinettl::before, .productlinettl::after, .productlineknmore::before, .productlineknmore::after{display:none} .proslidertext { float:none; display:inline-block; width:50%; margin:0 0 0 -4px; vertical-align:middle} .prosliderimg { float:none; display:inline-block; width:50%; margin:0; vertical-align:middle} .productdestext{margin:0; width:90%;} .bflinettl::before, .bflinettl::after, .hbeyondright::before, .hbeyondright::after, .bflinemainttl::after{display:none} .bflinemainttl::before { background: url("../images/beyond-line.png") no-repeat 0 0; content: ""; display: block; height: 367px; left: -20%; position: absolute; top: -178%; width: 232px} .abtlinkname, .beyondsubname{font-size:11px; padding:4px 5px} .milestonyear{width:75px; height:75px; line-height:66px} .milestonblk{margin:0 8px} .bflinettl::before {border-top:0} } @media only screen and (max-width:1000px) { .navigation ul li{margin:0 0 0 -4px} .memberwrap{width:33%; border:1px solid rgba(255, 255, 255, 0.25)} .memberblk, .memberblk:nth-child(4n), .memberblk:nth-child(n+5), .memberblk:last-child {padding: 35px 0 20px} .memberwrap::after, .memberwrap::before, .hmanagmentwrap::after{display:none} .memberwrap:nth-child(n+5) .memberblk {padding: 35px 0 20px} .memberwrap:nth-child(n+5) { border-bottom:1px solid rgba(255, 255, 255, 0.25)} .memberwrap:last-child .memberblk { border-right:1px solid rgba(255, 255, 255, 0.25);border-left:1px solid rgba(255, 255, 255, 0.25);} .memberwrap:nth-child(4n) .memberblk{ border-right: 1px solid rgba(255, 255, 255, 0.25);padding:35px 0 20px} .bflinemainttl::before, .linebaseright::after{display:none} .hbeyondfilmswrap{top:19%} .hbeyoundsemittl{padding:27% 0 0} .abtlink {background:none} .abtimg,.beyondsublinkimg {display:none} .milestonyear { font-size: 13px; height: 70px; line-height: 62px; width: 70px} .milestonblk {margin: 0 6px} .milestondes {left: -27px; width: 130px} .pronameblk{width:140px} .prodesblk {width:calc(100% - 150px);} .prodestext {width:69%} .datasheetwrap {width: 30%; text-align:right} .filmsnavno {display: block; margin: 0 auto 7px; text-align: center} .hglobalfootprintimgres{display:block} .hglobalfootprintimgres img {width: 100%} .hglobalfootprintimg{display:none} } @media only screen and (max-width:900px) { .pagettl, .pagesubttl , .pgsubttl18, .pagetext, .opportunitittl, .contmainttl, .contactformttl, .contsubmit, .pagesemittl , .comappttl, .hbeyoundslider {text-align: center} .careersection, .contactsection , .csrdesttl, .manfacturingsection, .qualitysection {padding:10% 0} .navigation{display:none} .copyrighttext { float: none; text-align: center; width: 100%} .ddlogo { float: none; margin: 20px 0 0; text-align: center; width: 100%} .responsivemenu {margin: 15px 5px 0; display:block} .careerdes{width:100%; float:none} .opportunities{width:100%; float:none; margin:5% 0 0} .contactaddres{width:100%; float:none} .contactaddres .pagetext{text-align:left} .contactaddres .pagetext br{display:none} .contactform { width: 100%; float:none; margin:8% 0 0 } .contactformdes {margin: 5% 0 0} .contformfildblk { margin: 0 auto 20px; width: 90%} .contfild { width: 73%} .manbopetdes {float: none; width: 100%} .manbopetimg{float:none; width:100%; text-align:center; margin:5% 0 0} .manbopetimg img{width:auto} .qualityassleft {width:100%; float:none} .qualityassright {width:100%; float:none; text-align:center; margin:5% 0 0} .certificate img {width: auto} .waterconservation, .energyconservation {width:100%; float:none; overflow:hidden} .waterconright, .energyconleft {float: none; margin: 0 auto; width: 90%; padding:0} .conservationsection .pagetext {text-align:left} .comeventtext { float: none; padding: 0 0 5%; width: 100%} .comeventimg {float: none; margin: 0 0 10%; text-align: center; width: 100%} .comeventimg img {width: 100%} .comappttl{padding:10px 0 } .comeventimg img{width:auto} .haboutsection .pagesubttl , .haboutsection .pagettl , .haboutsection .pagetext {text-align:left} .proslidertext{width:90%; margin:15% auto; text-align:center; display:block; overflow:hidden} .hproductno{right:5%; top:2%} .petresinno{color:rgba(255, 255, 255, 0.5)} .prosliderimg{width:100%; display:block} .peobandesk{display:none} .probanres{display:block} .productdestext{width:100%; display:block} .productdestext .pagetext { min-height: auto; padding: 10px 0 20px} .hgetintouchblk::after, .hgitttl::before, .hgitttl::after, .hgitenquire::before, .hgitenquire::after{display:none} .hgetintouchwrap .pagetext{text-align:left} .hproductdes{padding:10% 0 20px} .hbeyondfilmswrap { position: static; width: 100%} .hbeyondright{padding:0; width:100%} .beyoudrightdes{width:100%; float:none} .beyoudimg{width:100%; float:none} .hbeyoundsemittl{padding:2% 0 0; text-align:center} .beyoudimg { float: none; margin: 3% auto 0; width: 50%} .beyondfilmssection .bx-wrapper .bx-pager{left:0; right:0; text-align:center; margin:0 auto;} .commileft, .commileft:last-child {width:90%; margin:0 auto 4%; float:none; border:none} .commitmenttext {width: 92%} .expdes{float:none; width:100%; text-align:center;} .expanimg{width:100%; text-align:center; margin:5% 0 0} .expanimg img{ width:auto} .milestonewrap{padding:5%} .milestonewrap::before { bottom: auto; left:9.1%; right: auto; top: -2px} .milestonewrap::after { top: auto; left:9.1%; right: auto; bottom: -2px} .milestoneline { background: #c7c7c7 none repeat scroll 0 0; bottom: auto; height: 100%; left: 9.5%; margin: auto; position: absolute; top: 0; width:1px} .milestonegrp { display: block; width: 100%; margin:0} .milestonblk { display: block; width: 90%; margin:0 0 5%; padding:5% 0} .toppart .milestonyear::before, .bottompart .milestonyear::before { left: 100px; top: 9px; z-index:1} .toppart .milestonyear::after, .bottompart .milestonyear::after { height: 2px; left: auto; right: -115px; top: 33px; width: 115px} .milestonyear {font-size: 14px; height: 80px; line-height: 70px; width: 80px} .year2016{ background: #00afef; /* Old browsers */ background: -moz-linear-gradient(top, #00afef 50%, #eab039 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #00afef 50%,#eab039 50%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #00afef 50%,#eab039 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00afef', endColorstr='#eab039',GradientType=0 ); /* IE6-9 */ } .toppart .milestondes , .bottompart .milestondes {bottom: 0; left: 190px; top: 0; width: 75%;text-align:left} .milestondes {background: #ffffff none repeat scroll 0 0; border: 1px solid #cccccc; padding: 2%} .filmproductdes{width:100%; float:none} .filmproductimg{width:100%; float:none; text-align:center; margin:30px 0 0} .bopetimg { display: inline-block; margin: 0 2% 0 -4px; vertical-align: top; width: 48%} .bopetimg img{width:100%} .bopetimg:last-child {margin:0} .prodescription {width: 100%} .filters-responsive { color: #ffffff; display: inline-block; font-family: raleway; font-size: 17px; font-weight: 700; letter-spacing: 2px; margin: 0 0 10px; padding: 10px 30px; text-transform: uppercase; cursor:pointer} .profilters { background: #ffffff; margin: 0 0 0 -305px; position: absolute; display:block; top:0; left:0; transition: all 0.6s ease 0s; width:300px; z-index:1; box-shadow:2px 1px 8px #444545; cursor:pointer} .promainlinkwpar {padding: 0 15px 0 15px} .profiltersopen{margin:0} .productdes {position: relative} .productttlwrap {padding: 40px 0} .productttl{position:relative} .filterclose{position:absolute; top:12px; right:15px; display:block; cursor:pointer} .innerbopetimg:last-child {margin: 0 0 0 2%} .innerbopetimg{ width: 48%;} } @media only screen and (max-width:768px) { .pagetext br {display:none} .beyondnavigation{display:none} .habtvideo {width:90%; float:none; margin:0 auto 5%} .haboutright {width:90%;float:none; padding:0; margin:0 auto} .pagesection{padding:10% 0; text-align:center} .haboutsection .pagesubttl , .haboutsection .pagettl , .haboutsection .pagetext {text-align:center} .bannertext { color: #000000; padding: 5% 0; position: static} .bannersection .flex-control-nav { bottom:-15%; left: 0; margin: 0 auto; right: 0; text-align: center} .bannersection .flex-control-paging li a{width:7px; height:7px} .haboutsection {padding: 14% 0 10%} .bannerttl { font-size: 40px;line-height: 40px} .hproductno{font-size:70px; line-height:70px} .hgetintouchwrap{position:static; margin:0; width:100%; text-align:center} .hgetintouchwrap .pagetext{text-align:center} .hgitcallblk {display: inline-block; margin: 0 20px 0 0} .hgetintouchsection .container{width:100%} .memberwrap{width:50%} .memredmore, .memcloes {display:block} .abtnavigation{display:none} .commitmenttext{width:85%} .milestonewrap::before, .milestonewrap::after, .milestoneline, .toppart .milestonyear::after, .bottompart .milestonyear::after {display:none} .milestondes {border-top:2px solid #ccc; border-bottom:none; border-left:none; border-right:none} .milestonyear { background:none; border:none; border-radius: 0; box-shadow: none; color: #00AFEF; font-size: 25px; height: auto; padding: 0 0 0 60px; position: static; text-align: left; width: auto} .toppart .milestondes, .bottompart .milestondes{position:static; width:100% } .milestonblk{margin:0; padding:0 0 20px; width:100%} .toppart .milestonyear::before, .bottompart .milestonyear::before{left:0} .applicationsblk .applicationstext{position:static; background:none; color:#000; margin:0; padding:10px 0; height:auto} .applicationsblk {margin: 0 auto; width: 200px} .filmsnavno {display: none} .filmssubnavwrap .container{width:100%} .filmssubnav{display:none; text-align:center} .innersubnavheading{background:#2A3D6E;font-size: 18px; font-weight: 700; letter-spacing: 2px;text-align: center; text-transform: uppercase; color:#fff;display: block; cursor:pointer} .prosubnavttl {padding: 20px 25px} .filmsnavblk {border: 0 none; cursor: pointer; display: inline-block; float: none; margin: 0; width: 49%; border-bottom:5px solid transparent} .arrowup {background:#2a3d6e url("../images/arrow-up.png") no-repeat 62% center} .arrowdown {background:#2a3d6e url("../images/arrow-down.png") no-repeat 62% center} .opportunitiblk{text-align:left} .memmoreinfodes {margin: 25px 0 0} } @media only screen and (max-width:625px) { .slideitm{background:none;height:auto;} .videolist {text-align: center;width: 100%;} .slideblock {display: block; margin: 3% auto;width: 63%;} .videoslider{width:auto;} } @media only screen and (max-width:600px) { .manbopetimg img {width: 100%} .certificate img {width: 100%} .bannerknwmore {margin: 5% 0 3%} .prodestext{width:100%; float:none} .datasheetwrap{width:100%; float:none; margin:10px 0 0; text-align:left} .datasheet {font-size: 12px; padding: 5px 10px;} .productttlwrap{padding:5% 0} .bopetimg{width:80%; margin:0 auto} .bopetimg img {width:100%} .filmsnavname{font-size:16px; line-height:16px} .arrowup , .arrowdown{background-position:64% center} .thankyoublk{margin:40% 0} .thankyoudes{font-size:22px} } @media only screen and (max-width:500px) { .container { width: 90%} .knowmore, .hgitenquire{font-size:11px; padding:8px 15px; line-height:11px} .oppformname { margin: 0 0 2%; width: 100%} .oppformfild { margin: 0 0 3%; width: 100%} .oppbuttonwrp { text-align: center} .contactform{margin:15% 0 0} .contactformdes{margin:8% 0 0} .contformfildblk{width:90%; margin:0 auto 8%} .contfildname{width:100%; margin:0 0 3%} .contfild{width:100%} .oppbutton{width:auto; padding:8px 25px} .bopeboldtext{width:auto; padding:0 10px 0 0} .bopetext{width:auto} .bopeboldtext, .bopetext {line-height:23px} .certificate{width:100%; margin:0 0 3%} .certificate img {width: auto} .pagettl {font-size: 30px;line-height: 30px} .pagesemittl{font-size:18px} .pagettl {font-size: 25px;line-height: 35px} .conservationttl{text-align:center} .pagetext {font-size:14px; line-height:16px} .bannerttl {font-size:30px; line-height:30px} .memberwrap{width:100%} .hmanagmentwrap{margin-bottom:0} .hproductno {font-size: 40px; left: 3%; line-height: 40px; right: auto;top: 1%} .beyoudimg{margin:5% auto 0; width:80%} .hbeyoundsemittl{font-size:20px; line-height:20px; margin:1% 0 0} .expanimg img{ width:100%} .prodesblk { float: none; margin: 10px 0 0; width: 100%} .pronameblk {float: none; width: 100%} .productttl {display: none} .profilters .productttl {display: block} .productdesblk, .datasheetwrap {text-align: center} .datasheet{margin:0 auto} .productdes{text-align:center} .prosubnavttl{font-size:16px;line-height:16px; padding:15px 25px} .profilters {text-align:left} .checkboxblk label{font-size:14px; line-height:14px} .promainlink{font-size:16px} .memberinfo{top:10%; height:80%; overflow-y:scroll} .memmoreinfodes{padding:20px} .bannersection .flex-control-nav{bottom:-18%} .brobutflid{width:55%} .arrowup , .arrowdown{background-position:67% center} .slidevideo{height: 200px;background:none; width:97%;} .videoarrow{width:100%; top: 80px;} .close{top: 43%;width: 356px;} } @media only screen and (max-width:400px) { .bannerttl {font-size: 23px;line-height: 20px} .bannerknwmore {margin: 7% 0 8%} .habtvideo iframe {height: 243px} .bopetimg {width:90%} .bannersection .flex-control-nav{bottom:-25%} .arrowup , .arrowdown{background-position:73% center} } @media only screen and (max-width:360px) { .close{ width: 32px;left:none;left:auto;} } /* jQuery.mmenu CSS */ /* jQuery.mmenu oncanvas CSS */ .mm-hidden { display: none !important; } .mm-wrapper { overflow-x: hidden; position: relative; } .mm-menu, .mm-menu > .mm-panel { margin: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .mm-menu { background: inherit; display: block; overflow: hidden; padding: 0; } .mm-panel { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .mm-panel.mm-opened { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .mm-panel.mm-subopened { -webkit-transform: translate3d(-30%, 0, 0); -moz-transform: translate3d(-30%, 0, 0); -ms-transform: translate3d(-30%, 0, 0); -o-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } .mm-panel.mm-highest { z-index: 1; } .mm-menu > .mm-panel { background: inherit; -webkit-overflow-scrolling: touch; overflow: scroll; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 0 20px; } .mm-menu > .mm-panel.mm-hasnavbar { padding-top: 40px; } .mm-menu > .mm-panel:before, .mm-menu > .mm-panel:after { content: ''; display: block; height: 20px; } .mm-vertical .mm-panel { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; } .mm-vertical .mm-listview .mm-panel, .mm-listview .mm-vertical .mm-panel { display: none; padding: 10px 0 10px 10px; } .mm-vertical .mm-listview .mm-panel .mm-listview > li:last-child:after, .mm-listview .mm-vertical .mm-panel .mm-listview > li:last-child:after { border-color: transparent; } .mm-vertical li.mm-opened > .mm-panel, li.mm-vertical.mm-opened > .mm-panel { display: block; } .mm-vertical .mm-listview > li > .mm-next, .mm-listview > li.mm-vertical > .mm-next { height: 40px; bottom: auto; } .mm-vertical .mm-listview > li > .mm-next:after, .mm-listview > li.mm-vertical > .mm-next:after { top: 16px; bottom: auto; } .mm-vertical .mm-listview > li.mm-opened > .mm-next:after, .mm-listview > li.mm-vertical.mm-opened > .mm-next:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .mm-navbar { border-bottom: 1px solid transparent; text-align: center; line-height: 20px; height: 40px; padding: 0 40px; margin: 0; position: absolute; top: 0; left: 0; right: 0; } .mm-navbar > * { display: block; padding: 10px 0; } .mm-navbar a, .mm-navbar a:hover { text-decoration: none; } .mm-navbar .mm-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .mm-navbar .mm-btn { box-sizing: border-box; width: 40px; height: 40px; position: absolute; top: 0; z-index: 1; } .mm-navbar .mm-btn:first-child { padding-left: 20px; left: 0; } .mm-navbar .mm-btn:last-child { text-align: right; padding-right: 20px; right: 0; } .mm-panel .mm-navbar { display: none; } .mm-panel.mm-hasnavbar .mm-navbar { display: block; } .mm-listview, .mm-listview > li { list-style: none; display: block; padding: 0; margin: 0; } .mm-listview { font: inherit; font-size: 14px; line-height: 20px; } .mm-listview a, .mm-listview a:hover { text-decoration: none; } .mm-listview > li { position: relative; } .mm-listview > li > a, .mm-listview > li > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: inherit; display: block; padding: 10px 10px 10px 20px; margin: 0; } .mm-listview > li > a.mm-arrow, .mm-listview > li > span.mm-arrow { padding-right: 50px; } .mm-listview > li:not(.mm-divider):after { content: ''; border-bottom-width: 1px; border-bottom-style: solid; display: block; position: absolute; left: 0; right: 0; bottom: 0; } .mm-listview > li:not(.mm-divider):after { left: 20px; } .mm-listview .mm-next { background: rgba(3, 2, 1, 0); width: 50px; padding: 0; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; } .mm-listview .mm-next:before { content: ''; border-left-width: 1px; border-left-style: solid; display: block; position: absolute; top: 0; bottom: 0; left: 0; } .mm-listview .mm-next + a, .mm-listview .mm-next + span { margin-right: 50px; } .mm-listview .mm-next.mm-fullsubopen { width: 100%; } .mm-listview .mm-next.mm-fullsubopen:before { border-left: none; } .mm-listview .mm-next.mm-fullsubopen + a, .mm-listview .mm-next.mm-fullsubopen + span { padding-right: 50px; margin-right: 0; } .mm-menu > .mm-panel > .mm-listview { margin: 20px -20px; } .mm-menu > .mm-panel > .mm-listview:first-child, .mm-menu > .mm-panel > .mm-navbar + .mm-listview { margin-top: -20px; } .mm-listview .mm-inset { list-style: inside disc; padding: 0 10px 15px 40px; margin: 0; } .mm-listview .mm-inset > li { padding: 5px 0; } .mm-listview .mm-divider { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 10px; text-transform: uppercase; text-indent: 20px; line-height: 25px; } .mm-listview .mm-spacer { padding-top: 40px; } .mm-listview .mm-spacer > .mm-next { top: 40px; } .mm-listview .mm-spacer.mm-divider { padding-top: 25px; } .mm-prev:before, .mm-next:after, .mm-arrow:after { content: ''; border: 2px solid transparent; display: inline-block; width: 8px; height: 8px; margin: auto; position: absolute; top: 0; bottom: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .mm-prev:before { border-right: none; border-bottom: none; left: 20px; } .mm-next:after, .mm-arrow:after { border-top: none; border-left: none; right: 20px; } .mm-menu { background: #1b5b80; color: rgba(255, 255, 255, 0.7); } .mm-menu .mm-navbar { border-color: rgba(255, 255, 255, 0.1); } .mm-menu .mm-navbar > *, .mm-menu .mm-navbar a { color: rgba(255, 255, 255, 0.7); } .mm-menu .mm-navbar .mm-btn:before, .mm-menu .mm-navbar .mm-btn:after { border-color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-listview > li:after { border-color: rgba(255, 255, 255, 0.1); } .mm-menu .mm-listview > li .mm-prev:before, .mm-menu .mm-listview > li .mm-next:after, .mm-menu .mm-listview > li .mm-arrow:after { border-color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-listview > li .mm-prev:after, .mm-menu .mm-listview > li .mm-next:before { border-color: rgba(255, 255, 255, 0.1); } .mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span { background: rgba(255, 255, 255, 0.5); } .mm-menu.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu .mm-listview li.mm-opened.mm-vertical > .mm-panel { background: rgba(0, 0, 0, 0.05); } .mm-menu .mm-divider { background: rgba(0, 0, 0, 0.05); } /* jQuery.mmenu offcanvas addon CSS */ .mm-page { box-sizing: border-box; position: relative; } .mm-slideout { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-opened { overflow: hidden; position: relative; } html.mm-opened body { overflow: hidden; } html.mm-background .mm-page { background: inherit; } #mm-blocker { background: rgba(3, 2, 1, 0); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999999; } html.mm-opened #mm-blocker, html.mm-blocking #mm-blocker { display: block; } .mm-menu.mm-offcanvas { display: none; position: fixed; } .mm-menu.mm-current { display: block; } .mm-menu { width: 80%; min-width: 140px; max-width: 300px; } html.mm-opening .mm-slideout { -webkit-transform: translate(80%, 0); -moz-transform: translate(80%, 0); -ms-transform: translate(80%, 0); -o-transform: translate(80%, 0); transform: translate(80%, 0); } @media all and (max-width: 175px) { html.mm-opening .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 550px) { html.mm-opening .mm-slideout { -webkit-transform: translate(440px, 0); -moz-transform: translate(440px, 0); -ms-transform: translate(440px, 0); -o-transform: translate(440px, 0); transform: translate(440px, 0); } } /* jQuery.mmenu autoHeight addon CSS */ .mm-menu.mm-top.mm-autoheight, .mm-menu.mm-bottom.mm-autoheight { max-height: 80%; } .mm-menu.mm-top.mm-autoheight.mm-fullscreen, .mm-menu.mm-bottom.mm-autoheight.mm-fullscreen { max-height: 100%; } .mm-menu.mm-measureheight > .mm-panel { bottom: auto !important; height: auto !important; } /* jQuery.mmenu counters addon CSS */ em.mm-counter { font: inherit; font-size: 14px; font-style: normal; text-indent: 0; line-height: 20px; display: block; margin-top: -10px; position: absolute; right: 45px; top: 50%; } em.mm-counter + a.mm-next { padding-left: 40px; } em.mm-counter + a.mm-next + a, em.mm-counter + a.mm-next + span { margin-right: 90px; } em.mm-counter + a.mm-fullsubopen { padding-left: 0; } .mm-vertical > .mm-counter { top: 12px; margin-top: 0; } .mm-vertical.mm-spacer > .mm-counter { margin-top: 40px; } .mm-nosubresults > .mm-counter { display: none; } .mm-menu em.mm-counter { color: rgba(0, 0, 0, 0.3); } /* jQuery.mmenu dividers addon CSS */ .mm-divider > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0; line-height: 25px; } .mm-divider.mm-opened a.mm-next:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .mm-collapsed:not(.mm-uncollapsed) { display: none; } .mm-fixeddivider { background: inherit; display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 2; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mm-fixeddivider:after { content: none !important; display: none !important; } .mm-hasdividers .mm-fixeddivider { display: block; } .mm-menu .mm-fixeddivider span { background: rgba(0, 0, 0, 0.05); } /* jQuery.mmenu dragOpen addon CSS */ html.mm-opened.mm-dragging .mm-menu, html.mm-opened.mm-dragging .mm-page, html.mm-opened.mm-dragging .mm-fixed-top, html.mm-opened.mm-dragging .mm-fixed-bottom, html.mm-opened.mm-dragging #mm-blocker { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* jQuery.mmenu iconpanels addon CSS */ .mm-iconpanel .mm-panel { -webkit-transition-property: -webkit-transform, left, right; -moz-transition-property: -moz-transform, left, right; -ms-transition-property: -ms-transform, left, right; -o-transition-property: -o-transform, left, right; transition-property: transform, left, right; } .mm-iconpanel .mm-panel.mm-opened { border-left: 1px solid transparent; } .mm-iconpanel .mm-panel.mm-subopened { left: -40px; right: 40px; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mm-iconpanel .mm-panel.mm-iconpanel-0 { left: 0px; } .mm-iconpanel .mm-panel.mm-iconpanel-1 { left: 40px; } .mm-iconpanel .mm-panel.mm-iconpanel-2 { left: 80px; } .mm-iconpanel .mm-panel.mm-iconpanel-3 { left: 120px; } .mm-iconpanel .mm-panel.mm-iconpanel-4 { left: 160px; } .mm-iconpanel .mm-panel.mm-iconpanel-5 { left: 200px; } .mm-iconpanel .mm-panel.mm-iconpanel-6 { left: 240px; } .mm-menu.mm-iconpanel .mm-panel.mm-opened { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-iconpanel .mm-subblocker { background: #f3f3f3; } .mm-subblocker { opacity: 0; display: block; -webkit-transition: opacity 0.4s ease; -moz-transition: opacity 0.4s ease; -ms-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } .mm-subopened .mm-subblocker { opacity: 0.6; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; } /* jQuery.mmenu navbars addon CSS */ .mm-menu > .mm-navbar { background: inherit; padding: 0; z-index: 3; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mm-navbar-bottom { border-top: 1px solid transparent; border-bottom: none; top: auto; bottom: 0; } .mm-navbar-top ~ .mm-navbar-top { border-bottom: none; } .mm-navbar-bottom ~ .mm-navbar-bottom { border-top: none; } .mm-navbar.mm-hasbtns { padding: 0 40px; } .mm-close:after { content: 'x'; } .mm-navbar[class*="mm-navbar-content-"] > * { box-sizing: border-box; display: block; float: left; } .mm-navbar > .mm-breadcrumbs { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-overflow-scrolling: touch; overflow-x: auto; text-align: left; padding: 0 0 0 17px; } .mm-navbar > .mm-breadcrumbs > * { display: inline-block; padding: 10px 3px; } .mm-navbar > .mm-breadcrumbs > a { text-decoration: underline; } .mm-navbar.mm-hasbtns .mm-breadcrumbs { margin-left: -40px; } .mm-navbar.mm-hasbtns .mm-btn:not(.mm-hidden) + .mm-breadcrumbs { margin-left: 0; padding-left: 0; } .mm-navbar-top-1 { top: 0px; } .mm-hasnavbar-top-1 .mm-panel { top: 40px; } .mm-hasnavbar-top-1 .mm-indexer { top: 50px; } .mm-hasnavbar-top-1 .mm-fixeddivider { top: 40px; } .mm-navbar-top-2 { top: 40px; } .mm-hasnavbar-top-2 .mm-panel { top: 80px; } .mm-hasnavbar-top-2 .mm-indexer { top: 90px; } .mm-hasnavbar-top-2 .mm-fixeddivider { top: 80px; } .mm-navbar-top-3 { top: 80px; } .mm-hasnavbar-top-3 .mm-panel { top: 120px; } .mm-hasnavbar-top-3 .mm-indexer { top: 130px; } .mm-hasnavbar-top-3 .mm-fixeddivider { top: 120px; } .mm-navbar-top-4 { top: 120px; } .mm-hasnavbar-top-4 .mm-panel { top: 160px; } .mm-hasnavbar-top-4 .mm-indexer { top: 170px; } .mm-hasnavbar-top-4 .mm-fixeddivider { top: 160px; } .mm-navbar-bottom-1 { bottom: 0px; } .mm-hasnavbar-bottom-1 .mm-panel { bottom: 40px; } .mm-hasnavbar-bottom-1 .mm-indexer { bottom: 50px; } .mm-navbar-bottom-2 { bottom: 40px; } .mm-hasnavbar-bottom-2 .mm-panel { bottom: 80px; } .mm-hasnavbar-bottom-2 .mm-indexer { bottom: 90px; } .mm-navbar-bottom-3 { bottom: 80px; } .mm-hasnavbar-bottom-3 .mm-panel { bottom: 120px; } .mm-hasnavbar-bottom-3 .mm-indexer { bottom: 130px; } .mm-navbar-bottom-4 { bottom: 120px; } .mm-hasnavbar-bottom-4 .mm-panel { bottom: 160px; } .mm-hasnavbar-bottom-4 .mm-indexer { bottom: 170px; } .mm-navbar-size-2 { height: 80px; } .mm-navbar-size-3 { height: 120px; } .mm-navbar-size-4 { height: 160px; } .mm-navbar-content-2 > * { width: 50%; } .mm-navbar-content-3 > * { width: 33.33%; } .mm-navbar-content-4 > * { width: 25%; } .mm-navbar-content-5 > * { width: 20%; } .mm-navbar-content-6 > * { width: 16.67%; } /* jQuery.mmenu searchfield addon CSS */ .mm-search, .mm-search input { box-sizing: border-box; } .mm-search { height: 40px; padding: 7px 10px 0 10px; } .mm-search input { border: none; border-radius: 26px; font: inherit; font-size: 14px; line-height: 26px; outline: none; display: block; width: 100%; height: 26px; margin: 0; padding: 0 10px; } .mm-search input::-ms-clear { display: none; } .mm-panel > .mm-search { width: 100%; position: absolute; top: 0; left: 0; } .mm-panel.mm-hassearch { padding-top: 40px; } .mm-panel.mm-hassearch.mm-hasnavbar { padding-top: 80px; } .mm-panel.mm-hassearch.mm-hasnavbar .mm-search { top: 40px; } .mm-noresultsmsg { text-align: center; font-size: 21px; display: none; padding: 40px 0; } .mm-noresults .mm-noresultsmsg { display: block; } .mm-noresults .mm-indexer { display: none !important; } li.mm-nosubresults > a.mm-next { display: none; } li.mm-nosubresults > a.mm-next + a, li.mm-nosubresults > a.mm-next + span { padding-right: 10px; } .mm-menu .mm-search input { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.7); } .mm-menu .mm-noresultsmsg { color: rgba(0, 0, 0, 0.3); } /* jQuery.mmenu sectionIndexer addon CSS */ .mm-indexer { background: inherit; text-align: center; font-size: 12px; box-sizing: border-box; width: 20px; position: absolute; top: 10px; bottom: 10px; right: -100px; z-index: 3; -webkit-transition: right 0.4s ease; -moz-transition: right 0.4s ease; -ms-transition: right 0.4s ease; -o-transition: right 0.4s ease; transition: right 0.4s ease; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mm-indexer a { text-decoration: none; display: block; height: 3.85%; } .mm-indexer ~ .mm-panel.mm-hasindexer { padding-right: 40px; } .mm-hasindexer .mm-indexer { right: 0; } .mm-hasindexer .mm-fixeddivider { right: 20px; } .mm-menu .mm-indexer a { color: rgba(0, 0, 0, 0.3); } /* jQuery.mmenu toggles addon CSS */ input.mm-toggle, input.mm-check { position: absolute; left: -10000px; } label.mm-toggle, label.mm-check { margin: 0; position: absolute; top: 50%; z-index: 2; } label.mm-toggle:before, label.mm-check:before { content: ''; display: block; } label.mm-toggle { border-radius: 30px; width: 50px; height: 30px; margin-top: -15px; } label.mm-toggle:before { border-radius: 30px; width: 28px; height: 28px; margin: 1px; } input.mm-toggle:checked ~ label.mm-toggle:before { float: right; } label.mm-check { width: 30px; height: 30px; margin-top: -15px; } label.mm-check:before { border-left: 3px solid; border-bottom: 3px solid; width: 40%; height: 20%; margin: 25% 0 0 20%; opacity: 0.1; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } input.mm-check:checked ~ label.mm-check:before { opacity: 1; } li.mm-vertical label.mm-toggle, li.mm-vertical label.mm-check { bottom: auto; margin-top: 0; } li.mm-vertical label.mm-toggle { top: 5px; } li.mm-vertical label.mm-check { top: 5px; } label.mm-toggle, label.mm-check { right: 20px; } label.mm-toggle + a, label.mm-toggle + span { padding-right: 80px; } label.mm-check + a, label.mm-check + span { padding-right: 60px; } a.mm-next + label.mm-toggle, a.mm-next + label.mm-check { right: 60px; } a.mm-next + label.mm-toggle + a, a.mm-next + label.mm-toggle + span, a.mm-next + label.mm-check + a, a.mm-next + label.mm-check + span { margin-right: 50px; } a.mm-next + label.mm-toggle + a, a.mm-next + label.mm-toggle + span { padding-right: 70px; } a.mm-next + label.mm-check + a, a.mm-next + label.mm-check + span { padding-right: 50px; } em.mm-counter + a.mm-next + label.mm-toggle, em.mm-counter + a.mm-next + label.mm-check { right: 100px; } em.mm-counter + a.mm-next + label.mm-toggle + a, em.mm-counter + a.mm-next + label.mm-toggle + span, em.mm-counter + a.mm-next + label.mm-check + a, em.mm-counter + a.mm-next + label.mm-check + span { margin-right: 90px; } .mm-menu label.mm-toggle { background: rgba(0, 0, 0, 0.1); } .mm-menu label.mm-toggle:before { background: #f3f3f3; } .mm-menu input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963; } .mm-menu label.mm-check:before { border-color: rgba(0, 0, 0, 0.7); } /* jQuery.mmenu borderstyle extension CSS */ .mm-menu.mm-border-none .mm-listview > li:after, .mm-listview.mm-border-none > li:after { content: none; } .mm-menu.mm-border-full .mm-listview > li:after, .mm-listview.mm-border-full > li:after { left: 0 !important; } /* jQuery.mmenu effects extension CSS */ html.mm-effect-zoom-menu .mm-menu.mm-offcanvas { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-effect-zoom-menu.mm-opened .mm-menu.mm-effect-zoom-menu { -webkit-transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); -moz-transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); -ms-transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); -o-transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } html.mm-effect-zoom-menu.mm-opening .mm-menu.mm-effect-zoom-menu { -webkit-transform: scale(1, 1) translate3d(0%, 0, 0); -moz-transform: scale(1, 1) translate3d(0%, 0, 0); -ms-transform: scale(1, 1) translate3d(0%, 0, 0); -o-transform: scale(1, 1) translate3d(0%, 0, 0); transform: scale(1, 1) translate3d(0%, 0, 0); } html.mm-effect-zoom-menu.mm-right.mm-opened .mm-menu.mm-offcanvas { -webkit-transform: scale(0.7, 0.7) translate3d(30%, 0, 0); -moz-transform: scale(0.7, 0.7) translate3d(30%, 0, 0); -ms-transform: scale(0.7, 0.7) translate3d(30%, 0, 0); -o-transform: scale(0.7, 0.7) translate3d(30%, 0, 0); transform: scale(0.7, 0.7) translate3d(30%, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } html.mm-effect-zoom-menu.mm-right.mm-opening .mm-menu.mm-effect-zoom-menu { -webkit-transform: scale(1, 1) translate3d(0%, 0, 0); -moz-transform: scale(1, 1) translate3d(0%, 0, 0); -ms-transform: scale(1, 1) translate3d(0%, 0, 0); -o-transform: scale(1, 1) translate3d(0%, 0, 0); transform: scale(1, 1) translate3d(0%, 0, 0); } html.mm-effect-slide-menu .mm-menu.mm-effect-slide-menu { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-effect-slide-menu.mm-opened .mm-menu.mm-effect-slide-menu { -webkit-transform: translate3d(-30%, 0, 0); -moz-transform: translate3d(-30%, 0, 0); -ms-transform: translate3d(-30%, 0, 0); -o-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } html.mm-effect-slide-menu.mm-opening .mm-menu.mm-effect-slide-menu { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } html.mm-effect-slide-menu.mm-right.mm-opened .mm-menu.mm-effect-slide-menu { -webkit-transform: translate3d(30%, 0, 0); -moz-transform: translate3d(30%, 0, 0); -ms-transform: translate3d(30%, 0, 0); -o-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } html.mm-effect-slide-menu.mm-right.mm-opening .mm-menu.mm-effect-slide-menu { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } html.mm-effect-fade-menu .mm-menu.mm-effect-fade-menu { opacity: 0; -webkit-transition: opacity 0.4s ease; -moz-transition: opacity 0.4s ease; -ms-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } html.mm-effect-fade-menu.mm-opening .mm-menu.mm-effect-fade-menu { opacity: 1; } .mm-menu.mm-effect-zoom-panels .mm-panel { -webkit-transform: scale(1.5, 1.5) translate3d(100%, 0, 0); -moz-transform: scale(1.5, 1.5) translate3d(100%, 0, 0); -ms-transform: scale(1.5, 1.5) translate3d(100%, 0, 0); -o-transform: scale(1.5, 1.5) translate3d(100%, 0, 0); transform: scale(1.5, 1.5) translate3d(100%, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .mm-menu.mm-effect-zoom-panels .mm-panel.mm-opened { -webkit-transform: scale(1, 1) translate3d(0%, 0, 0); -moz-transform: scale(1, 1) translate3d(0%, 0, 0); -ms-transform: scale(1, 1) translate3d(0%, 0, 0); -o-transform: scale(1, 1) translate3d(0%, 0, 0); transform: scale(1, 1) translate3d(0%, 0, 0); } .mm-menu.mm-effect-zoom-panels .mm-panel.mm-opened.mm-subopened { -webkit-transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); -moz-transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); -ms-transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); -o-transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); transform: scale(0.7, 0.7) translate3d(-30%, 0, 0); } .mm-menu.mm-effect-slide-panels-0 .mm-panel.mm-subopened { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mm-menu.mm-effect-slide-panels-100 .mm-panel.mm-subopened { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(1) { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; -ms-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms; } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(2) { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(3) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(4) { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(5) { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(6) { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; -ms-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms; } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(7) { -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; -ms-transition-delay: 700ms; -o-transition-delay: 700ms; transition-delay: 700ms; } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(8) { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } html.mm-effect-slide-listitems .mm-menu.mm-effect-slide-listitems .mm-listview > li:nth-child(9) { -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; -ms-transition-delay: 900ms; -o-transition-delay: 900ms; transition-delay: 900ms; } html.mm-effect-slide-listitems.mm-opening .mm-menu.mm-effect-slide-listitems .mm-panel.mm-opened .mm-listview > li { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* jQuery.mmenu fullscreen extension CSS */ .mm-menu.mm-fullscreen { width: 100%; min-width: 140px; max-width: 10000px; } html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } @media all and (max-width: 140px) { html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 10000px) { html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(10000px, 0); -moz-transform: translate(10000px, 0); -ms-transform: translate(10000px, 0); -o-transform: translate(10000px, 0); transform: translate(10000px, 0); } } html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } @media all and (max-width: 140px) { html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-140px, 0); -moz-transform: translate(-140px, 0); -ms-transform: translate(-140px, 0); -o-transform: translate(-140px, 0); transform: translate(-140px, 0); } } @media all and (min-width: 10000px) { html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-10000px, 0); -moz-transform: translate(-10000px, 0); -ms-transform: translate(-10000px, 0); -o-transform: translate(-10000px, 0); transform: translate(-10000px, 0); } } .mm-menu.mm-fullscreen.mm-top, .mm-menu.mm-fullscreen.mm-bottom { height: 100%; min-height: 140px; max-height: 10000px; } html.mm-opened.mm-fullscreen .mm-page { box-shadow: none !important; } /* jQuery.mmenu multiline extension CSS */ .mm-menu.mm-multiline .mm-listview > li > a, .mm-menu.mm-multiline .mm-listview > li > span, .mm-listview.mm-multiline > li .mm-listview > li.mm-multiline > a, .mm-listview.mm-multiline > li .mm-listview > li.mm-multiline > span { text-overflow: clip; white-space: normal; } /* jQuery.mmenu pageshadow extension CSS */ .mm-menu.mm-pageshadow:after { content: ""; display: block; width: 20px; height: 120%; position: absolute; left: 100%; top: -10%; z-index: 99; } .mm-menu.mm-pageshadow.mm-right:after { left: auto; right: 100%; } .mm-menu.mm-pageshadow.mm-next:after, .mm-menu.mm-pageshadow.mm-front:after { content: none; display: none; } .mm-menu.mm-pageshadow:after { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } /* jQuery.mmenu position extension CSS */ .mm-menu.mm-top, .mm-menu.mm-bottom { width: 100%; min-width: 100%; max-width: 100%; } .mm-menu.mm-right { left: auto; right: 0; } .mm-menu.mm-bottom { top: auto; bottom: 0; } html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-80%, 0); -moz-transform: translate(-80%, 0); -ms-transform: translate(-80%, 0); -o-transform: translate(-80%, 0); transform: translate(-80%, 0); } @media all and (max-width: 175px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-140px, 0); -moz-transform: translate(-140px, 0); -ms-transform: translate(-140px, 0); -o-transform: translate(-140px, 0); transform: translate(-140px, 0); } } @media all and (min-width: 550px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-300px, 0); -moz-transform: translate(-300px, 0); -ms-transform: translate(-300px, 0); -o-transform: translate(-300px, 0); transform: translate(-300px, 0); } } /* jQuery.mmenu z-position extension CSS */ html.mm-front .mm-slideout { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; z-index: 0 !important; } .mm-menu.mm-front { z-index: 1; } .mm-menu.mm-front, .mm-menu.mm-next { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .mm-menu.mm-front.mm-right, .mm-menu.mm-next.mm-right { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .mm-menu.mm-top { -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); -o-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .mm-menu.mm-bottom { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } html.mm-opening .mm-menu.mm-front, html.mm-opening .mm-menu.mm-next { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mm-menu.mm-top, .mm-menu.mm-bottom { height: 80%; min-height: 140px; max-height: 880px; } /* jQuery.mmenu themes extension CSS */ .mm-menu.mm-theme-dark { background: #333333; color: rgba(255, 255, 255, 0.8); } .mm-menu.mm-theme-dark .mm-navbar { border-color: rgba(0, 0, 0, 0.15); } .mm-menu.mm-theme-dark .mm-navbar > *, .mm-menu.mm-theme-dark .mm-navbar a { color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-dark .mm-navbar .mm-btn:before, .mm-menu.mm-theme-dark .mm-navbar .mm-btn:after { border-color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-dark .mm-listview > li:after { border-color: rgba(0, 0, 0, 0.15); } .mm-menu.mm-theme-dark .mm-listview > li .mm-prev:before, .mm-menu.mm-theme-dark .mm-listview > li .mm-next:after, .mm-menu.mm-theme-dark .mm-listview > li .mm-arrow:after { border-color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-dark .mm-listview > li .mm-prev:after, .mm-menu.mm-theme-dark .mm-listview > li .mm-next:before { border-color: rgba(0, 0, 0, 0.15); } .mm-menu.mm-theme-dark .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu.mm-theme-dark .mm-listview > li.mm-selected > span { background: rgba(0, 0, 0, 0.1); } .mm-menu.mm-theme-dark.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-theme-dark.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu.mm-theme-dark .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu.mm-theme-dark .mm-listview li.mm-opened.mm-vertical > .mm-panel { background: rgba(255, 255, 255, 0.05); } .mm-menu.mm-theme-dark .mm-divider { background: rgba(255, 255, 255, 0.05); } .mm-menu.mm-theme-dark label.mm-check:before { border-color: rgba(255, 255, 255, 0.8); } .mm-menu.mm-theme-dark em.mm-counter { color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-dark .mm-fixeddivider span { background: rgba(255, 255, 255, 0.05); } .mm-menu.mm-iconpanel.mm-theme-dark .mm-panel.mm-opened { border-color: rgba(0, 0, 0, 0.15); } .mm-menu.mm-iconpanel.mm-theme-dark .mm-subblocker { background: #333333; } .mm-menu.mm-pageshadow.mm-theme-dark:after { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .mm-menu.mm-theme-dark .mm-search input { background: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8); } .mm-menu.mm-theme-dark .mm-noresultsmsg { color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-dark .mm-indexer a { color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-dark label.mm-toggle { background: rgba(0, 0, 0, 0.15); } .mm-menu.mm-theme-dark label.mm-toggle:before { background: #333333; } .mm-menu.mm-theme-dark input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963; } .mm-menu.mm-theme-white { background: white; color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-theme-white .mm-navbar { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-theme-white .mm-navbar > *, .mm-menu.mm-theme-white .mm-navbar a { color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-theme-white .mm-navbar .mm-btn:before, .mm-menu.mm-theme-white .mm-navbar .mm-btn:after { border-color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-theme-white .mm-listview > li:after { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-theme-white .mm-listview > li .mm-prev:before, .mm-menu.mm-theme-white .mm-listview > li .mm-next:after, .mm-menu.mm-theme-white .mm-listview > li .mm-arrow:after { border-color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-theme-white .mm-listview > li .mm-prev:after, .mm-menu.mm-theme-white .mm-listview > li .mm-next:before { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-theme-white .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu.mm-theme-white .mm-listview > li.mm-selected > span { background: rgba(0, 0, 0, 0.05); } .mm-menu.mm-theme-white.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-theme-white.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu.mm-theme-white .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu.mm-theme-white .mm-listview li.mm-opened.mm-vertical > .mm-panel { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-theme-white .mm-divider { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-theme-white label.mm-check:before { border-color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-theme-white em.mm-counter { color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-theme-white .mm-fixeddivider span { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-iconpanel.mm-theme-white .mm-panel.mm-opened { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-iconpanel.mm-theme-white .mm-subblocker { background: white; } .mm-menu.mm-pageshadow.mm-theme-white:after { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .mm-menu.mm-theme-white .mm-search input { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-theme-white .mm-noresultsmsg { color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-theme-white .mm-indexer a { color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-theme-white label.mm-toggle { background: rgba(0, 0, 0, 0.1); } .mm-menu.mm-theme-white label.mm-toggle:before { background: white; } .mm-menu.mm-theme-white input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963; } .mm-menu.mm-theme-black { background: black; color: rgba(255, 255, 255, 0.6); } .mm-menu.mm-theme-black .mm-navbar { border-color: rgba(255, 255, 255, 0.2); } .mm-menu.mm-theme-black .mm-navbar > *, .mm-menu.mm-theme-black .mm-navbar a { color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-black .mm-navbar .mm-btn:before, .mm-menu.mm-theme-black .mm-navbar .mm-btn:after { border-color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-black .mm-listview > li:after { border-color: rgba(255, 255, 255, 0.2); } .mm-menu.mm-theme-black .mm-listview > li .mm-prev:before, .mm-menu.mm-theme-black .mm-listview > li .mm-next:after, .mm-menu.mm-theme-black .mm-listview > li .mm-arrow:after { border-color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-black .mm-listview > li .mm-prev:after, .mm-menu.mm-theme-black .mm-listview > li .mm-next:before { border-color: rgba(255, 255, 255, 0.2); } .mm-menu.mm-theme-black .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu.mm-theme-black .mm-listview > li.mm-selected > span { background: rgba(255, 255, 255, 0.3); } .mm-menu.mm-theme-black.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-theme-black.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu.mm-theme-black .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu.mm-theme-black .mm-listview li.mm-opened.mm-vertical > .mm-panel { background: rgba(255, 255, 255, 0.2); } .mm-menu.mm-theme-black .mm-divider { background: rgba(255, 255, 255, 0.2); } .mm-menu.mm-theme-black label.mm-check:before { border-color: rgba(255, 255, 255, 0.6); } .mm-menu.mm-theme-black em.mm-counter { color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-black .mm-fixeddivider span { background: rgba(255, 255, 255, 0.2); } .mm-menu.mm-iconpanel.mm-theme-black .mm-panel.mm-opened { border-color: rgba(255, 255, 255, 0.2); } .mm-menu.mm-iconpanel.mm-theme-black .mm-subblocker { background: black; } .mm-menu.mm-pageshadow.mm-theme-black:after { content: none; display: none; } .mm-menu.mm-theme-black .mm-search input { background: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6); } .mm-menu.mm-theme-black .mm-noresultsmsg { color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-black .mm-indexer a { color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-black label.mm-toggle { background: rgba(255, 255, 255, 0.2); } .mm-menu.mm-theme-black label.mm-toggle:before { background: black; } .mm-menu.mm-theme-black input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963; } /* jQuery.mmenu tileview extension CSS */ .mm-menu.mm-tileview .mm-listview:after, .mm-menu .mm-tileview.mm-listview:after { content: ''; display: block; clear: both; } .mm-menu.mm-tileview .mm-listview > li, .mm-menu .mm-tileview.mm-listview > li { width: 50%; height: 0; padding: 50% 0 0 0; float: left; position: relative; } .mm-menu.mm-tileview .mm-listview > li:after, .mm-menu .mm-tileview.mm-listview > li:after { left: 0; top: 0; border-right-width: 1px; border-right-style: solid; z-index: -1; } .mm-menu.mm-tileview .mm-listview > li.mm-tile-xs, .mm-menu .mm-tileview.mm-listview > li.mm-tile-xs { width: 12.5%; padding-top: 12.5%; } .mm-menu.mm-tileview .mm-listview > li.mm-tile-s, .mm-menu .mm-tileview.mm-listview > li.mm-tile-s { width: 25%; padding-top: 25%; } .mm-menu.mm-tileview .mm-listview > li.mm-tile-l, .mm-menu .mm-tileview.mm-listview > li.mm-tile-l { width: 75%; padding-top: 75%; } .mm-menu.mm-tileview .mm-listview > li.mm-tile-xl, .mm-menu .mm-tileview.mm-listview > li.mm-tile-xl { width: 100%; padding-top: 100%; } .mm-menu.mm-tileview .mm-listview > li > a, .mm-menu.mm-tileview .mm-listview > li > span, .mm-menu .mm-tileview.mm-listview > li > a, .mm-menu .mm-tileview.mm-listview > li > span { line-height: 1px; text-align: center; padding: 50% 10px 0 10px; margin: 0; position: absolute; top: 0; right: 1px; bottom: 1px; left: 0; } .mm-menu.mm-tileview .mm-listview > li > .mm-next, .mm-menu .mm-tileview.mm-listview > li > .mm-next { width: auto; } .mm-menu.mm-tileview .mm-listview > li > .mm-next:before, .mm-menu.mm-tileview .mm-listview > li > .mm-next:after, .mm-menu .mm-tileview.mm-listview > li > .mm-next:before, .mm-menu .mm-tileview.mm-listview > li > .mm-next:after { content: none; display: none; } .mm-menu.mm-tileview .mm-panel { padding-left: 0; padding-right: 0; } .mm-menu.mm-tileview .mm-panel:after { content: none; display: none; } .mm-menu.mm-tileview .mm-listview { margin: 0; } /* ==================================================================================================================== * FONT-FACE * ====================================================================================================================*/ @font-face { font-family: 'flexslider-icon'; src: url('../fonts/webfont/flexslider-icon.eot'); src: url('../fonts/webfonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/webfonts/flexslider-icon.woff') format('woff'), url('../fonts/webfonts/flexslider-icon.ttf') format('truetype'), url('../fonts/webfonts/flexslider-icon.svg#flexslider-icon') format('svg'); font-weight: normal; font-style: normal; } /* ==================================================================================================================== * RESETS * ====================================================================================================================*/ .flex-container a:hover, .flex-slider a:hover, .flex-container a:focus, .flex-slider a:focus { outline: none; } .slides, .slides > li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flex-pauseplay span { text-transform: capitalize; } /* ==================================================================================================================== * BASE STYLES * ====================================================================================================================*/ .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img { width: 100%; display: block; } .flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .flexslider .slides { display: block; } * html .flexslider .slides { height: 1%; } .no-js .flexslider .slides > li:first-child { display: block; } /* ==================================================================================================================== * DEFAULT THEME * ====================================================================================================================*/ .flexslider { background: #ffffff; position: relative; } .flexslider .slides { zoom: 1; } .flexslider .slides img { height: auto; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .carousel li { margin-right: 5px; } .flex-direction-nav { *height: 0; } .flex-direction-nav a { text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); } .flex-direction-nav a.flex-next:before { content: '\f002'; } .flex-direction-nav .flex-prev { left: -50px; } .flex-direction-nav .flex-next { right: -50px; text-align: right; } .flexslider:hover .flex-direction-nav .flex-prev { opacity: 0.7; left: 10px; } .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1; } .flexslider:hover .flex-direction-nav .flex-next { opacity: 0.7; right: 10px; } .flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; filter: alpha(opacity=0); cursor: default; } .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a .flex-play:before { content: '\f003'; } .flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } /* ==================================================================================================================== * RESPONSIVE * ====================================================================================================================*/ @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px; } .flex-direction-nav .flex-next { opacity: 1; right: 10px; } } /** * BxSlider v4.1.2 - Fully loaded, responsive content slider * http://bxslider.com * * Written by: Steven Wanderski, 2014 * http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * http://bxcreative.com */ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; padding: 0; *zoom: 1; } .bx-wrapper img { width: 100%; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { left: 0; } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: 30px; width: 100%; } /* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background: url(../images/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* PAGER */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(../images/left-arrow.png) no-repeat 0 0 ; } .bx-wrapper .bx-next { right: 10px; background: url(../images/right-arrow.png) no-repeat 0 0; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } /*.bx-wrapper .bx-next:hover { background-position: -43px 0; }*/ .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 52px; height: 52px; text-indent: -9999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(../images/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(../images/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; }