.marquee-wrapper{ background:#ffffff; margin-bottom:1em; text-align:center; }

.marquee-wrapper .container{ overflow:hidden; }

.marquee-inner span{ float:left; width:50%; }

.marquee-wrapper .marquee-block{ height:127px; overflow:hidden; box-sizing:border-box; position:relative; margin:5px auto; background:#e9e9e9; padding:2px 0; }

.marquee-inner{ display:block; width:200%; position:absolute; }

.marquee-inner p{
  font-weight:800;
  font-size:30px;
  font-family:cursive;
}
.marquee-inner.to-left{
  animation: marqueeLeft 25s linear infinite;
}
.marquee-inner.to-right{
  animation: marqueeRight 25s linear infinite;
}
.marquee-item{
  width: 230px;
  height: auto;
  display: inline-block;
  margin: 0 10px;
  float: left;
  transition: all .2s ease-out;
  background:#00cc00;
}
@keyframes marqueeLeft{
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
@keyframes marqueeRight{
  0% { 
    left: -100%; 
  }
  100% {
   left: 0; 
  }
}

.Click-here { cursor:pointer; /*  background-image: linear-gradient(190deg, #f83600 0%, #fee140 100%);*/ color:#fff; width:180px; text-align:center; font-size:14px; padding:18px 0; margin:0 auto; transition:background-image 3s ease-in-out; }
 
.Click-here:hover{ transition:background-image 3s ease-in-out; /* background-image: linear-gradient(90deg, #fee140 0%, #f83600 100%);*/ }

.custom-model-main { text-align:center;  overflow:hidden; position:fixed; top:0; right:0; bottom:0; left:0; /* z-index: 1050; */
 -webkit-overflow-scrolling:touch; outline:0; opacity:0; -webkit-transition:opacity 0.15s linear, z-index 0.15; -o-transition:opacity 0.15s linear, z-index 0.15; transition:opacity 0.15s linear, z-index 0.15; z-index:-1; overflow-x:hidden; overflow-y:auto; }

.model-open { z-index:99999; opacity:1; overflow:hidden; }

.custom-model-inner { -webkit-transform:translate(0, -25%); -ms-transform:translate(0, -25%); transform:translate(0, -25%); -webkit-transition:-webkit-transform 0.3s ease-out; -o-transition:-o-transform 0.3s ease-out; transition:-webkit-transform 0.3s ease-out; -o-transition:transform 0.3s ease-out; transition:transform 0.3s ease-out; transition:transform 0.3s ease-out, -webkit-transform 0.3s ease-out; display:inline-block; vertical-align:middle; /* width: 600px;*/ margin:30px auto; max-width:97%; }

.custom-model-wrap { display:block; width:100%; position:relative; color:#000000; background-color:#fff; border:1px solid #999; border:1px solid rgba(0, 0, 0, 0.2); border-radius:6px; -webkit-box-shadow:0 3px 9px rgba(0, 0, 0, 0.5); box-shadow:0 3px 9px rgba(0, 0, 0, 0.5); background-clip:padding-box; outline:0; text-align:center; padding:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; max-height:calc(100vh - 70px); overflow-y:auto; }

.model-open .custom-model-inner {-webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); transform:translate(0, 0); position:relative; z-index:999; }

.model-open .bg-overlay { background:rgba(0, 0, 0, 0.6); z-index:99; }

.bg-overlay { background:rgba(0, 0, 0, 0); height:100vh; width:100%; position:fixed; left:0; top:0; right:0; bottom:0; z-index:0; -webkit-transition:background 0.15s linear; -o-transition:background 0.15s linear; transition:background 0.15s linear; }

.close-btn { position:absolute; right:15px; top:5px; cursor:pointer; background-color:#DDDCDC; z-index:99; font-size:26px; color:#fff; padding:0.08em; border-radius:0.2em; line-height:0.8em; }


@media screen and (min-width:800px){
.custom-model-main:before { content:""; display:inline-block; vertical-align:middle; margin-right:-0px; height:100%; }
}

@media screen and (max-width:799px){
.custom-model-inner{margin-top:45px;}
}

/*    banner */
	.container {
  position:relative; width:100%; margin:auto;
  overflow:hidden;

}
@media only screen and (max-width: 1000px) {
  .container {
    border-radius: 0;
  }
}

.slider {
  display: flex; padding-top:4.4em;
  width: 500%;
  transition: all 0.25s ease-in;
  transform: translateX(0);
}
@media only screen and (max-width: 1000px) {
  .slider {
    height: 100vh;
  }
}
.slider .box {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  overflow: hidden;
  position: relative;
}
@media only screen and (max-width: 650px) {
  .slider .box {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
}
.slider .box .bg {
  padding: 2rem;
  background-color: rgba(197, 219, 93, 0.3);
  width: 50%;
  transform: skewX(7deg);
  position: absolute;
  height: 100%;
  left: -10%;
  padding-left: 20rem;
  transform-origin: 0 100%;
}
@media only screen and (max-width: 800px) {
  .slider .box .bg {
    width: 65%;
  }
}
@media only screen and (max-width: 650px) {
  .slider .box .bg {
    width: 100%;
    left: 0;
   /* bottom: 0;*/
    height: 45%;
    transform: skewX(0deg);
  }
}
.slider .box .bg::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: inherit;
  pointer-events: none;
  transform: skewX(10deg);
}
@media only screen and (max-width: 650px) {
  .slider .box .bg::before {
    width: 120%;
    bottom: 0;
    transform: skewX(0deg);
  }
}
.slider .box .details {
 /* padding: 5rem;*/ 
  padding-left: 10rem; width:95%;
  z-index: 100;
  grid-column: 1/span 1;
  grid-row: 1/-1;
}
@media only screen and (max-width: 650px) {
  .slider .box .details {
    grid-row: 2/span 1;
    grid-column: 1/-1;
    text-align: center;
    /*padding: 2em;*/
    transform: translateY(-9rem);
  }
}
.slider .box .details h1 {
  font-size: 3.5rem; width:100%;
  font-weight: 500;
  margin-bottom: 0.5rem; color: #536404;
}
.slider .box .details p {
  display: inline-block;
  font-size: 1.1em;
  color: #1b2004;
  margin-bottom: 2rem;
  margin-right: 5rem;
}
@media only screen and (max-width: 800px) {
  .slider .box .details p {
    margin-right: 0;
  }
}
.slider .box .details button {
  padding: 1rem 3rem;
  color: #fff;
  border-radius: 2rem;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.slider .box .details button:hover {
  opacity: 0.8;
}
.slider .box .details button:focus {
  outline: none;
  border: none;
}
.slider .box1 {
  /*background-color: #c98fb3;*/ background-color:#ffffff; }
.slider .box1 .illustration .inner {
  background-color: #FF0077;
}
.slider .box1 .illustration .inner::after, .slider .box1 .illustration .inner::before {
  background-color: rgba(255, 0, 119, 0.4);
}
.slider .box1 button {
  background-color: #FF0077;
}
.slider .box2 {
  /*background-color: #77c2bf;*/ background-color:#ffffff;
}
.slider .box2 .illustration .inner {
  background-color: #0033FF;
}
.slider .box2 .illustration .inner::after, .slider .box2 .illustration .inner::before {
  background-color: rgba(0, 51, 255, 0.4);
}
.slider .box2 button {
  background-color: #0033FF;
}
.slider .box3 {
  /*background-color:#478a5f;*/ background-color:#ffffff;
}
.slider .box3 .illustration .inner {
  background-color: #00FF44;
}
.slider .box3 .illustration .inner::after, .slider .box3 .illustration .inner::before {
  background-color: rgba(0, 255, 68, 0.4);
}
.slider .box3 button {
  background-color: #00FF44;
}
.slider .box4 {
  /*background-color: #bab36f;*/ background-color:#ffffff;
}
.slider .box4 .illustration .inner {
  background-color: #FF4E00;
}
.slider .box4 .illustration .inner::after, .slider .box4 .illustration .inner::before {
  background-color: rgba(255, 78, 0, 0.4);
}
.slider .box4 button {
  background-color: #8650aa;
}
.slider .box5 {
 /* background-color: #a773ca;*/ background-color:#ffffff;
}
.slider .box5 .illustration .inner {
  background-color: #8000FF;
}
.slider .box5 .illustration .inner::after, .slider .box5 .illustration .inner::before {
  background-color: rgba(128, 0, 255, 0.4);
}
.slider .box5 button {
  background-color: #8000FF;
}
.slider .illustration {
  grid-column: 2/-1;
  grid-row: 1/-1;
  justify-self: center;
}
@media only screen and (max-width: 650px) {
  .slider .illustration {
    grid-row: 1/span 1;
    grid-column: 1/-1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.slider .illustration div {
  height: 25rem; 
  width: 12em;
  border-radius: 3rem;
/*  background-color: #FF0077;*/
  position: relative;
  transform: skewX(-10deg);
}
@media only screen and (max-width: 800px) {
  .slider .illustration div {
    height:15em;
    width:40em;
  }
}
.slider .illustration div::after, .slider .illustration div::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 3rem;
  top: 0;
  left: 0;
}
.slider .illustration div::after {
  transform: translate(4rem, -1rem);
}
.slider .illustration div::before {
  transform: translate(2rem, -2rem);
}

.prev,
.next,
.trail {
  /*z-index: 10000;*/
  position: absolute;
}

.prev,
.next {
  width: 4rem;
  cursor: pointer;
 color: #000000;  opacity: 0.2;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 650px) {
  .prev,
.next {
    display: none;
  }
}
.prev:hover,
.next:hover {
  opacity: 1;
}

.prev {
  top: 50%;
  left: 2%; 
  transform: translateY(-50%);
}

.next {
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}

.trail {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  text-align: center;
  font-size: 1.5rem;
}
@media only screen and (max-width: 650px) {
  .trail {
   /* width: 50%;*/ left: 59%;
    bottom: 13%;
  }
}
.trail div {
  padding:0.2em; font-size:0.7em;/* margin-bottom:4em; */color:#383737;
  border-top: 3px solid #adadad;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.3s ease;
}
.trail div:hover {
  opacity: 0.6;
}
@media only screen and (max-width: 650px) {
  .trail div {
    padding: 1em;
  }
}

.active {
  opacity: 1 !important;
}

/**********        Back To Top        */

#button {
  display: inline-block;
  /*background-color: #FF9800;*/
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
 /* background-color: #333;*/
}
#button:active {
  /*background-color: #555;*/
}
#button.show {
  opacity: 1;
  visibility: visible;
}

/* Styles for the content section */

.content {
  width: 77%;
  margin: 50px auto;
  font-family: 'Merriweather', serif;
  font-size: 17px;
  color: #6c767a;
  line-height: 1.9;
}
@media (min-width: 500px) {
  .content {
    width: 43%;
  }
  #button {
   /* margin:15px;*/
  }
}
.content h1 {
  margin-bottom: -10px;
  color: #03a9f4;
  line-height: 1.5;
}
.content h3 {
  font-style: italic;
  color: #96a2a7;
}

@media only screen and (max-width:480px) and (min-width:320px)
{
.slider {
  display: flex; padding-top:1.2em;
  width: 480%;
  transition: all 0.25s ease-in;
  transform: translateX(0);
}
	
	.slider .box .details h1 {
  font-size:2em; width:100%; margin: auto;
  font-weight:bold;
 /* margin-top:2em;*/ color:#536404;
}
	
	.slider .box .details {
 /* padding: 5rem;*/ 
  padding-left:2em; width:45%;
  z-index: 100;
  grid-column: 1/span 1;
  /*grid-row: 1/-1;*/
}
	
	.slider .box .details p {
  display: inline-block;
  font-size: 1em;
  color: #1b2004; text-align: center;
  margin-bottom: 2rem;
 
}
	
	.trail div {
		padding:0.3em; font-size:0.7em; margin-bottom:7em; }

	}

   
 @media screen and (max-width: 560px){.wrapper{padding:20px}}
.pic{max-width:250px;max-height:150px;position:relative;overflow:hidden;margin:30px;
        display:inline-block;-webkit-animation:anima 2s;-moz-animation:anima 2s;-o-animation:anima 2s;
        -ms-animation:anima 2s;animation:anima 2s;
        -webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;
        -o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden
        }
        
 .pic-3d{-webkit-perspective:500;
                -moz-perspective:500;
                -o-perspective:500;-ms-perspective:500;
                perspective:500;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;
                -o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}
                
.pic-caption{cursor:default;position:absolute;width:100%;height:100%;
                             background:rgba(44,62,80,0.92);
                             padding:10px;text-align:center;
                             -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
                             filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}
                                                     
.pic-image{-webkit-transform:scale(1.1);
           -moz-transform:scale(1.1);-o-transform:scale(1.1);
           -ms-transform:scale(1.1);transform:scale(1.1)}
           
.pic:hover .pic-image{-webkit-transform:scale(1);
                      -moz-transform:scale(1);-o-transform:scale(1);
                      -ms-transform:scale(1);transform:scale(1)}
                                  
.pic-title{font-size:1.8em}

.pic .pic-image,.pic-caption,.pic:hover .pic-caption,.pic:hover img
{-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}
 
 .pic:hover .bottom-to-top,.pic:hover .top-to-bottom,.pic:hover .left-to-right,.pic:hover
  .right-to-left,.pic:hover .rotate-in,.pic:hover .rotate-out,.pic:hover .open-up,.pic:hover 
  .open-down,.pic:hover .open-left,.pic:hover .open-right,.pic:hover .come-left,.pic:hover 
  .come-right{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
   filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-user-select:none;
   -moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;
   -webkit-touch-callout:none;-moz-touch-callout:none;-o-touch-callout:none;
   -ms-touch-callout:none;touch-callout:none;-webkit-tap-highlight-color:transparent;
   -moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;
   -ms-tap-highlight-color:transparent;tap-highlight-color:transparent}
   
   .bottom-to-top{top:50%;left:0}
   
   .pic:hover .bottom-to-top{top:0;left:0}
   
   .top-to-bottom{bottom:50%;left:0}
   
   .pic:hover .top-to-bottom{left:0;bottom:0}
   
   .left-to-right{top:0;right:50%}
   
   .pic:hover .left-to-right{right:0;top:0}
   
   .right-to-left{top:0;left:50%}
   
   .pic:hover .right-to-left{left:0;top:0}
                
.pic:hover {-webkit-transform:rotate(360deg) scale(1);
                      -moz-transform:rotate(360deg) scale(1);
                      -o-transform:rotate(360deg) scale(1);
                      -ms-transform:rotate(360deg) scale(1);
                      transform:rotate(360deg) scale(1)}
                             
 .pic:hover {-webkit-transform:rotate(360deg) scale(1);
                -moz-transform:rotate(360deg) scale(1);
				-o-transform:rotate(360deg) scale(1);
                -ms-transform:rotate(360deg) scale(1);
				transform:rotate(360deg) scale(1)}
            
.pic:hover {-webkit-transform:rotateX(0);
                      -moz-transform:rotateX(0);
                      -o-transform:rotateX(0);
                      -ms-transform:rotateX(0);
                      transform:rotateX(0)}                     
        
.pic:hover {-webkit-transform:rotateX(0);
                    -moz-transform:rotateX(0);
                    -o-transform:rotateX(0);
                    -ms-transform:rotateX(0);
                    transform:rotateX(0)}
                    

.pic:hover {-webkit-transform:rotateY(0deg);
                      -moz-transform:rotateY(0deg);
                      -o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);
                      transform:rotateY(0deg)}
          
.pic:hover {-webkit-transform:rotateY(0deg);
                       -moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);
                       -ms-transform:rotateY(0deg);transform:rotateY(0deg)}
                      
            
.pic:hover {-webkit-transform:rotateY(0) rotateX(0);
                      -moz-transform:rotateY(0) rotateX(0);
                      -o-transform:rotateY(0) rotateX(0);
                      -ms-transform:rotateY(0) rotateX(0);
                      transform:rotateY(0) rotateX(0)}
                                
.pic:hover {-webkit-transform:rotateY(0) rotateX(0);
                       -moz-transform:rotateY(0) rotateX(0);
                       -o-transform:rotateY(0) rotateX(0);
                       -ms-transform:rotateY(0) rotateX(0);
                       transform:rotateY(0) rotateX(0)}
					   
                       
@media screen and (max-width: 560px)
{
    .pic{max-width:250px;max-height:150px;display:block;-webkit-animation:none;
         -moz-animation:none;-o-animation:none;-ms-animation:none;animation:none;margin:10px auto
         }
         
         }
             
@media screen and (max-width:1024px)
{

.pic{ max-width: 220px; }

}    
   
 @media screen and (max-width: 560px){.wrapper{padding:20px}}
.pic{max-width:250px;max-height:150px;position:relative;overflow:hidden;margin:30px;
        display:inline-block;-webkit-animation:anima 2s;-moz-animation:anima 2s;-o-animation:anima 2s;
        -ms-animation:anima 2s;animation:anima 2s;
        -webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;
        -o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden
        }
        
 .pic-3d{-webkit-perspective:500;
                -moz-perspective:500;
                -o-perspective:500;-ms-perspective:500;
                perspective:500;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;
                -o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}
                
.pic-caption{cursor:default;position:absolute;width:100%;height:100%;
                             background:rgba(44,62,80,0.92);
                             padding:10px;text-align:center;
                             -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
                             filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}
                                                     
.pic-image{-webkit-transform:scale(1.1);
           -moz-transform:scale(1.1);-o-transform:scale(1.1);
           -ms-transform:scale(1.1);transform:scale(1.1)}
           
.pic:hover .pic-image{-webkit-transform:scale(1);
                      -moz-transform:scale(1);-o-transform:scale(1);
                      -ms-transform:scale(1);transform:scale(1)}
                                  
.pic-title{font-size:1.8em}

.pic .pic-image,.pic-caption,.pic:hover .pic-caption,.pic:hover img
{-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}
 
 .pic:hover .bottom-to-top,.pic:hover .top-to-bottom,.pic:hover .left-to-right,.pic:hover
  .right-to-left,.pic:hover .rotate-in,.pic:hover .rotate-out,.pic:hover .open-up,.pic:hover 
  .open-down,.pic:hover .open-left,.pic:hover .open-right,.pic:hover .come-left,.pic:hover 
  .come-right{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
   filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-user-select:none;
   -moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;
   -webkit-touch-callout:none;-moz-touch-callout:none;-o-touch-callout:none;
   -ms-touch-callout:none;touch-callout:none;-webkit-tap-highlight-color:transparent;
   -moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;
   -ms-tap-highlight-color:transparent;tap-highlight-color:transparent}
   
   .bottom-to-top{top:50%;left:0}
   
   .pic:hover .bottom-to-top{top:0;left:0}
   
   .top-to-bottom{bottom:50%;left:0}
   
   .pic:hover .top-to-bottom{left:0;bottom:0}
   
   .left-to-right{top:0;right:50%}
   
   .pic:hover .left-to-right{right:0;top:0}
   
   .right-to-left{top:0;left:50%}
   
   .pic:hover .right-to-left{left:0;top:0}
                
.pic:hover {-webkit-transform:rotate(360deg) scale(1);
                      -moz-transform:rotate(360deg) scale(1);
                      -o-transform:rotate(360deg) scale(1);
                      -ms-transform:rotate(360deg) scale(1);
                      transform:rotate(360deg) scale(1)}
                             
 .pic:hover {-webkit-transform:rotate(360deg) scale(1);
                -moz-transform:rotate(360deg) scale(1);
				-o-transform:rotate(360deg) scale(1);
                -ms-transform:rotate(360deg) scale(1);
				transform:rotate(360deg) scale(1)}
            
.pic:hover {-webkit-transform:rotateX(0);
                      -moz-transform:rotateX(0);
                      -o-transform:rotateX(0);
                      -ms-transform:rotateX(0);
                      transform:rotateX(0)}                     
        
.pic:hover {-webkit-transform:rotateX(0);
                    -moz-transform:rotateX(0);
                    -o-transform:rotateX(0);
                    -ms-transform:rotateX(0);
                    transform:rotateX(0)}
                    

.pic:hover {-webkit-transform:rotateY(0deg);
                      -moz-transform:rotateY(0deg);
                      -o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);
                      transform:rotateY(0deg)}
          
.pic:hover {-webkit-transform:rotateY(0deg);
                       -moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);
                       -ms-transform:rotateY(0deg);transform:rotateY(0deg)}
                      
            
.pic:hover {-webkit-transform:rotateY(0) rotateX(0);
                      -moz-transform:rotateY(0) rotateX(0);
                      -o-transform:rotateY(0) rotateX(0);
                      -ms-transform:rotateY(0) rotateX(0);
                      transform:rotateY(0) rotateX(0)}
                                
.pic:hover {-webkit-transform:rotateY(0) rotateX(0);
                       -moz-transform:rotateY(0) rotateX(0);
                       -o-transform:rotateY(0) rotateX(0);
                       -ms-transform:rotateY(0) rotateX(0);
                       transform:rotateY(0) rotateX(0)}
					   
                       
@media screen and (max-width: 560px)
{
    .pic{max-width:250px;max-height:150px;display:block;-webkit-animation:none;
         -moz-animation:none;-o-animation:none;-ms-animation:none;animation:none;margin:10px auto
         }
         
         }
             
@media screen and (max-width:1024px)
{

.pic{ max-width: 220px; }

}       
 @media screen and (max-width: 560px){.wrapper{padding:20px}}
.pic{max-width:250px;max-height:150px;position:relative;overflow:hidden;margin:30px;
        display:inline-block;-webkit-animation:anima 2s;-moz-animation:anima 2s;-o-animation:anima 2s;
        -ms-animation:anima 2s;animation:anima 2s;
        -webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;
        -o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden
        }
        
 .pic-3d{-webkit-perspective:500;
                -moz-perspective:500;
                -o-perspective:500;-ms-perspective:500;
                perspective:500;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;
                -o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}
                
.pic-caption{cursor:default;position:absolute;width:100%;height:100%;
                             background:rgba(44,62,80,0.92);
                             padding:10px;text-align:center;
                             -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
                             filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}
                                                     
.pic-image{-webkit-transform:scale(1.1);
           -moz-transform:scale(1.1);-o-transform:scale(1.1);
           -ms-transform:scale(1.1);transform:scale(1.1)}
           
.pic:hover .pic-image{-webkit-transform:scale(1);
                      -moz-transform:scale(1);-o-transform:scale(1);
                      -ms-transform:scale(1);transform:scale(1)}
                                  
.pic-title{font-size:1.8em}

.pic .pic-image,.pic-caption,.pic:hover .pic-caption,.pic:hover img
{-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}
 
 .pic:hover .bottom-to-top,.pic:hover .top-to-bottom,.pic:hover .left-to-right,.pic:hover
  .right-to-left,.pic:hover .rotate-in,.pic:hover .rotate-out,.pic:hover .open-up,.pic:hover 
  .open-down,.pic:hover .open-left,.pic:hover .open-right,.pic:hover .come-left,.pic:hover 
  .come-right{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
   filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-user-select:none;
   -moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;
   -webkit-touch-callout:none;-moz-touch-callout:none;-o-touch-callout:none;
   -ms-touch-callout:none;touch-callout:none;-webkit-tap-highlight-color:transparent;
   -moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;
   -ms-tap-highlight-color:transparent;tap-highlight-color:transparent}
   
   .bottom-to-top{top:50%;left:0}
   
   .pic:hover .bottom-to-top{top:0;left:0}
   
   .top-to-bottom{bottom:50%;left:0}
   
   .pic:hover .top-to-bottom{left:0;bottom:0}
   
   .left-to-right{top:0;right:50%}
   
   .pic:hover .left-to-right{right:0;top:0}
   
   .right-to-left{top:0;left:50%}
   
   .pic:hover .right-to-left{left:0;top:0}
                
.pic:hover {-webkit-transform:rotate(360deg) scale(1);
                      -moz-transform:rotate(360deg) scale(1);
                      -o-transform:rotate(360deg) scale(1);
                      -ms-transform:rotate(360deg) scale(1);
                      transform:rotate(360deg) scale(1)}
                             
 .pic:hover {-webkit-transform:rotate(360deg) scale(1);
                -moz-transform:rotate(360deg) scale(1);
				-o-transform:rotate(360deg) scale(1);
                -ms-transform:rotate(360deg) scale(1);
				transform:rotate(360deg) scale(1)}
            
.pic:hover {-webkit-transform:rotateX(0);
                      -moz-transform:rotateX(0);
                      -o-transform:rotateX(0);
                      -ms-transform:rotateX(0);
                      transform:rotateX(0)}                     
        
.pic:hover {-webkit-transform:rotateX(0);
                    -moz-transform:rotateX(0);
                    -o-transform:rotateX(0);
                    -ms-transform:rotateX(0);
                    transform:rotateX(0)}
                    

.pic:hover {-webkit-transform:rotateY(0deg);
                      -moz-transform:rotateY(0deg);
                      -o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);
                      transform:rotateY(0deg)}
          
.pic:hover {-webkit-transform:rotateY(0deg);
                       -moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);
                       -ms-transform:rotateY(0deg);transform:rotateY(0deg)}
                      
            
.pic:hover {-webkit-transform:rotateY(0) rotateX(0);
                      -moz-transform:rotateY(0) rotateX(0);
                      -o-transform:rotateY(0) rotateX(0);
                      -ms-transform:rotateY(0) rotateX(0);
                      transform:rotateY(0) rotateX(0)}
                                
.pic:hover {-webkit-transform:rotateY(0) rotateX(0);
                       -moz-transform:rotateY(0) rotateX(0);
                       -o-transform:rotateY(0) rotateX(0);
                       -ms-transform:rotateY(0) rotateX(0);
                       transform:rotateY(0) rotateX(0)}
					   
                       
@media screen and (max-width: 560px)
{
    .pic{max-width:250px;max-height:150px;display:block;-webkit-animation:none;
         -moz-animation:none;-o-animation:none;-ms-animation:none;animation:none;margin:10px auto
         }
         
         }
             
@media screen and (max-width:1024px)
{

.pic{ max-width: 220px; }

}