/*
CSS Site Name:  Panasia Clothing Limited
CSS Author: PWYCHAMIKA
Table OF Contents
-----------------
Body -- Font
     -- Colour 
     -- Structure colour
     -- structure border
	 -- mainlinks 
     -- loader_bg 
     -- loading
     -- icon colour
     -- Bg image
     -- structure text
     -- structure footer
     -- background colours
------------------------------------*/



* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  margin: 0; padding: 0;
}

body {

}

.header {
  height: 25px;
  background: #111;
  color: #fff;
  text-align: center;
  font: 11px/25px Helvetica, Arial, sans-serif;
}

.header a {
  color: #eee;
}

.header a:hover {
  text-decoration: none;
}


/*PIC*/
.pic {
  height: 200px;
  width: 200px;
  overflow: hidden;
  margin: 20px;
  border: 10px solid white;

  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
  float: left;
}

.pic:hover {
  cursor: pointer;
}

/*GROW*/
.grow img {
  height: 200px;
  width: 200px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.grow img:hover {
  width: 200px;
  height: 200px;
}

/*SHRINK*/
.shrink img {
  height: 200px;
  width: 200px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.shrink img:hover {
  width: 200px;
  height: 200px;
}

/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
  -webkit-filter: blur(5px);
}

/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.sidepan img:hover {
  margin-left: -200px;
}

/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.vertpan img:hover {
  margin-top: -200px;
}

/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.bw:hover {
  -webkit-filter: grayscale(100%);
}

/*DARKEN*/
.brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.brighten img:hover {
  -webkit-filter: brightness(0%);
}

/*-------771722792v----------*/

   .photo img {
    transition: transform 2s ease, filter 2s ease;
    filter: grayscale(100%);
  }

  .photo:hover img {
    transform: scale(1.2);
    filter: grayscale(0%);
  }

/*---------------------------*/

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
 /*   content: '';
    background: transparent url(../images/pattern.png) repeat top left;     */
}   

.photo {
	box-sizing: border-box;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.dropdown:hover .dropdown-menu {
display: block;
}

.navbar-default {
	background-color: #ffffff;
	border-color: #ffffff;
}



.navbar-default .navbar-toggle .icon-bar {
    background-color:#FFF ;
	background: black !important;
}

.navbar-default .navbar-nav>li>a {
	color: #777
	color: #3afb2f !important;
    font-family: arial !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-decoration: none !important;
	text-decoration-line: none;
    text-decoration-style: initial;
    text-decoration-color: initial;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
	color: #333;
	background-color: transparent
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0
}
.sr-only-focusable:active, .sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto
}

video {
    max-width: 100%;
    height: auto;
}

/*------------new----------------*/
    .loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      background-color: #006600;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      animation: hideLoader 3s ease-in forwards;
      animation-delay: 1.5s;
    }

    .spinner {
      width: 50px;
      height: 50px;
      border: 6px solid #33cc33;
      border-top: 6px solid #009900;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 15px;
    }

    .loader-text {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #ffffff;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes hideLoader {
      0%   { opacity: 1; visibility: visible; }
      100% { opacity: 0; visibility: hidden; }
    }

    .logo-container {
      position: fixed;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10000;
      animation: moveLogo 2s ease-in-out forwards;
      animation-delay: 2s; /* logo starts 1s before loader fades */
    }

    .loader-logo {
      width: 140px;
      pointer-events: none;
    }

    @keyframes moveLogo {
      0% {
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
      }
      60% {
        top: 20px;
        left: 20px;
        transform: translate(0, 0);
        opacity: 0;
      }
      100% {
        top: 20px;
        left: 20px;
        transform: translate(0, 0);
        opacity: 0;
        visibility: hidden;
      }
    }

    .static-logo {
      width: 120px;
      margin: 20px;
    }