git.roojs.org Git - bootswatch/blob - mPurpose/css/main-green.css

   1 /*--------------------------------------------------------------------------
   2         General Style
   3 --------------------------------------------------------------------------*/
   4 body {
   5   background: url(../img/page-background.png);
   6 }
   7 .section {
   8   padding: 30px 0;
   9   -webkit-transform: translateZ(0);
  10   -moz-transform: translateZ(0);
  11   -o-transform: translateZ(0);
  12   -ms-transform: translateZ(0);
  13   transform: translateZ(0);
  14 }
  15 .section-white {
  16   background: #FFF;
  17 }
  18 .section .container:first-child h1,
  19 .section .container:first-child h2,
  20 .section .container:first-child h3 {
  21   margin-top: 0;
  22   font-weight: 700;
  23 }
  24 .input-micro {
  25   width: 50px;
  26   margin-bottom: 0 !important;
  27 }
  28 textarea:focus,
  29 input[type="text"]:focus,
  30 input[type="password"]:focus,
  31 input[type="datetime"]:focus,
  32 input[type="datetime-local"]:focus,
  33 input[type="date"]:focus,
  34 input[type="month"]:focus,
  35 input[type="time"]:focus,
  36 input[type="week"]:focus,
  37 input[type="number"]:focus,
  38 input[type="email"]:focus,
  39 input[type="url"]:focus,
  40 input[type="search"]:focus,
  41 input[type="tel"]:focus,
  42 input[type="color"]:focus,
  43 .uneditable-input:focus {
  44   border-color: rgba(22, 160, 133, 0.8);
  45   outline: 0;
  46   outline: thin dotted \9;
  47   /* IE6-9 */
  48
  49   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(22, 160, 133, 0.6);
  50   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(22, 160, 133, 0.6);
  51   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(22, 160, 133, 0.6);
  52   color: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(22, 160, 133, 0.6);
  53 }
  54 ul.no-list-style {
  55   list-style-type: none;
  56   margin-left: 0;
  57 }
  58 ul.no-list-style li {
  59   line-height: 28px;
  60 }
  61 div[class*="span"] {
  62   -webkit-transition: all .4s linear;
  63   -moz-transition: all .4s linear;
  64   -o-transition: all .4s linear;
  65   -ms-transition: all .4s linear;
  66   transition: all .4s linear;
  67 }
  68 /*--------------------------------------------------------------------------
  69         Typography Style
  70 --------------------------------------------------------------------------*/
  71 body {
  72   font-family: Arial, Helvetica, sans-serif;
  73   font-size: 14px;
  74   line-height: 20px;
  75   color: #535b60;
  76 }
  77 h1 {
  78   color: #53555c;
  79   font-family: 'Open Sans', sans-serif;
  80   font-weight: 800;
  81 }
  82 h2 {
  83   color: #53555c;
  84   font-family: 'Open Sans', sans-serif;
  85   font-size: 2em;
  86   border-bottom: 2px solid #53555c;
  87   line-height: 1.5em;
  88   margin: 30px 0;
  89   padding-left: 10px;
  90 }
  91 h3 {
  92   font-family: 'Open Sans', sans-serif;
  93   color: #53555c;
  94   font-size: 1.5em;
  95 }
  96 h4 {
  97   font-family: 'Open Sans', sans-serif;
  98   color: #53555c;
  99   margin-bottom: 10px;
 100 }
 101 a {
 102   color: #16a085;
 103 }
 104 a:hover {
 105   color: #0a463a;
 106 }
 107 /*--------------------------------------------------------------------------
 108 +       Services Style
 109 --------------------------------------------------------------------------*/
 110 /* Multicolumn */
 111 .service-wrapper {
 112   background: #FFF;
 113   margin: 20px 10px;
 114   text-align: center;
 115   padding: 30px 20px;
 116   -webkit-border-radius: 5px;
 117   -webkit-background-clip: padding-box;
 118   -moz-border-radius: 5px;
 119   -moz-background-clip: padding;
 120   border-radius: 5px;
 121   background-clip: padding-box;
 122   -webkit-box-shadow: 0 0 3px #999;
 123   -moz-box-shadow: 0 0 3px #999;
 124   box-shadow: 0 0 3px #999;
 125   color: 0 0 3px #999;
 126 }
 127 .service-wrapper h3 {
 128   font-size: 1.2em;
 129   margin: 10px 0 !important;
 130 }
 131 .service-wrapper p {
 132   margin-top: 0;
 133 }
 134 /* Row */
 135 .service-wrapper-row {
 136   padding: 10px 0;
 137 }
 138 .service-wrapper-row h3 {
 139   padding-top: 15px;
 140 }
 141 .service-wrapper-row .service-image {
 142   padding-top: 15px;
 143   text-align: center;
 144 }
 145 .service-wrapper-row .service-image img {
 146   max-width: 80%;
 147   vertical-align: bottom;
 148   bottom: 0;
 149   border: 7px solid #FFF;
 150   -webkit-border-radius: 5px;
 151   -webkit-background-clip: padding-box;
 152   -moz-border-radius: 5px;
 153   -moz-background-clip: padding;
 154   border-radius: 5px;
 155   background-clip: padding-box;
 156   -webkit-box-shadow: 0 0 8px #999;
 157   -moz-box-shadow: 0 0 8px #999;
 158   box-shadow: 0 0 8px #999;
 159   color: 0 0 8px #999;
 160 }
 161 /*--------------------------------------------------------------------------
 162 +       Pricing Table Style
 163 --------------------------------------------------------------------------*/
 164 .pricing-plan {
 165   float: left;
 166   text-align: center;
 167   background: #fafafa;
 168   position: relative;
 169   width: 48%;
 170   margin: 10px 1% 10px 0;
 171   padding: 20px;
 172   -webkit-border-radius: 7px;
 173   -webkit-background-clip: padding-box;
 174   -moz-border-radius: 7px;
 175   -moz-background-clip: padding;
 176   border-radius: 7px;
 177   background-clip: padding-box;
 178   -webkit-box-sizing: border-box;
 179   -moz-box-sizing: border-box;
 180   box-sizing: border-box;
 181   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
 182   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
 183   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
 184   color: 0 1px 8px rgba(0, 0, 0, 0.4);
 185   -webkit-transition: -webkit-box-shadow .25s linear;
 186   -moz-transition: -moz-box-shadow .25s linear;
 187   -o-transition: box-shadow .25s linear;
 188   -ms-transition: box-shadow .25s linear;
 189   transition: box-shadow .25s linear;
 190 }
 191 .pricing-plan:hover {
 192   -webkit-box-shadow: 0 0 8px #333;
 193   -moz-box-shadow: 0 0 8px #333;
 194   box-shadow: 0 0 8px #333;
 195   color: 0 0 8px #333;
 196   z-index: 5;
 197 }
 198 .pricing-plan .pricing-plan-title {
 199   position: relative;
 200   margin: -20px -10px 20px;
 201   padding: 20px;
 202   line-height: 1;
 203   font-size: 16px;
 204   font-weight: bold;
 205   color: #595f6b;
 206   border-bottom: 1px dashed #d2d2d2;
 207 }
 208 .pricing-plan .pricing-plan-title:before {
 209   content: '';
 210   position: absolute;
 211   bottom: -1px;
 212   left: 0;
 213   right: 0;
 214   height: 1px;
 215   background-size: 3px 1px;
 216   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjZDJkMmQyIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IiIgc3RvcC1jb2xvcj0iI2QyZDJkMiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPjwvc3ZnPg==);
 217   background-image: -moz-linear-gradient(left, white, white 33%, #d2d2d2 34%, #d2d2d2);
 218   background-image: -webkit-linear-gradient(left, white, white 33%, #d2d2d2 34%, #d2d2d2);
 219   background-image: -o-linear-gradient(left, white, white 33%, #d2d2d2 34%, #d2d2d2);
 220   background-image: linear-gradient(to right, white, white 33%, #d2d2d2 34%, #d2d2d2);
 221 }
 222 .pricing-plan .pricing-plan-price {
 223   margin: 0 auto 20px;
 224   width: 90px;
 225   height: 90px;
 226   line-height: 90px;
 227   font-size: 19px;
 228   font-weight: bold;
 229   color: white;
 230   background: #595f6b;
 231   -webkit-border-radius: 45px;
 232   -webkit-background-clip: padding-box;
 233   -moz-border-radius: 45px;
 234   -moz-background-clip: padding;
 235   border-radius: 45px;
 236   background-clip: padding-box;
 237 }
 238 .pricing-plan .pricing-plan-price span {
 239   font-size: 12px;
 240   font-weight: normal;
 241   color: rgba(255, 255, 255, 0.9);
 242 }
 243 .pricing-plan .pricing-plan-features {
 244   margin-bottom: 20px;
 245   margin-left: 0;
 246   padding: 0;
 247   line-height: 2;
 248   font-size: 12px;
 249   color: #999;
 250   text-align: center;
 251   list-style-type: none;
 252 }
 253 .pricing-plan .pricing-plan-features li strong {
 254   font-weight: bold;
 255   color: #888;
 256 }
 257 .pricing-plan .pricing-plan-promote {
 258   margin: 0;
 259   padding: 40px 20px;
 260   background-color: white;
 261   border-width: 2px;
 262   -webkit-border-radius: 7px;
 263   -webkit-background-clip: padding-box;
 264   -moz-border-radius: 7px;
 265   -moz-background-clip: padding;
 266   border-radius: 7px;
 267   background-clip: padding-box;
 268   z-index: 4;
 269 }
 270 .ribbon-wrapper {
 271   width: 85px;
 272   height: 88px;
 273   overflow: hidden;
 274   position: absolute;
 275   top: 0;
 276   right: 0;
 277 }
 278 .price-ribbon {
 279   font: bold 15px Sans-Serif;
 280   color: #333;
 281   text-align: center;
 282   text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
 283   position: relative;
 284   padding: 7px 0;
 285   left: -5px;
 286   top: 15px;
 287   width: 120px;
 288   background-color: #FFF;
 289   color: #6a6340;
 290   -webkit-transform: rotate(45deg);
 291   -moz-transform: rotate(45deg);
 292   -o-transform: rotate(45deg);
 293   -ms-transform: rotate(45deg);
 294   transform: rotate(45deg);
 295   -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 296   -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 297   box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 298   color: 0px 0px 3px rgba(0,0,0,0.3);
 299 }
 300 .ribbon-green {
 301   background-color: #BFDC7A;
 302 }
 303 .ribbon-blue {
 304   background-color: #5ACBFF;
 305 }
 306 .ribbon-orange {
 307   background-color: #FF9542;
 308 }
 309 .ribbon-red {
 310   background-color: #FF7373;
 311 }
 312 @media (min-width: 768px) {
 313   .pricing-plan {
 314     width: 25%;
 315     margin: 20px 0;
 316     padding: 20px;
 317     -webkit-border-radius: 0;
 318     -webkit-background-clip: padding-box;
 319     -moz-border-radius: 0;
 320     -moz-background-clip: padding;
 321     border-radius: 0;
 322     background-clip: padding-box;
 323   }
 324   .pricing-plan:first-child {
 325     -webkit-border-top-left-radius: 7px;
 326     -moz-border-radius-topleft: 7px;
 327     border-top-left-radius: 7px;
 328     -webkit-border-bottom-left-radius: 7px;
 329     -webkit-background-clip: padding-box;
 330     -moz-border-radius-bottomleft: 7px;
 331     -moz-background-clip: padding;
 332     border-bottom-left-radius: 7px;
 333     background-clip: padding-box;
 334   }
 335   .pricing-plan:last-child {
 336     border-width: 2px;
 337     -webkit-border-top-right-radius: 7px;
 338     -moz-border-radius-topright: 7px;
 339     border-top-right-radius: 7px;
 340     -webkit-border-bottom-right-radius: 7px;
 341     -webkit-background-clip: padding-box;
 342     -moz-border-radius-bottomright: 7px;
 343     -moz-background-clip: padding;
 344     border-bottom-right-radius: 7px;
 345     background-clip: padding-box;
 346   }
 347   .pricing-plan-promote {
 348     background: #fff;
 349     padding: 40px;
 350     margin-top: 0;
 351     -webkit-border-radius: 7px;
 352     -webkit-background-clip: padding-box;
 353     -moz-border-radius: 7px;
 354     -moz-background-clip: padding;
 355     border-radius: 7px;
 356     background-clip: padding-box;
 357     z-index: 4;
 358   }
 359 }
 360 /*--------------------------------------------------------------------------
 361 +       Contact Us Style
 362 --------------------------------------------------------------------------*/
 363 #contact-us-map {
 364   height: 300px;
 365   -webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 366   -moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 367   box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 368   color: inset 0 1px #fff,0 0 8px #c8cfe6;
 369 }
 370 .contact-us-details {
 371   margin: 20px 0;
 372   font-size: 0.9em;
 373 }
 374 /*--------------------------------------------------------------------------
 375 +       Video Wrapper Style
 376 --------------------------------------------------------------------------*/
 377 .video-wrapper {
 378   -webkit-box-shadow: 0 0 5px #000;
 379   -moz-box-shadow: 0 0 5px #000;
 380   box-shadow: 0 0 5px #000;
 381   color: 0 0 5px #000;
 382   margin: 20px 0;
 383 }
 384 /*--------------------------------------------------------------------------
 385 +       Call to Action Bar Style
 386 --------------------------------------------------------------------------*/
 387 .calltoaction-wrapper {
 388   text-align: center;
 389 }
 390 .calltoaction-wrapper h3 {
 391   display: inline-block;
 392   line-height: 36px;
 393   margin-right: 10px;
 394   margin-bottom: 0;
 395 }
 396 .calltoaction-wrapper a {
 397   vertical-align: top;
 398 }
 399 /*--------------------------------------------------------------------------
 400 +       Testimonials Style
 401 --------------------------------------------------------------------------*/
 402 .testimonial blockquote {
 403   margin: 0;
 404   padding: 0;
 405   border-left: none;
 406 }
 407 .testimonial blockquote p {
 408   font-size: 0.9em;
 409   margin-bottom: 20px;
 410   line-height: 1.5;
 411 }
 412 .testimonial .testimonial-bubble {
 413   text-align: justify;
 414   -webkit-border-radius: 4px;
 415   -webkit-background-clip: padding-box;
 416   -moz-border-radius: 4px;
 417   -moz-background-clip: padding;
 418   border-radius: 4px;
 419   background-clip: padding-box;
 420   padding: 0 20px 20px 20px;
 421   margin: 35px 10px 20px 10px;
 422   background: #FFF;
 423   position: relative;
 424   -webkit-box-sizing: border-box;
 425   -moz-box-sizing: border-box;
 426   box-sizing: border-box;
 427   -webkit-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
 428   -moz-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
 429   box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
 430   color: inset 0 1px #fff,0 1px 2px #c8cfe6;
 431 }
 432 .testimonial .testimonial-bubble::before {
 433   background-color: #FFF;
 434   content: "\00a0";
 435   display: block;
 436   height: 20px;
 437   width: 20px;
 438   top: -10px;
 439   left: 45%;
 440   position: relative;
 441   -webkit-transform: rotate(45deg);
 442   -moz-transform: rotate(45deg);
 443   -o-transform: rotate(45deg);
 444   -ms-transform: rotate(45deg);
 445   transform: rotate(45deg);
 446 }
 447 .testimonial .author-photo {
 448   text-align: center;
 449 }
 450 .testimonial .author-photo img {
 451   margin: auto;
 452   border: 5px solid #FFF;
 453   -webkit-border-radius: 100px;
 454   -webkit-background-clip: padding-box;
 455   -moz-border-radius: 100px;
 456   -moz-background-clip: padding;
 457   border-radius: 100px;
 458   background-clip: padding-box;
 459   -webkit-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
 460   -moz-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
 461   box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
 462   color: inset 0 1px #fff,0 1px 2px #c8cfe6;
 463 }
 464 .testimonial .author-info {
 465   font-weight: 400;
 466   font-size: 0.8em;
 467 }
 468 /*--------------------------------------------------------------------------
 469 +       Clients Logos Style
 470 --------------------------------------------------------------------------*/
 471 .clients-logo-wrapper img {
 472   max-width: 100%;
 473 }
 474 /*--------------------------------------------------------------------------
 475 +       News Style
 476 --------------------------------------------------------------------------*/
 477 .featured-news .caption,
 478 .latest-news .caption {
 479   padding: 10px 0 5px 0;
 480 }
 481 .featured-news .caption a,
 482 .latest-news .caption a {
 483   font-size: 1.1em;
 484   font-weight: 600;
 485   color: #535b60;
 486 }
 487 .featured-news .intro,
 488 .latest-news .intro {
 489   padding-bottom: 10px;
 490   font-size: 0.9em;
 491 }
 492 .featured-news .intro a,
 493 .latest-news .intro a {
 494   white-space: nowrap;
 495 }
 496 .featured-news .date,
 497 .latest-news .date {
 498   font-size: 0.7em;
 499   color: #999;
 500 }
 501 .featured-news img,
 502 .latest-news img {
 503   max-width: 100%;
 504   margin: 10px 0 10px 0;
 505   -webkit-border-radius: 5px;
 506   -webkit-background-clip: padding-box;
 507   -moz-border-radius: 5px;
 508   -moz-background-clip: padding;
 509   border-radius: 5px;
 510   background-clip: padding-box;
 511   -webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 512   -moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 513   box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 514   color: inset 0 1px #fff,0 0 8px #c8cfe6;
 515 }
 516 /*--------------------------------------------------------------------------
 517 +       Frequently Asked Questions Style
 518 --------------------------------------------------------------------------*/
 519 .faq-wrapper h3 {
 520   margin-top: 20px !important;
 521 }
 522 .faq-wrapper .accordion-inner {
 523   margin: 10px 0 10px 20px;
 524   padding: 0 10px;
 525   font-size: 0.9em;
 526 }
 527 .faq-wrapper .accordion-inner .answer {
 528   font-weight: 600;
 529 }
 530 /*--------------------------------------------------------------------------
 531 +       Blog Style
 532 --------------------------------------------------------------------------*/
 533 /* Posts List */
 534 .blog-post {
 535   background: #FFF;
 536   position: relative;
 537   margin: 20px 0;
 538   border: 7px solid #FFF;
 539   -webkit-border-radius: 5px;
 540   -webkit-background-clip: padding-box;
 541   -moz-border-radius: 5px;
 542   -moz-background-clip: padding;
 543   border-radius: 5px;
 544   background-clip: padding-box;
 545   -webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 546   -moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 547   box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 548   color: inset 0 1px #fff,0 0 8px #c8cfe6;
 549 }
 550 .blog-post img {
 551   max-width: 100%;
 552 }
 553 .blog-post .post-info {
 554   background: #000;
 555   background: rgba(0, 0, 0, 0.6);
 556   color: #FFF;
 557   line-height: 1.2;
 558   position: absolute;
 559   padding: 5px;
 560   left: 10px;
 561   top: 10px;
 562   -webkit-border-radius: 5px;
 563   -webkit-background-clip: padding-box;
 564   -moz-border-radius: 5px;
 565   -moz-background-clip: padding;
 566   border-radius: 5px;
 567   background-clip: padding-box;
 568 }
 569 .blog-post .post-comments-count {
 570   text-align: center;
 571 }
 572 .post-info .post-comments-count {
 573   padding-top: 5px;
 574 }
 575 .post-info .post-comments-count i {
 576   margin-right: 5px;
 577 }
 578 .post-info .post-comments-count a {
 579   color: #FFF;
 580 }
 581 .post-info .post-date .date {
 582   font-size: 0.7em;
 583   font-weight: 600;
 584 }
 585 .post-title h3 {
 586   font-size: 1.2em;
 587   border-bottom: 1px dotted #828282;
 588   margin: 0 20px;
 589   padding-top: 10px;
 590 }
 591 .post-title h3 a {
 592   color: #535b60;
 593 }
 594 .post-summary {
 595   margin: 10px 20px;
 596 }
 597 .post-summary p {
 598   color: #828282;
 599   font-size: 0.9em;
 600   text-align: justify;
 601 }
 602 .post-more {
 603   text-align: right;
 604   padding: 0 20px 20px 0;
 605 }
 606 /* Single Post */
 607 .blog-single-post {
 608   padding: 10px 30px;
 609 }
 610 .single-post-title h3 {
 611   font-size: 1.5em;
 612   margin: 0;
 613 }
 614 .single-post-info {
 615   margin-bottom: 20px;
 616   padding-bottom: 10px;
 617   border-bottom: 1px dotted #828282;
 618 }
 619 .single-post-info i {
 620   color: #333;
 621   margin-right: 5px;
 622 }
 623 .single-post-image {
 624   text-align: center;
 625 }
 626 .single-post-image img {
 627   -webkit-box-shadow: 0 0 5px #000;
 628   -moz-box-shadow: 0 0 5px #000;
 629   box-shadow: 0 0 5px #000;
 630   color: 0 0 5px #000;
 631 }
 632 .single-post-content {
 633   margin: 30px 0 20px 0;
 634   padding-bottom: 20px;
 635   border-bottom: 2px dotted #CCC;
 636 }
 637 .single-post-content p {
 638   color: #828282;
 639   font-size: 0.9em;
 640   text-align: justify;
 641 }
 642 .post-comments {
 643   list-style-type: none;
 644   margin-left: 0;
 645   margin-bottom: 40px;
 646   padding: 0;
 647 }
 648 .post-comments ul {
 649   list-style-type: none;
 650   margin-left: 30px;
 651   padding: 0;
 652 }
 653 .comment-wrapper p {
 654   margin: 0;
 655   position: relative;
 656   border: 1px solid #CCC;
 657   padding: 10px;
 658   margin-bottom: 10px;
 659   -webkit-border-radius: 3px;
 660   -webkit-background-clip: padding-box;
 661   -moz-border-radius: 3px;
 662   -moz-background-clip: padding;
 663   border-radius: 3px;
 664   background-clip: padding-box;
 665 }
 666 .comment-author {
 667   font-size: 1.3em;
 668   font-weight: 600;
 669   margin-bottom: 10px;
 670 }
 671 .comment-author img {
 672   max-width: 50px;
 673   -webkit-border-radius: 25px;
 674   -webkit-background-clip: padding-box;
 675   -moz-border-radius: 25px;
 676   -moz-background-clip: padding;
 677   border-radius: 25px;
 678   background-clip: padding-box;
 679   margin-right: 10px;
 680 }
 681 .comment-date {
 682   font-size: 0.9em;
 683   margin-right: 20px;
 684 }
 685 .comment-actions {
 686   text-align: right;
 687   opacity: 0.6;
 688   -webkit-transition: opacity .25s linear;
 689   -moz-transition: opacity .25s linear;
 690   -o-transition: opacity .25s linear;
 691   -ms-transition: opacity .25s linear;
 692   transition: opacity .25s linear;
 693 }
 694 .comment-actions:hover {
 695   text-align: right;
 696   opacity: 1;
 697 }
 698 .comment-actions i {
 699   color: #333;
 700 }
 701 .comment-reply-btn {
 702   margin-left: 10px;
 703 }
 704 .blog-sidebar h4 {
 705   margin-top: 20px;
 706   font-weight: 700;
 707 }
 708 .blog-sidebar h4:first-child {
 709   margin-top: 0;
 710 }
 711 .blog-sidebar ul {
 712   list-style-type: none;
 713   margin-left: 0;
 714   padding: 0;
 715 }
 716 .blog-sidebar .recent-posts li,
 717 .blog-sidebar .blog-categories li {
 718   padding: 5px 20px 5px 0;
 719   border-top: 1px solid #D5D5D5;
 720 }
 721 .blog-sidebar .recent-posts li:last-child,
 722 .blog-sidebar .blog-categories li:last-child {
 723   border-bottom: 1px solid #D5D5D5;
 724 }
 725 .blog-sidebar .recent-posts a,
 726 .blog-sidebar .blog-categories a {
 727   color: #535b60;
 728 }
 729 /*--------------------------------------------------------------------------
 730 +       E-commerce Style
 731 --------------------------------------------------------------------------*/
 732 .shop-item {
 733   position: relative;
 734   background: #FFF;
 735   padding-bottom: 10px;
 736   margin-top: 20px;
 737   margin-bottom: 10px;
 738   border: 8px solid #FFF;
 739   -webkit-border-radius: 5px;
 740   -webkit-background-clip: padding-box;
 741   -moz-border-radius: 5px;
 742   -moz-background-clip: padding;
 743   border-radius: 5px;
 744   background-clip: padding-box;
 745   -webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 746   -moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 747   box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 748   color: inset 0 1px #fff,0 0 8px #c8cfe6;
 749 }
 750 .shop-item img {
 751   max-width: 100%;
 752 }
 753 .shop-item .image {
 754   text-align: center;
 755 }
 756 .shop-item .title {
 757   padding: 20px 0 10px;
 758 }
 759 .shop-item .title h3 {
 760   font-size: 0.9em;
 761   margin: 0 10px;
 762   text-align: center;
 763 }
 764 .shop-item .title h3 a {
 765   color: #535b60;
 766   text-transform: uppercase;
 767 }
 768 .shop-item .colors {
 769   text-align: center;
 770   margin-bottom: 10px;
 771 }
 772 .shop-item .colors span {
 773   display: inline-block;
 774   *display: inline;
 775   width: 8px;
 776   height: 8px;
 777   border-width: 1px;
 778   border-style: solid;
 779   margin: 2px;
 780 }
 781 .shop-item .price {
 782   color: #535b60;
 783   font-size: 1.5em;
 784   text-align: center;
 785   margin-bottom: 20px;
 786   font-weight: 600;
 787   -webkit-border-radius: 7px;
 788   -webkit-background-clip: padding-box;
 789   -moz-border-radius: 7px;
 790   -moz-background-clip: padding;
 791   border-radius: 7px;
 792   background-clip: padding-box;
 793 }
 794 .shop-item .price .price-was {
 795   color: #A7A7A7;
 796   font-size: 0.8em;
 797   text-decoration: line-through;
 798 }
 799 .shop-item .description {
 800   color: #828282;
 801   font-size: 0.9em;
 802   text-align: justify;
 803   margin: 0 10px;
 804 }
 805 .shop-item .description p {
 806   border-top: 1px solid #ECECEC;
 807   padding: 10px;
 808   margin: 0;
 809 }
 810 .shop-item .actions {
 811   border-top: 1px solid #ECECEC;
 812   margin: 0 10px;
 813   padding-top: 20px;
 814   text-align: center;
 815 }
 816 .shop-item .actions span {
 817   font-size: 0.8em;
 818   white-space: nowrap;
 819 }
 820 .colors {
 821   text-align: center;
 822   margin-bottom: 10px;
 823 }
 824 .colors span {
 825   display: inline-block;
 826   *display: inline;
 827   width: 8px;
 828   height: 8px;
 829   border-width: 1px;
 830   border-style: solid;
 831   margin: 2px;
 832 }
 833 span.color-white {
 834   background-color: #D7D7CF;
 835   border-color: #c0c0b3;
 836 }
 837 span.color-black {
 838   background-color: #000;
 839   border-color: #000000;
 840 }
 841 span.color-blue {
 842   background-color: #073A52;
 843   border-color: #031923;
 844 }
 845 span.color-orange {
 846   background-color: #D56E1D;
 847   border-color: #a85717;
 848 }
 849 span.color-green {
 850   background-color: #5C6632;
 851   border-color: #3d4421;
 852 }
 853 span.color-red {
 854   background-color: #DA1111;
 855   border-color: #ab0d0d;
 856 }
 857 /*--------------------------------------------------------------------------
 858 +       Product Details Page Style
 859 --------------------------------------------------------------------------*/
 860 .product-image-large {
 861   border: 8px solid #FFF;
 862   text-align: center;
 863   margin-bottom: 10px;
 864   -webkit-border-radius: 5px;
 865   -webkit-background-clip: padding-box;
 866   -moz-border-radius: 5px;
 867   -moz-background-clip: padding;
 868   border-radius: 5px;
 869   background-clip: padding-box;
 870   -webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 871   -moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 872   box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
 873   color: inset 0 1px #fff,0 0 8px #c8cfe6;
 874 }
 875 .product-image-large img {
 876   max-width: 100%;
 877 }
 878 .product-details h4,
 879 .product-details h5 {
 880   font-weight: 700;
 881 }
 882 .product-details h4 {
 883   margin-bottom: 20px;
 884 }
 885 .product-details h5 {
 886   margin-top: 20px;
 887 }
 888 .product-details .price {
 889   font-size: 1.4em;
 890   font-weight: 700;
 891   text-align: left;
 892   padding: 5px;
 893   background: rgba(255, 255, 255, 0.6);
 894   display: inline;
 895   -webkit-border-radius: 5px;
 896   -webkit-background-clip: padding-box;
 897   -moz-border-radius: 5px;
 898   -moz-background-clip: padding;
 899   border-radius: 5px;
 900   background-clip: padding-box;
 901 }
 902 .product-details .price-was {
 903   text-decoration: line-through;
 904   font-size: 0.8em;
 905   font-weight: normal;
 906 }
 907 .product-details .shop-item-selections {
 908   width: 100%;
 909 }
 910 .product-details .shop-item-selections td {
 911   line-height: 36px;
 912 }
 913 .product-details .shop-item-selections td:first-child {
 914   width: 30%;
 915 }
 916 .product-details .choose-item-color span {
 917   display: inline-block;
 918   *display: inline;
 919   width: 10px;
 920   height: 10px;
 921   border-width: 1px;
 922   border-style: solid;
 923   margin-bottom: -1px;
 924   margin-right: 2px;
 925 }
 926 .product-details-nav {
 927   margin-top: 30px !important;
 928   margin-left: 0 !important;
 929 }
 930 .product-detail-info {
 931   background: #fff;
 932   border-top: 0;
 933   border-left: 1px;
 934   border-right: 1px;
 935   border-bottom: 1px;
 936   border-color: #ddd;
 937   border-style: solid;
 938   padding: 20px 30px;
 939 }
 940 .product-detail-info p,
 941 .product-detail-info ul {
 942   font-size: 0.9em;
 943 }
 944 .product-detail-info table {
 945   width: 100%;
 946 }
 947 .product-detail-info table td {
 948   font-size: 0.9em;
 949   width: 50%;
 950   line-height: 28px;
 951   border-bottom: 1px solid #E7E7E7;
 952 }
 953 .product-detail-info table td:first-child {
 954   font-weight: 600;
 955 }
 956 .product-detail-info table tr:last-child td {
 957   border-bottom: 0;
 958 }
 959 /*--------------------------------------------------------------------------
 960 +       Shopping Cart Style
 961 --------------------------------------------------------------------------*/
 962 .shopping-cart {
 963   margin: 10px 0 0 0;
 964   width: 100%;
 965   border-collapse: separate;
 966   border-spacing: 0 10px;
 967 }
 968 .shopping-cart a {
 969   color: #535b60;
 970 }
 971 .shopping-cart tr {
 972   background: #FFF;
 973 }
 974 .shopping-cart td {
 975   padding: 10px;
 976 }
 977 .shopping-cart td:first-child {
 978   -webkit-border-radius: 5px 0 0 5px;
 979   -webkit-background-clip: padding-box;
 980   -moz-border-radius: 5px 0 0 5px;
 981   -moz-background-clip: padding;
 982   border-radius: 5px 0 0 5px;
 983   background-clip: padding-box;
 984   margin-left: 10px;
 985 }
 986 .shopping-cart td:last-child {
 987   -webkit-border-radius: 0 5px 5px 0;
 988   -webkit-background-clip: padding-box;
 989   -moz-border-radius: 0 5px 5px 0;
 990   -moz-background-clip: padding;
 991   border-radius: 0 5px 5px 0;
 992   background-clip: padding-box;
 993   margin-right: 10px;
 994 }
 995 .shopping-cart .image,
 996 .shopping-cart .image img {
 997   max-width: 150px;
 998 }
 999 .shopping-cart .title {
1000   font-size: 1.1em;
1001 }
1002 .shopping-cart .feature {
1003   font-size: 0.8em;
1004 }
1005 .shopping-cart .color span {
1006   display: inline-block;
1007   *display: inline;
1008   width: 8px;
1009   height: 8px;
1010   border-width: 1px;
1011   border-style: solid;
1012 }
1013 .shopping-cart .quantity {
1014   width: 80px;
1015 }
1016 .shopping-cart .price {
1017   color: #535b60;
1018   font-size: 1.2em;
1019   width: 80px;
1020   text-align: center;
1021 }
1022 .shopping-cart .actions {
1023   width: 80px;
1024 }
1025 .shopping-cart .actions .btn {
1026   margin-bottom: 5px;
1027 }
1028 .cart-totals {
1029   margin: 20px 0 30px 0;
1030   border-top: 2px solid #535b60;
1031   font-size: 1.1em;
1032   line-height: 24px;
1033   text-align: right;
1034   width: 100%;
1035 }
1036 .cart-totals td {
1037   width: 150px;
1038   padding: 3px 0;
1039 }
1040 .cart-totals .cart-grand-total {
1041   font-size: 1.3em;
1042 }
1043 @media (max-width: 500px) {
1044   .shopping-cart .image {
1045     display: none;
1046   }
1047   .cart-item-title {
1048     font-size: 0.8em;
1049   }
1050 }
1051 /*--------------------------------------------------------------------------
1052 +       Products Slider Style
1053 --------------------------------------------------------------------------*/
1054 .products-slider .shop-item {
1055   border: 0;
1056   margin: 0;
1057   padding: 0;
1058   width: 25%;
1059   float: left;
1060   display: block;
1061   position: relative;
1062   -webkit-border-radius: 5px;
1063   -webkit-background-clip: padding-box;
1064   -moz-border-radius: 5px;
1065   -moz-background-clip: padding;
1066   border-radius: 5px;
1067   background-clip: padding-box;
1068   -webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1069   -moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1070   box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1071   color: inset 0 1px #fff,0 0 8px #c8cfe6;
1072 }
1073 .products-slider .shop-item img {
1074   -webkit-border-radius: 5px 5px 0 0;
1075   -webkit-background-clip: padding-box;
1076   -moz-border-radius: 5px 5px 0 0;
1077   -moz-background-clip: padding;
1078   border-radius: 5px 5px 0 0;
1079   background-clip: padding-box;
1080 }
1081 .products-slider .shop-item .title h3 a {
1082   font-size: 1em;
1083   font-weight: 400;
1084 }
1085 .products-slider .shop-item .price {
1086   font-size: 1.1em;
1087   font-weight: 400;
1088   margin-bottom: 10px;
1089 }
1090 .products-slider .shop-item .actions {
1091   padding: 10px 0;
1092 }
1093 @media (max-width: 768px) {
1094   .products-slider .shop-item {
1095     width: 34%;
1096   }
1097 }
1098 @media (max-width: 479px) {
1099   .products-slider .shop-item {
1100     width: 100%;
1101   }
1102 }
1103 /*--------------------------------------------------------------------------
1104 +       Events List Style
1105 --------------------------------------------------------------------------*/
1106 .events-list {
1107   width: 100%;
1108   font-size: 0.9em;
1109 }
1110 .events-list tr td {
1111   padding: 5px 20px 5px 0;
1112 }
1113 .events-list tr td:last-child {
1114   padding: 5px 0;
1115   text-align: right;
1116 }
1117 .events-list tr:hover .event-date {
1118   border-left: 5px solid #16a085;
1119 }
1120 .events-list .event-date {
1121   margin: 3px 0;
1122   padding: 2px 10px;
1123   border-left: 5px solid #CFCFCF;
1124   -webkit-transition: all .25s linear;
1125   -moz-transition: all .25s linear;
1126   -o-transition: all .25s linear;
1127   -ms-transition: all .25s linear;
1128   transition: all .25s linear;
1129 }
1130 .events-list .event-date .event-day {
1131   color: #808080;
1132   font-size: 1.5em;
1133   font-weight: 600;
1134   text-align: center;
1135 }
1136 .events-list .event-date .event-month {
1137   color: #CFCFCF;
1138   font-size: 1.1em;
1139   font-weight: 600;
1140   text-align: center;
1141 }
1142 .events-list .event-date .event-venue,
1143 .events-list .event-date .event-price {
1144   white-space: nowrap;
1145 }
1146 /*--------------------------------------------------------------------------
1147 +       Jobs list Style
1148 --------------------------------------------------------------------------*/
1149 .jobs-list {
1150   width: 100%;
1151 }
1152 .jobs-list th {
1153   font-size: 1.2em;
1154   text-align: left;
1155   padding: 10px 0;
1156 }
1157 .jobs-list td {
1158   padding: 5px 20px 5px 0;
1159   border-top: 1px solid #E6E6E6;
1160 }
1161 .jobs-list tr:last-child td {
1162   border-bottom: 1px solid #E6E6E6;
1163 }
1164 .job-position a {
1165   color: #535b60;
1166   font-size: 1.1em;
1167 }
1168 .job-location,
1169 .job-type {
1170   font-size: 0.9em;
1171 }
1172 .join-us-promo blockquote {
1173   margin: 0;
1174   padding: 0;
1175   border-left: none;
1176 }
1177 .join-us-promo blockquote p {
1178   font-size: 1.1em;
1179   margin-bottom: 20px;
1180   line-height: 1.5;
1181 }
1182 .join-us-promo .author-info {
1183   font-weight: 400;
1184   font-size: 0.8em;
1185 }
1186 .join-us-promo .author-photo {
1187   text-align: center;
1188 }
1189 .join-us-promo .author-photo img {
1190   margin: auto;
1191   border: 5px solid #FFF;
1192   -webkit-border-radius: 70px;
1193   -webkit-background-clip: padding-box;
1194   -moz-border-radius: 70px;
1195   -moz-background-clip: padding;
1196   border-radius: 70px;
1197   background-clip: padding-box;
1198   -webkit-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
1199   -moz-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
1200   box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;
1201   color: inset 0 1px #fff,0 1px 2px #c8cfe6;
1202 }
1203 .join-us-bubble {
1204   text-align: justify;
1205   -webkit-border-radius: 4px;
1206   -webkit-background-clip: padding-box;
1207   -moz-border-radius: 4px;
1208   -moz-background-clip: padding;
1209   border-radius: 4px;
1210   background-clip: padding-box;
1211   padding: 20px 20px 0 20px;
1212   margin-top: 30px;
1213   margin-bottom: 30px;
1214   background: #FFF;
1215   position: relative;
1216   -webkit-box-sizing: border-box;
1217   -moz-box-sizing: border-box;
1218   box-sizing: border-box;
1219   -webkit-box-shadow: inset 0 1px #fff,0 0 4px #c8cfe6;
1220   -moz-box-shadow: inset 0 1px #fff,0 0 4px #c8cfe6;
1221   box-shadow: inset 0 1px #fff,0 0 4px #c8cfe6;
1222   color: inset 0 1px #fff,0 0 4px #c8cfe6;
1223 }
1224 .join-us-bubble::after {
1225   background: #FFF;
1226   content: "\00a0";
1227   display: block;
1228   height: 20px;
1229   width: 20px;
1230   bottom: -10px;
1231   left: 45%;
1232   position: relative;
1233   -webkit-transform: rotate(45deg);
1234   -moz-transform: rotate(45deg);
1235   -o-transform: rotate(45deg);
1236   -ms-transform: rotate(45deg);
1237   transform: rotate(45deg);
1238   -webkit-box-shadow: inset 0 1px #fff,1px 1px 1px #c8cfe6;
1239   -moz-box-shadow: inset 0 1px #fff,1px 1px 1px #c8cfe6;
1240   box-shadow: inset 0 1px #fff,1px 1px 1px #c8cfe6;
1241   color: inset 0 1px #fff,1px 1px 1px #c8cfe6;
1242 }
1243 .job-details-wrapper p {
1244   text-align: justify;
1245 }
1246 /*--------------------------------------------------------------------------
1247 +       Login/Register/Reset Password Forms Style
1248 --------------------------------------------------------------------------*/
1249 .basic-login {
1250   background: rgba(255, 255, 255, 0.8);
1251   padding: 20px 20px 10px 20px;
1252   -webkit-border-radius: 5px;
1253   -webkit-background-clip: padding-box;
1254   -moz-border-radius: 5px;
1255   -moz-background-clip: padding;
1256   border-radius: 5px;
1257   background-clip: padding-box;
1258   -webkit-box-shadow: inset 0 1px #fff,0 0 4px #c8cfe6;
1259   -moz-box-shadow: inset 0 1px #fff,0 0 4px #c8cfe6;
1260   box-shadow: inset 0 1px #fff,0 0 4px #c8cfe6;
1261   color: inset 0 1px #fff,0 0 4px #c8cfe6;
1262 }
1263 .basic-login form {
1264   margin: 0;
1265 }
1266 .basic-login label {
1267   line-height: 30px;
1268   font-size: 1.2em;
1269 }
1270 .basic-login input[type="checkbox"] {
1271   margin-top: 4px;
1272 }
1273 .social-login p {
1274   text-align: center;
1275   font-size: 1.2em;
1276   font-style: italic;
1277   padding: 20px 0;
1278 }
1279 .social-login .social-login-buttons {
1280   text-align: center;
1281 }
1282 .social-login .social-login-buttons a {
1283   position: relative;
1284   display: inline-block;
1285   white-space: nowrap;
1286   height: 35px;
1287   line-height: 35px;
1288   padding-right: 15px;
1289   margin: 10px 5px;
1290   color: #fff;
1291   font-size: 1.1em;
1292   text-align: left;
1293   -webkit-border-radius: 3px;
1294   -webkit-background-clip: padding-box;
1295   -moz-border-radius: 3px;
1296   -moz-background-clip: padding;
1297   border-radius: 3px;
1298   background-clip: padding-box;
1299   -webkit-transition: opacity .2s linear;
1300   -moz-transition: opacity .2s linear;
1301   -o-transition: opacity .2s linear;
1302   -ms-transition: opacity .2s linear;
1303   transition: opacity .2s linear;
1304   -webkit-transform: translateZ(0);
1305   -moz-transform: translateZ(0);
1306   -o-transform: translateZ(0);
1307   -ms-transform: translateZ(0);
1308   transform: translateZ(0);
1309 }
1310 .social-login .social-login-buttons a:hover {
1311   opacity: 0.8;
1312   text-decoration: none;
1313 }
1314 .social-login .social-login-buttons a:before {
1315   content: '';
1316   display: block;
1317   position: absolute;
1318   top: 5px;
1319   width: 24px;
1320   height: 24px;
1321   background-image: url(../img/social-login.png);
1322   background-repeat: no-repeat;
1323 }
1324 .social-login .btn-facebook-login {
1325   padding-left: 35px;
1326   background-color: #6886bc;
1327   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNjg4NmJjIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NjZjYTkiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
1328   background-image: -moz-linear-gradient(top,#6886bc 0,#466ca9 100%);
1329   background-image: -webkit-linear-gradient(top,#6886bc 0,#466ca9 100%);
1330   background-image: -o-linear-gradient(top,#6886bc 0,#466ca9 100%);
1331   background-image: linear-gradient(top,#6886bc 0,#466ca9 100%);
1332 }
1333 .social-login .btn-twitter-login {
1334   padding-left: 45px;
1335   background-color: #25b6e6;
1336 }
1337 .social-login .btn-facebook-login:before {
1338   left: 10px;
1339   background-position: 0 0;
1340 }
1341 .social-login .btn-twitter-login:before {
1342   left: 15px;
1343   background-position: -48px 0;
1344 }
1345 .social-login .not-member p {
1346   font-size: 1.5em;
1347   font-weight: 600;
1348   font-style: normal;
1349   margin-top: 30px;
1350   border-top: 1px solid #CCC;
1351 }
1352 /*--------------------------------------------------------------------------
1353 +       'In Press' Style
1354 --------------------------------------------------------------------------*/
1355 .in-press a {
1356   color: #a0a7ac;
1357   font-size: 1.3em;
1358   font-family: Georgia, serif;
1359   line-height: 28px;
1360   position: relative;
1361   padding-left: 16px;
1362   padding-bottom: 32px;
1363   margin-bottom: 15px;
1364   display: block;
1365   -webkit-transition: color .25s linear;
1366   -moz-transition: color .25s linear;
1367   -o-transition: color .25s linear;
1368   -ms-transition: color .25s linear;
1369   transition: color .25s linear;
1370 }
1371 .in-press a:hover {
1372   color: #16a085;
1373   text-decoration: none;
1374 }
1375 .in-press a:after {
1376   content: '';
1377   display: block;
1378   position: absolute;
1379   bottom: -10px;
1380   right: 20px;
1381   width: 120px;
1382   height: 32px;
1383   background-image: url(../img/in-press.png);
1384   background-repeat: no-repeat;
1385   -webkit-transition: .25s linear;
1386   -moz-transition: .25s linear;
1387   -o-transition: .25s linear;
1388   -ms-transition: .25s linear;
1389   transition: .25s linear;
1390 }
1391 .in-press a:before {
1392   content: "\201C";
1393   margin-left: -16px;
1394   font-size: 2.2em;
1395 }
1396 .press-wired a:after {
1397   background-position: 0px 0px;
1398 }
1399 .press-wired a:hover:after {
1400   background-position: 0px -32px;
1401 }
1402 .press-mashable a:after {
1403   background-position: -120px 0px;
1404 }
1405 .press-mashable a:hover:after {
1406   background-position: -120px -32px;
1407 }
1408 .press-techcrunch a:after {
1409   background-position: -240px 0px;
1410 }
1411 .press-techcrunch a:hover:after {
1412   background-position: -240px -32px;
1413 }
1414 /*--------------------------------------------------------------------------
1415 +       Portfolio Style
1416 --------------------------------------------------------------------------*/
1417 .portfolio-item {
1418   position: relative;
1419   background: #FFF;
1420   margin-bottom: 20px;
1421   border: 8px solid #FFF;
1422   -webkit-border-radius: 5px;
1423   -webkit-background-clip: padding-box;
1424   -moz-border-radius: 5px;
1425   -moz-background-clip: padding;
1426   border-radius: 5px;
1427   background-clip: padding-box;
1428   -webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1429   -moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1430   box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1431   color: inset 0 1px #fff,0 0 8px #c8cfe6;
1432   -webkit-transition: all .5s ease;
1433   -moz-transition: all .5s ease;
1434   -o-transition: all .5s ease;
1435   -ms-transition: all .5s ease;
1436   transition: all .5s ease;
1437 }
1438 .portfolio-item .portfolio-image {
1439   overflow: hidden;
1440   text-align: center;
1441   position: relative;
1442 }
1443 .portfolio-item .portfolio-image img {
1444   max-width: 100%;
1445   -webkit-transition: all .25s ease;
1446   -moz-transition: all .25s ease;
1447   -o-transition: all .25s ease;
1448   -ms-transition: all .25s ease;
1449   transition: all .25s ease;
1450 }
1451 .portfolio-item:hover {
1452   border: 8px solid #16a085;
1453 }
1454 .portfolio-item:hover .portfolio-image img {
1455   position: relative;
1456   -webkit-transform: scale(1.1) rotate(2deg);
1457   -moz-transform: scale(1.1) rotate(2deg);
1458   -o-transform: scale(1.1) rotate(2deg);
1459   -ms-transform: scale(1.1) rotate(2deg);
1460   transform: scale(1.1) rotate(2deg);
1461 }
1462 .portfolio-item ul {
1463   list-style-type: none;
1464   margin-left: 0;
1465   margin-top: 20px;
1466   text-align: center;
1467   padding: 0;
1468 }
1469 .portfolio-item ul li {
1470   line-height: 28px;
1471 }
1472 .portfolio-item .portfolio-project-name {
1473   font-size: 1.3em;
1474   text-transform: uppercase;
1475 }
1476 .portfolio-item .read-more {
1477   text-align: center;
1478   padding-top: 10px;
1479 }
1480 .portfolio-item .portfolio-info-fade {
1481   -webkit-opacity: 0;
1482   -moz-opacity: 0;
1483   opacity: 0;
1484   top: 0;
1485   position: absolute;
1486   background: #000;
1487   background: rgba(0, 0, 0, 0.7);
1488   width: 100%;
1489   height: 100%;
1490   color: #FFF;
1491   text-shadow: 2px 2px 4px #000000;
1492   filter: dropshadow(color=#000000, offx=2, offy=2);
1493   -webkit-transition: opacity .25s linear;
1494   -moz-transition: opacity .25s linear;
1495   -o-transition: opacity .25s linear;
1496   -ms-transition: opacity .25s linear;
1497   transition: opacity .25s linear;
1498 }
1499 .portfolio-item .portfolio-info-fade ul {
1500   margin-top: 10%;
1501 }
1502 .portfolio-item .portfolio-info-fade .btn:hover {
1503   background: #16a085;
1504 }
1505 .portfolio-item .portfolio-info-fade ul {
1506   margin: 10% 20px 0 20px;
1507   padding: 0;
1508 }
1509 .portfolio-item .portfolio-info-fade ul li {
1510   text-align: center;
1511 }
1512 .portfolio-item .portfolio-info-fade ul li:first-child {
1513   border-bottom: 1px solid #CCC;
1514 }
1515 .portfolio-item:hover .portfolio-info-fade {
1516   display: block;
1517   -webkit-opacity: 1;
1518   -moz-opacity: 1;
1519   opacity: 1;
1520 }
1521 .lt-ie9 .portfolio-info-fade {
1522   display: none;
1523 }
1524 .lt-ie9 .portfolio-item:hover .portfolio-info-fade {
1525   display: block;
1526 }
1527 .portfolio-visit-btn {
1528   padding-top: 15px;
1529 }
1530 .portfolio-item-description ul {
1531   padding: 0;
1532 }
1533 /*--------------------------------------------------------------------------
1534 +       Our Team Style
1535 --------------------------------------------------------------------------*/
1536 .team-member {
1537   position: relative;
1538   background: #FFF;
1539   margin-bottom: 20px;
1540   border: 8px solid #FFF;
1541   -webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1542   -moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1543   box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
1544   color: inset 0 1px #fff,0 0 8px #c8cfe6;
1545 }
1546 .team-member img {
1547   max-width: 100%;
1548 }
1549 .team-member ul {
1550   list-style-type: none;
1551   margin-left: 0;
1552   margin-top: 20px;
1553 }
1554 .team-member ul li {
1555   line-height: 28px;
1556 }
1557 .team-member:hover .team-member-image {
1558   -webkit-opacity: 1;
1559   -moz-opacity: 1;
1560   opacity: 1;
1561 }
1562 .team-member .team-member-image {
1563   text-align: center;
1564   position: relative;
1565   -webkit-transition: opacity .25s linear;
1566   -moz-transition: opacity .25s linear;
1567   -o-transition: opacity .25s linear;
1568   -ms-transition: opacity .25s linear;
1569   transition: opacity .25s linear;
1570   -webkit-opacity: 0.85;
1571   -moz-opacity: 0.85;
1572   opacity: 0.85;
1573 }
1574 .team-member .team-member-name {
1575   font-size: 1.3em;
1576   text-transform: uppercase;
1577 }
1578 .team-member .team-member-social {
1579   position: absolute;
1580   right: 0;
1581   -webkit-opacity: 0.5;
1582   -moz-opacity: 0.5;
1583   opacity: 0.5;
1584   -webkit-transition: opacity .25s linear;
1585   -moz-transition: opacity .25s linear;
1586   -o-transition: opacity .25s linear;
1587   -ms-transition: opacity .25s linear;
1588   transition: opacity .25s linear;
1589 }
1590 .team-member .team-member-social .team-member-social i {
1591   margin-top: 3px;
1592 }
1593 .team-member .team-member-social:hover {
1594   -webkit-opacity: 1;
1595   -moz-opacity: 1;
1596   opacity: 1;
1597 }
1598 /*--------------------------------------------------------------------------
1599 +       Sitemap Style
1600 --------------------------------------------------------------------------*/
1601 .sitemap {
1602   margin-left: 0;
1603   list-style-type: none;
1604   padding: 0;
1605 }
1606 .sitemap a {
1607   color: #535b60;
1608 }
1609 .sitemap li {
1610   padding: 10px 0;
1611   font-weight: 600;
1612 }
1613 .sitemap ul {
1614   list-style-type: none;
1615   margin-top: 10px;
1616   margin-left: 10px;
1617   padding: 0;
1618 }
1619 .sitemap ul li {
1620   padding: 3px 0;
1621   font-size: 0.9em;
1622   font-weight: 400;
1623 }
1624 /*--------------------------------------------------------------------------
1625 +       Coming Soon Page Style
1626 --------------------------------------------------------------------------*/
1627 .coming-soon-top {
1628   background: #FFF;
1629   background: rgba(255, 255, 255, 0.8);
1630   min-height: 80px;
1631 }
1632 .coming-soon-top .logo-wrapper {
1633   padding-top: 20px;
1634 }
1635 .coming-soon-content {
1636   margin-top: 5%;
1637   text-align: center;
1638 }
1639 .coming-soon-content h3 {
1640   font-size: 3em;
1641   line-height: 1.3em;
1642   font-weight: 400;
1643   color: #FFF;
1644   margin-bottom: 40px;
1645   text-shadow: 1px 1px 8px #000000;
1646 }
1647 .coming-soon-content p {
1648   color: #E6E6E6;
1649   text-shadow: 2px 2px 4px #000000;
1650 }
1651 .coming-soon-subscribe {
1652   padding-top: 30px;
1653 }
1654 .coming-soon-subscribe .btn {
1655   border-radius: 0 5px 5px 0;
1656 }
1657 .coming-soon-subscribe p {
1658   margin-top: 10px;
1659 }
1660 .coming-soon-social {
1661   margin-top: 60px;
1662   -webkit-opacity: 0.7;
1663   -moz-opacity: 0.7;
1664   opacity: 0.7;
1665   -webkit-transition: opacity .25s linear;
1666   -moz-transition: opacity .25s linear;
1667   -o-transition: opacity .25s linear;
1668   -ms-transition: opacity .25s linear;
1669   transition: opacity .25s linear;
1670 }
1671 .coming-soon-social a {
1672   display: inline-block;
1673 }
1674 .coming-soon-social:hover {
1675   -webkit-opacity: 1;
1676   -moz-opacity: 1;
1677   opacity: 1;
1678 }
1679 .full-screen-background {
1680   z-index: -999;
1681   min-height: 100%;
1682   min-width: 1024px;
1683   width: 100%;
1684   height: auto;
1685   position: fixed;
1686   top: 0;
1687   left: 0;
1688 }
1689 /*--------------------------------------------------------------------------
1690 +       Breadcrumbs Section Style
1691 --------------------------------------------------------------------------*/
1692 .section-breadcrumbs {
1693   background: #222;
1694   background: rgba(34, 34, 34, 0.8);
1695   margin-bottom: 10px;
1696 }
1697 .section-breadcrumbs h1 {
1698   color: #FAFAFA;
1699   font-size: 1.6em;
1700   margin-bottom: 0;
1701   text-transform: none;
1702 }
1703 /*--------------------------------------------------------------------------
1704         Footer Style
1705 --------------------------------------------------------------------------*/
1706 .footer {
1707   background: #222;
1708   color: #A0A0A0;
1709   padding: 0 20px 10px 20px;
1710   border-top: 4px solid #16a085;
1711   margin-top: 20px;
1712   -webkit-box-shadow: 0 -1px 12px rgba(0,0,0,0.4);
1713   -moz-box-shadow: 0 -1px 12px rgba(0,0,0,0.4);
1714   box-shadow: 0 -1px 12px rgba(0,0,0,0.4);
1715   color: 0 -1px 12px rgba(0,0,0,0.4);
1716 }
1717 .footer h3 {
1718   color: #E4E4E4;
1719   font-size: 1.3em;
1720   border-bottom: 1px dotted #7C7C7C;
1721 }
1722 .footer ul {
1723   padding: 0;
1724 }
1725 .footer-navigate-section li {
1726   line-height: 20px !important;
1727 }
1728 .footer-stay-connected a {
1729   text-align: left;
1730   text-indent: -9999px;
1731   display: block;
1732   width: 115px;
1733   height: 40px;
1734   background: url(../img/stay-connected.png);
1735   -webkit-opacity: 0.5;
1736   -moz-opacity: 0.5;
1737   opacity: 0.5;
1738   -webkit-transition: opacity .25s linear;
1739   -moz-transition: opacity .25s linear;
1740   -o-transition: opacity .25s linear;
1741   -ms-transition: opacity .25s linear;
1742   transition: opacity .25s linear;
1743 }
1744 .footer-stay-connected a:hover {
1745   -webkit-opacity: 1;
1746   -moz-opacity: 1;
1747   opacity: 1;
1748 }
1749 .footer-stay-connected a.facebook {
1750   background-position: -115px 0;
1751 }
1752 .footer-stay-connected a.twitter {
1753   background-position: -230px 0;
1754 }
1755 .footer-stay-connected a.googleplus {
1756   background-position: 0 0;
1757 }
1758 .footer-stay-connected li {
1759   text-align: center;
1760 }
1761 .footer-copyright {
1762   text-align: center;
1763   color: #7C7C7C;
1764   border-top: 1px dotted #7C7C7C;
1765   padding-top: 10px;
1766   font-size: 0.9em;
1767 }
1768 /*--------------------------------------------------------------------------
1769 +       Pagination Style (overrides Bootstrap style)
1770 --------------------------------------------------------------------------*/
1771 .pagination-wrapper {
1772   margin-top: 15px;
1773   text-align: center;
1774 }
1775 .pagination > li > a,
1776 .pagination > li > span {
1777   border: none;
1778   border-bottom: 3px solid #FFF;
1779   color: #666666;
1780   margin-left: 0;
1781   margin-bottom: 5px;
1782   -webkit-transition: all .25s linear;
1783   -moz-transition: all .25s linear;
1784   -o-transition: all .25s linear;
1785   -ms-transition: all .25s linear;
1786   transition: all .25s linear;
1787 }
1788 .pagination > li > a:hover,
1789 .pagination > li > a:focus,
1790 .pagination > .active > a,
1791 .pagination > .active > span {
1792   background: #FFF;
1793 }
1794 .pagination > li > a:hover {
1795   border-bottom: 3px solid #666666;
1796 }
1797 .pagination > .active > a,
1798 .pagination > .active > span {
1799   color: #666666;
1800   border-bottom: 3px solid #16a085;
1801 }
1802 .pagination > .disabled > a {
1803   border-color: #fff;
1804 }
1805 .pagination > .disabled > span,
1806 .pagination > .disabled > a,
1807 .pagination > .disabled > a:hover,
1808 .pagination > .disabled > a:focus {
1809   margin-bottom: 0;
1810   color: #C9C9C9;
1811   background-color: #FFF;
1812   cursor: default;
1813 }
1814 /*--------------------------------------------------------------------------
1815 +       Custom Style for Maps
1816 --------------------------------------------------------------------------*/
1817 .leaflet-popup-content-wrapper {
1818   -webkit-border-radius: 5px;
1819   -webkit-background-clip: padding-box;
1820   -moz-border-radius: 5px;
1821   -moz-background-clip: padding;
1822   border-radius: 5px;
1823   background-clip: padding-box;
1824 }
1825 /*--------------------------------------------------------------------------
1826 +       Custom Style for Tabs (overrides Bootstrap)
1827 --------------------------------------------------------------------------*/
1828 .nav-tabs > li > a {
1829   font-size: 1.1em;
1830   padding: 10px 15px;
1831   color: #535b60;
1832 }
1833 .nav-tabs > .active > a,
1834 .nav-tabs > .active > a:hover,
1835 .nav-tabs > .active > a:focus {
1836   font-weight: 600;
1837   background-color: #ffffff;
1838   border: 1px solid #ddd;
1839   border-top: 3px solid #16a085;
1840   border-bottom-color: transparent;
1841   cursor: default;
1842 }
1843 /*--------------------------------------------------------------------------
1844 +       404 Page Style
1845 --------------------------------------------------------------------------*/
1846 .error-page-wrapper {
1847   font-size: 1.5em;
1848   font-weight: 600;
1849   margin: 100px 0;
1850   text-align: center;
1851 }
1852 /*--------------------------------------------------------------------------
1853 +       Homepage Slider Style (modified sequencejs CSS). Sorry, no LESS here
1854 --------------------------------------------------------------------------*/
1855 #sequence {
1856   overflow: hidden;
1857   width: 100%;
1858   max-width: 1920px;
1859   color: white;
1860   font-size: 0.625em;
1861   margin: 0 auto 30px auto;
1862   position: relative;
1863   height: 400px;
1864 }
1865 #sequence img {
1866   max-width: 100%;
1867 }
1868 #sequence > .sequence-canvas {
1869   list-style-type: none;
1870   height: 400px;
1871   margin: 0;
1872   padding: 0;
1873   width: 100%;
1874 }
1875 #sequence h2 {
1876   font-size: 4em;
1877   color: #FFF;
1878   text-shadow: 2px 2px 3px #444;
1879   border: none;
1880   padding-left: 0;
1881   margin-top: 0;
1882 }
1883 #sequence h3 {
1884   font-size: 2em;
1885   color: #FFF;
1886   text-shadow: 2px 2px 3px #444;
1887 }
1888 #sequence > .sequence-canvas > li {
1889   position: absolute;
1890   width: 100%;
1891   height: 400px;
1892   z-index: 1;
1893   -webkit-transition-property: background;
1894   -moz-transition-property: background;
1895   -o-transition-property: background;
1896   -ms-transition-property: background;
1897   transition-property: background;
1898   background-position: -50px 0;
1899 }
1900 #sequence > .sequence-canvas > li.bg1 {
1901   background-image: url(../img/homepage-slider/slider-bg1.jpg);
1902 }
1903 #sequence > .sequence-canvas > li.bg2 {
1904   background-image: url(../img/homepage-slider/slider-bg2.jpg);
1905 }
1906 #sequence > .sequence-canvas > li.bg3 {
1907   background-image: url(../img/homepage-slider/slider-bg3.jpg);
1908 }
1909 #sequence > .sequence-canvas > li.bg4 {
1910   background-image: url(../img/homepage-slider/slider-bg4.jpg);
1911 }
1912 #sequence > .sequence-canvas > li.bg5 {
1913   background-image: url(../img/homepage-slider/slider-bg5.jpg);
1914 }
1915 #sequence > .sequence-canvas > li.bg6 {
1916   background-image: url(../img/homepage-slider/slider-bg6.jpg);
1917 }
1918 #sequence > .sequence-canvas > li.bg7 {
1919   background-image: url(../img/homepage-slider/slider-bg7.jpg);
1920 }
1921 #sequence > .sequence-canvas > li.bg8 {
1922   background-image: url(../img/homepage-slider/slider-bg8.jpg);
1923 }
1924 #sequence > .sequence-canvas > li.bg9 {
1925   background-image: url(../img/homepage-slider/slider-bg9.jpg);
1926 }
1927 #sequence > .sequence-canvas > li.bg10 {
1928   background-image: url(../img/homepage-slider/slider-bg10.jpg);
1929 }
1930 #sequence > .sequence-canvas > li.bg11 {
1931   background-image: url(../img/homepage-slider/slider-bg11.jpg);
1932 }
1933 #sequence > .sequence-canvas > li.bg12 {
1934   background-image: url(../img/homepage-slider/slider-bg12.jpg);
1935 }
1936 #sequence > .sequence-canvas > li.bg13 {
1937   background-image: url(../img/homepage-slider/slider-bg13.jpg);
1938 }
1939 #sequence > .sequence-canvas > li.bg14 {
1940   background-image: url(../img/homepage-slider/slider-bg14.jpg);
1941 }
1942 #sequence > .sequence-canvas > li img {
1943   height: 96%;
1944 }
1945 #sequence > .sequence-canvas li > * {
1946   position: absolute;
1947   -webkit-transition-property: left, opacity;
1948   -moz-transition-property: left, opacity;
1949   -o-transition-property: left, opacity;
1950   -ms-transition-property: left, opacity;
1951   transition-property: left, opacity;
1952 }
1953 .sequence-next,
1954 .sequence-prev {
1955   color: white;
1956   cursor: pointer;
1957   display: none;
1958   font-weight: bold;
1959   padding: 10px 15px;
1960   position: absolute;
1961   top: 50%;
1962   z-index: 1000;
1963   height: 75px;
1964   margin-top: -47.5px;
1965 }
1966 .sequence-pause {
1967   bottom: 0;
1968   cursor: pointer;
1969   position: absolute;
1970   z-index: 1000;
1971 }
1972 .sequence-paused {
1973   -webkit-opacity: 0.3;
1974   -moz-opacity: 0.3;
1975   opacity: 0.3;
1976 }
1977 .sequence-prev {
1978   left: 3%;
1979 }
1980 .sequence-next {
1981   right: 3%;
1982 }
1983 .sequence-prev img,
1984 .sequence-next img {
1985   height: 100%;
1986   width: auto;
1987 }
1988 #sequence-preloader {
1989   background: #d9d9d9;
1990 }
1991 .sequence-pagination-wrapper {
1992   position: absolute;
1993   bottom: 10px;
1994   right: 20px;
1995   z-index: 99;
1996 }
1997 .sequence-pagination {
1998   display: none;
1999   z-index: 99;
2000   -webkit-transition-duration: 0.5s;
2001   -moz-transition-duration: 0.5s;
2002   -o-transition-duration: 0.5s;
2003   transition-duration: 0.5s;
2004 }
2005 .sequence-pagination li {
2006   display: inline-block;
2007   *display: inline;
2008   width: 14px;
2009   height: 14px;
2010   margin: 0 4px;
2011   text-indent: -999em;
2012   border: 4px solid #16a085;
2013   cursor: pointer;
2014   -webkit-border-radius: 30px;
2015   -webkit-background-clip: padding-box;
2016   -moz-border-radius: 30px;
2017   -moz-background-clip: padding;
2018   border-radius: 30px;
2019   background-clip: padding-box;
2020   -webkit-opacity: 0.8;
2021   -moz-opacity: 0.8;
2022   opacity: 0.8;
2023   -webkit-transition: background .5s, opacity .5s;
2024   -moz-transition: background .5s, opacity .5s;
2025   -o-transition: background .5s, opacity .5s;
2026   -ms-transition: background .5s, opacity .5s;
2027   transition: background .5s, opacity .5s;
2028 }
2029 .sequence-pagination li.current {
2030   background: #16a085;
2031   -webkit-opacity: 1;
2032   -moz-opacity: 1;
2033   opacity: 1;
2034 }
2035 .sequence-next,
2036 .sequence-prev {
2037   position: absolute;
2038   opacity: 0.6;
2039   -webkit-transition-duration: 1s;
2040   -moz-transition-duration: 1s;
2041   -o-transition-duration: 1s;
2042   transition-duration: 1s;
2043 }
2044 .sequence-next:hover,
2045 .sequence-prev:hover {
2046   -webkit-opacity: 1;
2047   -moz-opacity: 1;
2048   opacity: 1;
2049   -webkit-transition-duration: 1s;
2050   -moz-transition-duration: 1s;
2051   -o-transition-duration: 1s;
2052   transition-duration: 1s;
2053 }
2054 #sequence .title {
2055   font-size: 3.8em;
2056   text-transform: none;
2057   left: 0%;
2058   width: 35%;
2059   -webkit-opacity: 0;
2060   -moz-opacity: 0;
2061   opacity: 0;
2062   bottom: 60%;
2063   z-index: 50;
2064 }
2065 #sequence > .sequence-canvas > li.animate-in {
2066   background-position: 0 0;
2067   -webkit-transition-duration: 1.5s;
2068   -moz-transition-duration: 1.5s;
2069   -o-transition-duration: 1.5s;
2070   transition-duration: 1.5s;
2071 }
2072 #sequence .animate-in .title {
2073   left: 15%;
2074   -webkit-opacity: 1;
2075   -moz-opacity: 1;
2076   opacity: 1;
2077   -webkit-transition-duration: 0.5s;
2078   -moz-transition-duration: 0.5s;
2079   -o-transition-duration: 0.5s;
2080   transition-duration: 0.5s;
2081 }
2082 #sequence .animate-out .title {
2083   left: 35%;
2084   -webkit-opacity: 0;
2085   -moz-opacity: 0;
2086   opacity: 0;
2087   -webkit-transition-duration: 0.5s;
2088   -moz-transition-duration: 0.5s;
2089   -o-transition-duration: 0.5s;
2090   transition-duration: 0.5s;
2091 }
2092 .subtitle {
2093   color: black;
2094   font-size: 2em;
2095   left: 35%;
2096   width: 35%;
2097   -webkit-opacity: 0;
2098   -moz-opacity: 0;
2099   opacity: 0;
2100   top: 40%;
2101 }
2102 .animate-in .subtitle {
2103   left: 15%;
2104   -webkit-opacity: 1;
2105   -moz-opacity: 1;
2106   opacity: 1;
2107   -webkit-transition-duration: 0.5s;
2108   -moz-transition-duration: 0.5s;
2109   -o-transition-duration: 0.5s;
2110   transition-duration: 0.5s;
2111 }
2112 .animate-out .subtitle {
2113   left: 65%;
2114   -webkit-opacity: 0;
2115   -moz-opacity: 0;
2116   opacity: 0;
2117   -webkit-transition-duration: 0.5s;
2118   -moz-transition-duration: 0.5s;
2119   -o-transition-duration: 0.5s;
2120   transition-duration: 0.5s;
2121 }
2122 .slide-img {
2123   left: 90%;
2124   top: 20%;
2125   -webkit-opacity: 0;
2126   -moz-opacity: 0;
2127   opacity: 0;
2128   position: relative;
2129   height: auto !important;
2130   max-height: 450px !important;
2131   max-width: 45% !important;
2132 }
2133 .animate-in .slide-img {
2134   left: 55%;
2135   -webkit-opacity: 1;
2136   -moz-opacity: 1;
2137   opacity: 1;
2138   -webkit-transition-duration: 1s;
2139   -moz-transition-duration: 1s;
2140   -o-transition-duration: 1s;
2141   transition-duration: 1s;
2142 }
2143 .animate-out .slide-img {
2144   left: 15%;
2145   -webkit-opacity: 0;
2146   -moz-opacity: 0;
2147   opacity: 0;
2148   -webkit-transition-duration: 1s;
2149   -moz-transition-duration: 1s;
2150   -o-transition-duration: 1s;
2151   transition-duration: 1s;
2152 }
2153 @media only screen and (min-width: 992px) {
2154   #sequence .title {
2155     width: 42%;
2156   }
2157 }
2158 @media only screen and (max-width: 838px) {
2159   #sequence .slide-img {
2160     max-height: 530px !important;
2161     width: auto;
2162   }
2163 }
2164 @media only screen and (max-width: 768px) {
2165   #sequence {
2166     height: 400px;
2167   }
2168   #sequence .title {
2169     font-size: 2.8em;
2170   }
2171   #sequence .subtitle {
2172     font-size: 1.6em;
2173   }
2174   #sequence .sequence-next,
2175   #sequence .sequence-prev {
2176     height: 60px;
2177     margin-top: -40px;
2178   }
2179   #sequence .slide-img {
2180     max-height: 480px !important;
2181     width: auto;
2182   }
2183 }
2184 @media only screen and (max-width: 568px) {
2185   .slide-img {
2186     left: 50%;
2187     width: auto;
2188     max-width: 80% !important;
2189   }
2190   #sequence .animate-in .slide-img {
2191     left: 50%;
2192     margin-left: -40%;
2193   }
2194   #sequence .animate-out .slide-img {
2195     left: 20%;
2196     margin-left: -20%;
2197   }
2198   #sequence .title {
2199     background: #a1a1a1;
2200     background: rgba(0, 0, 0, 0.3);
2201     bottom: 0;
2202     left: 100%;
2203     padding: 4%;
2204     width: 100%;
2205     margin-bottom: 0;
2206     z-index: 10;
2207   }
2208   #sequence .animate-in .title {
2209     left: 0%;
2210   }
2211   #sequence .animate-out .title {
2212     left: -100%;
2213   }
2214   #sequence .subtitle {
2215     visibility: hidden;
2216   }
2217 }
2218 /*--------------------------------------------------------------------------
2219 +       Content Slider Style (bxSlider CSS), Sorry, no LESS here
2220 --------------------------------------------------------------------------*/
2221 .bx-wrapper {
2222   position: relative;
2223   margin: 0 auto 30px;
2224   padding: 0;
2225   *zoom: 1;
2226 }
2227 .bx-wrapper img {
2228   max-width: 100%;
2229   display: block;
2230 }
2231 .bx-wrapper .bx-pager,
2232 .bx-wrapper .bx-controls-auto {
2233   position: absolute;
2234   bottom: -30px;
2235   width: 100%;
2236 }
2237 /* LOADER */
2238 .bx-wrapper .bx-loading {
2239   min-height: 50px;
2240   background: url(../img/bx_loader.gif) center center no-repeat #fff;
2241   height: 100%;
2242   width: 100%;
2243   position: absolute;
2244   top: 0;
2245   left: 0;
2246   z-index: 2000;
2247 }
2248 /* PAGER */
2249 .bx-wrapper .bx-pager {
2250   text-align: center;
2251   font-size: .85em;
2252   font-family: Arial;
2253   font-weight: bold;
2254   color: #666;
2255   padding-top: 20px;
2256 }
2257 .bx-wrapper .bx-pager .bx-pager-item,
2258 .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
2259   display: inline-block;
2260   *zoom: 1;
2261   *display: inline;
2262 }
2263 .bx-wrapper .bx-pager.bx-default-pager a {
2264   background: #666;
2265   text-indent: -9999px;
2266   display: block;
2267   width: 10px;
2268   height: 10px;
2269   margin: 0 5px;
2270   outline: 0;
2271   -webkit-border-radius: 5px;
2272   -webkit-background-clip: padding-box;
2273   -moz-border-radius: 5px;
2274   -moz-background-clip: padding;
2275   border-radius: 5px;
2276   background-clip: padding-box;
2277 }
2278 .bx-wrapper .bx-pager.bx-default-pager a:hover,
2279 .bx-wrapper .bx-pager.bx-default-pager a.active {
2280   background: #000;
2281 }
2282 /* DIRECTION CONTROLS (NEXT / PREV) */
2283 .bx-wrapper .bx-prev {
2284   left: 10px;
2285   background: url(../img/controls.png) no-repeat 0 -32px;
2286 }
2287 .bx-wrapper .bx-next {
2288   right: 10px;
2289   background: url(../img/controls.png) no-repeat -43px -32px;
2290 }
2291 .bx-wrapper .bx-prev:hover {
2292   background-position: 0 0;
2293 }
2294 .bx-wrapper .bx-next:hover {
2295   background-position: -43px 0;
2296 }
2297 .bx-wrapper .bx-controls-direction a {
2298   position: absolute;
2299   top: 50%;
2300   margin-top: -16px;
2301   outline: 0;
2302   width: 32px;
2303   height: 32px;
2304   text-indent: -9999px;
2305   z-index: 9999;
2306 }
2307 .bx-wrapper .bx-controls-direction a.disabled {
2308   display: none;
2309 }
2310 /* AUTO CONTROLS (START / STOP) */
2311 .bx-wrapper .bx-controls-auto {
2312   text-align: center;
2313 }
2314 .bx-wrapper .bx-controls-auto .bx-start {
2315   display: block;
2316   text-indent: -9999px;
2317   width: 10px;
2318   height: 11px;
2319   outline: 0;
2320   background: url(../img/controls.png) -86px -11px no-repeat;
2321   margin: 0 3px;
2322 }
2323 .bx-wrapper .bx-controls-auto .bx-start:hover,
2324 .bx-wrapper .bx-controls-auto .bx-start.active {
2325   background-position: -86px 0;
2326 }
2327 .bx-wrapper .bx-controls-auto .bx-stop {
2328   display: block;
2329   text-indent: -9999px;
2330   width: 9px;
2331   height: 11px;
2332   outline: 0;
2333   background: url(../img/controls.png) -86px -44px no-repeat;
2334   margin: 0 3px;
2335 }
2336 .bx-wrapper .bx-controls-auto .bx-stop:hover,
2337 .bx-wrapper .bx-controls-auto .bx-stop.active {
2338   background-position: -86px -33px;
2339 }
2340 /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
2341 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
2342   text-align: left;
2343   width: 80%;
2344 }
2345 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
2346   right: 0;
2347   width: 35px;
2348 }
2349 /* IMAGE CAPTIONS */
2350 .bx-wrapper .bx-caption {
2351   position: absolute;
2352   bottom: 0;
2353   left: 0;
2354   background: #666\9;
2355   background: rgba(80, 80, 80, 0.75);
2356   width: 100%;
2357 }
2358 .bx-wrapper .bx-caption span {
2359   color: #fff;
2360   font-family: Arial;
2361   display: block;
2362   font-size: .85em;
2363   padding: 10px;
2364 }
2365 /*--------------------------------------------------------------------------
2366 +       Main Menu Style
2367 --------------------------------------------------------------------------*/
2368 .mainmenu li.logo-wrapper a {
2369   border-right: 1px solid #E8E8E8;
2370   padding-left: 0;
2371   padding-top: 0;
2372   padding-bottom: 0;
2373 }
2374 .mainmenu-wrapper {
2375   background-color: #FFF;
2376   border-bottom: 4px solid #16a085;
2377   z-index: 4;
2378 }
2379 .mainmenu {
2380   width: 100%;
2381   /* general ul style */
2382
2383   /* first level ul style */
2384
2385   /* sub-menu */
2386
2387 }
2388 .mainmenu ul {
2389   margin: 0;
2390   padding: 0;
2391   list-style-type: none;
2392 }
2393 .mainmenu > ul,
2394 .mainmenu .mainmenu-submenu-inner {
2395   margin: 0 auto;
2396 }
2397 .mainmenu > ul > li,
2398 .mainmenu .mainmenu-submenu-inner > li {
2399   display: inline-block;
2400   *display: inline;
2401 }
2402 .mainmenu > ul > li > a,
2403 .mainmenu .mainmenu-submenu-inner > li > a {
2404   font-size: 1.2em;
2405   padding: 1.2em 1.5em;
2406   color: #999;
2407   display: inline-block;
2408   text-decoration: none;
2409 }
2410 .mainmenu > ul > li > a:hover,
2411 .mainmenu .mainmenu-submenu-inner > li > a:hover {
2412   color: #16a085;
2413   text-decoration: none;
2414 }
2415 .mainmenu > ul > li.active > a,
2416 .mainmenu .mainmenu-submenu-inner > li.active > a {
2417   color: #16a085;
2418   font-weight: 600 !important;
2419 }
2420 .mainmenu > ul > li.mainmenu-open a,
2421 .mainmenu .mainmenu-submenu-inner > li.mainmenu-open a,
2422 .mainmenu > ul li.mainmenu-open > a:hover,
2423 .mainmenu .mainmenu-submenu-inner li.mainmenu-open > a:hover {
2424   color: #fff;
2425   background: #16a085;
2426 }
2427 .mainmenu .mainmenu-submenu {
2428   display: none;
2429   position: absolute;
2430   background: #16a085;
2431   width: 100%;
2432   left: 0;
2433   z-index: 999;
2434   -webkit-transform: translateZ(0);
2435   -moz-transform: translateZ(0);
2436   -o-transform: translateZ(0);
2437   -ms-transform: translateZ(0);
2438   transform: translateZ(0);
2439   -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
2440   -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
2441   box-shadow: 0 5px 5px rgba(0,0,0,0.4);
2442   color: 0 5px 5px rgba(0,0,0,0.4);
2443 }
2444 .mainmenu .mainmenu-submenu-inner > div {
2445   width: 33%;
2446   float: left;
2447 }
2448 .mainmenu .mainmenu-submenu-inner:before,
2449 .mainmenu .mainmenu-submenu-inner:after {
2450   content: " ";
2451   display: table;
2452 }
2453 .mainmenu .mainmenu-submenu-inner:after {
2454   clear: both;
2455 }
2456 .mainmenu .mainmenu-submenu-inner > div a {
2457   line-height: 2em;
2458 }
2459 .mainmenu-open .mainmenu-submenu {
2460   display: block;
2461   padding-bottom: 3em;
2462 }
2463 .mainmenu-submenu h4 {
2464   color: #65ead0;
2465   padding: 1em 0 0.6em;
2466   margin-left: 20px;
2467   font-size: 160%;
2468   font-weight: 300;
2469 }
2470 .mainmenu-submenu ul {
2471   margin-left: 20px;
2472 }
2473 @media screen and (max-width: 979px) {
2474   .mainmenu {
2475     font-size: 0.8em;
2476   }
2477   .mainmenu-submenu {
2478     font-size: 1.2em;
2479   }
2480   .mainmenu-submenu li,
2481   .mainmenu-submenu h4 {
2482     padding-left: 10px;
2483   }
2484 }
2485 @media screen and (max-width: 479px) {
2486   .mainmenu {
2487     font-size: 120%;
2488     border: none;
2489   }
2490   .mainmenu > ul,
2491   .mainmenu .mainmenu-submenu-inner {
2492     width: 100%;
2493     padding: 0;
2494   }
2495   .mainmenu .mainmenu-submenu-inner {
2496     padding: 0 1.5em;
2497     font-size: 75%;
2498   }
2499   .mainmenu > ul > li {
2500     display: block;
2501     border-bottom: 4px solid #47a3da;
2502   }
2503   .mainmenu > ul > li > a {
2504     display: block;
2505     padding: 1em 3em;
2506   }
2507   .mainmenu > ul > li:last-child {
2508     border: none;
2509   }
2510   .mainmenu .mainmenu-submenu {
2511     position: relative;
2512   }
2513   .mainmenu-submenu h4 {
2514     padding-top: 0.6em;
2515   }
2516   .mainmenu .mainmenu-submenu-inner > div {
2517     width: 100%;
2518     float: none;
2519     padding: 0;
2520   }
2521 }
2522 /*--------------------------------------------------------------------------
2523 +       Extras Menu (Cart, Language, Login) Style
2524 --------------------------------------------------------------------------*/
2525 .menuextras {
2526   font-size: 0.85em;
2527   height: 30px;
2528 }
2529 .menuextras ul {
2530   margin: 0;
2531   padding: 0;
2532   list-style-type: none;
2533   float: right;
2534   padding: 3px 0;
2535 }
2536 .menuextras li {
2537   float: left;
2538   padding: 0 8px;
2539 }
2540 .menuextras .extras li {
2541   padding: 0 8px;
2542 }
2543 .menuextras .extras li a {
2544   color: #333;
2545 }
2546 .menuextras .extras li a:hover {
2547   color: #333;
2548   text-decoration: none;
2549 }
2550 .menuextras .extras .shopping-cart-items i {
2551   color: #333;
2552 }
2553 .menuextras .choose-country .dropdown-menu {
2554   background-color: #222;
2555   background-color: rgba(34, 34, 34, 0.8);
2556   margin-top: 5px;
2557 }
2558 .menuextras .choose-country .dropdown-menu li {
2559   float: none;
2560 }
2561 .menuextras .choose-country .dropdown-menu li a {
2562   color: #fff;
2563   padding-left: 3px;
2564 }
2565 .menuextras .choose-country .dropdown-menu li a:hover {
2566   color: #fff;
2567   background-color: #333 !important;
2568 }
2569 /*--------------------------------------------------------------------------
2570 +       Buttons Style
2571 --------------------------------------------------------------------------*/
2572 .btn {
2573   border: 1px solid #16a085;
2574   -webkit-border-radius: 2px;
2575   -webkit-background-clip: padding-box;
2576   -moz-border-radius: 2px;
2577   -moz-background-clip: padding;
2578   border-radius: 2px;
2579   background-clip: padding-box;
2580   color: #FFFFFF;
2581   cursor: pointer;
2582   display: inline-block;
2583   text-transform: none;
2584   -webkit-transition: all .25s ease;
2585   -moz-transition: all .25s ease;
2586   -o-transition: all .25s ease;
2587   -ms-transition: all .25s ease;
2588   transition: all .25s ease;
2589   text-align: center;
2590   background: none repeat scroll 0 0 #16a085;
2591   text-shadow: none;
2592   box-shadow: none;
2593   color: #FFF;
2594   white-space: nowrap;
2595 }
2596 .btn:hover {
2597   background: none repeat scroll 0 0 #3b3c41;
2598   color: #FFF;
2599   text-decoration: none;
2600   border: 1px solid #3b3c41;
2601 }
2602 .btn .caret {
2603   border-top: 4px solid #FFF;
2604 }
2605 .btn-micro {
2606   padding: 1px 8px;
2607   font-size: 10px;
2608 }
2609 .btn-grey {
2610   border: 1px solid #cecece;
2611   color: #333;
2612   background: none repeat scroll 0 0 #E7E7E7;
2613 }
2614 .btn-grey:hover {
2615   background: none repeat scroll 0 0 #cecece;
2616   color: #333;
2617   text-decoration: none;
2618   border: 1px solid #cecece;
2619 }
2620 .btn-grey .caret {
2621   border-top: 4px solid #333;
2622 }
2623 .btn-blue {
2624   border: 1px solid #3e7191;
2625   color: #FFF;
2626   background: none repeat scroll 0 0 #4F8DB3;
2627 }
2628 .btn-blue:hover {
2629   background: none repeat scroll 0 0 #3b3c41;
2630   color: #FFF;
2631   text-decoration: none;
2632   border: 1px solid #3b3c41;
2633 }
2634 .btn-orange {
2635   border: 1px solid #cc5a00;
2636   color: #FFF;
2637   background: none repeat scroll 0 0 #FF7000;
2638 }
2639 .btn-orange:hover {
2640   background: none repeat scroll 0 0 #3b3c41;
2641   color: #FFF;
2642   text-decoration: none;
2643   border: 1px solid #3b3c41;
2644 }
2645 .btn-green {
2646   border: 1px solid #4c5818;
2647   color: #FFF;
2648   background: none repeat scroll 0 0 #6E8023;
2649 }
2650 .btn-green:hover {
2651   background: none repeat scroll 0 0 #3b3c41;
2652   color: #FFF;
2653   text-decoration: none;
2654   border: 1px solid #3b3c41;
2655 }
2656 .btn-red {
2657   border: 1px solid #ab0d0d;
2658   color: #FFF;
2659   background: none repeat scroll 0 0 #DA1111;
2660 }
2661 .btn-red:hover {
2662   background: none repeat scroll 0 0 #3b3c41;
2663   color: #FFF;
2664   text-decoration: none;
2665   border: 1px solid #3b3c41;
2666 }
2667 .btn-group.open .btn.dropdown-toggle {
2668   background: none repeat scroll 0 0 #3b3c41;
2669   color: #FFF;
2670 }
2671 .dropdown.open a.dropdown-toggle .caret {
2672   border-top: 4px solid #FFF;
2673 }