body {
  /*background-color: #2ECC40;*/
  	background-image: url(https://ijlpr.com/public/site/images/admin/Web-background.jpg);
	background-repeat: repeat;
	background-position: left top;
}

.bg {
	background-image: url(images/table-bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.head {
	font-family: Tahoma;
	font-size: 14px;
	color: #669900;
	font-weight: normal;
}
.text {
	font-family: Tahoma;
	font-size: 13px;
	font-weight: normal;
	color: #666666;
	text-decoration: none;
	line-height: 18px;
}
.cr {
	font-family: Tahoma;
	font-size: 13px;
	color: #999999;
	text-decoration: none;
}
a.cr:hover{
	font-family: Tahoma;
	font-size: 13px;
	color: #999999;
	text-decoration: underline;
}
/*.toplink {
	font-family: Tahoma;
	font-size: 13px;
	color: #669900;
	font-weight: bold;
	text-decoration: none;
}
a.toplink:hover {
	font-family: Tahoma;
	font-size: 13px;
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}*/
.bgCopy {

	background-image: url(images/table-bg-inner.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.headCopy {
	font-family: Tahoma;
	font-size: 13px;
	color: #669900;
	font-weight: normal;
	font-style: italic;
	text-decoration: none;
}
.textCopy {

	font-family: Tahoma;
	font-size: 13px;
	font-weight: normal;
	color: #669900;
	text-decoration: underline;
	line-height: 18px;
}
a.textCopy:hover {
	font-family: Tahoma;
	font-size: 13px;
	line-height: 18px;
	color: #666666;
	text-decoration: none;
}
a {
	font-family: Tahoma;
	font-size: 13px;
	line-height: 18px;
	color: #666666;
	text-decoration: none;
}
/*a:hover {
	font-family: Tahoma;
	font-size: 13px;
	line-height: 18px;
	color: #666666;
	text-decoration:underline;
}*/
.email {


	font-family: Tahoma;
	font-size: 13px;
	font-weight: normal;
	color: #666666;
	text-decoration: none;
	line-height: 18px;
}
a.email:hover {

	font-family: Tahoma;
	font-size: 13px;
	line-height: 18px;
	color: #666666;
	text-decoration: underline;
}
 .iconDetails {
 margin-left:2%;
float:left; 
height:180px;
width:180px; 
color: #666666;
} 

.container2 {
    width:100%;
    height:auto;
    padding:1%;
color: #669900;
}

/* Container needed to position the overlay. Adjust the width as needed - Indexing*/
.containerIn {
  position: relative;
   width: 220px;
  height: 220px;
}

/* Make the image to responsive */
.imageIn {
  width: 100%;
  height: auto;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlayIn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #669933;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}

/* When you mouse over the container, the overlay text will "zoom" in display */
.containerIn:hover .overlayIn {
  transform: scale(1);
}

/* Some text inside the overlay, which is positioned in the middle vertically and horizontally */
.textIn {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}


/* Box*/
.wrapper {
  width: 200px;
  height: 200px;
  margin: 15% auto;
}

.box-area {
  -webkit-animation: animate 10s ease-in-out infinite;
  animation: animate 10s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 100px 100px 0;
  -ms-transform-origin: 100px 100px 0;
  transform-origin: 100px 100px 0;
}

@-webkit-keyframes animate {
  from,
  to {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  16% {
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }

  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    transform: rotateY(-90deg) rotateZ(90deg);
  }

  50% {
    -webkit-transform: rotateY(-180deg) rotateZ(90deg);
    transform: rotateY(-180deg) rotateZ(90deg);
  }

  66% {
    -webkit-transform: rotateY(-270deg) rotateZ(90deg);
    transform: rotateY(-270deg) rotateZ(90deg);
  }

  83% {
    -webkit-transform: rotateX(-270deg);
    transform: rotateX(-270deg);
  }
}

@keyframes animate {
  from,
  to {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  16% {
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }

  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    transform: rotateY(-90deg) rotateZ(90deg);
  }

  50% {
    -webkit-transform: rotateY(-180deg) rotateZ(90deg);
    transform: rotateY(-180deg) rotateZ(90deg);
  }

  66% {
    -webkit-transform: rotateY(-270deg) rotateZ(90deg);
    transform: rotateY(-270deg) rotateZ(90deg);
  }

  83% {
    -webkit-transform: rotateX(-270deg);
    transform: rotateX(-270deg);
  }
}

.box-area div {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
}

.box-area .box1 {
  background-image: url("https://www.ijlpr.com/public/site/images/admin/emerging-source-citation-index-e76ac78c33cd1b65921954b45c8bdf1b.jpg");
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
}

.box-area .box2 {
  background-image: url("https://www.ijlpr.com/public/site/images/admin/wos-3051e7b70fd0e65e3b4f9469be683240.jpg");
  background-size: cover;
  background-position: center center;
  -webkit-transform: rotateY(90deg) translateZ(100px);
  transform: rotateY(90deg) translateZ(100px);
}

.box-area .box3 {
  background-image: url("https://www.ijlpr.com/public/site/images/admin/belmont-efc2ddf845f851268710c75de67ae328.jpg");
  background-size: cover;
  background-position: center center;
  -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
  transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
}

.box-area .box4 {
  background-image: url("https://www.ijlpr.com/public/site/images/admin/california-institute-of-technology-e57f84ddd2240befa38f3f5f429181c9.jpg");
  background-size: cover;
  background-position: center center;
  -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
  transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
}

.box-area .box5 {
  background-image: url("https://www.ijlpr.com/public/site/images/admin/cas-5457c1b8a6c15c25a218cbebb9bf7e37.jpg");
  background-size: cover;
  background-position: center center;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
  transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
}

.box-area .box6 {
  background-image: url("https://www.ijlpr.com/public/site/images/admin/doshisha-5501eca2eeb43771d46b927e3c43ae9b.jpg");
  background-size: cover;
  background-position: center center;
  -webkit-transform: rotateX(-90deg) translateZ(100px);
  transform: rotateX(-90deg) translateZ(100px);
}


/* Created by Image Magnify Peer Review Process */
		{
			margin: 0;
			padding: 0;
		}
		.zoom-area
		{
			width: 700px;
			margin: 50px auto;
			position: relative;
			cursor: none
		}
		/* for create magnify glass */
		.large
		{
			width: 175px;
			height: 175px;
			position: absolute;
			border-radius: 100%;
		
			/* for box shadow for glass effect */
			box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
			0 0 7px 7px rgba(0, 0, 0, 0.25), 
			inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
			
			/*for hide the glass by default*/
			display: none;
		}
		.small
		{
			display: block;
		}

/* Download Button  in Rev Guidelines*/


button{
  border: none;
  border-radius: 100px;
  box-shadow: 0 0 8px rgb(255, 255, 255);
}

button:hover{
  border: none;
  padding: 15px;
  border-radius: 15px;
  box-shadow: inset 0 0 8px #f9f8fc;

  } 

.button-os{
    width: 150px;
    height: 45px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #669900;
    border: 1.5px solid #0e172c;
    border-color: #FFFF00;
    transition: background-color 2.2s;
    transition-duration: 3s;
    transition: 1.5s;
  }
  
  .button-os:hover{
    top: 30px;
    background-color: #fec7d7;
    
  }
  
  .button-os a{
    font-size: 20px;
    display: block;
    text-decoration: none;
    color: #fff;
    transition: 2.5s;
   
  }
  
  .button-os a:hover{
    letter-spacing: 5px;
  }

/* Gallery Image */

#stage {
    margin: 1em auto;
    width: 800px;
    height: 270px;
    border: 2px solid #669900;
    overflow: hidden;
  }
  #stage a {
    position: relative;
    display: inline-block;
  }
  #stage a::after {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    content: attr(title);
    font-weight: bold;
    font-size: 2em;
    color: #fff;
    text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 2px 2px 0 #333;
  }

  #stage a:nth-of-type(2) {
    left: 800px;
    top: -50%;
    animation-name: slider;
    animation-delay: 4s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0,1.5,0.5,1);
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes slider {
    from { transform: translateY(-50%) rotate(30deg); left: 360px; }
    to   { transform: translateY(-50%); left: 0px; }
  }


/* Gallery Image 02 */
.image1 {
  perspective: 3000px;
  width: 50%;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.image1 img {
  transform: rotateX(70deg) rotateZ(-60deg) translate3d(-120px, 0px, 70px);
  box-shadow: -80px 60px 15px 5px rgba(0,0,0,0.4);
  transition: all .4s;
  transform-style: preserve-3d;
}
.image1:hover img {
  transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* Aim Scope */

  @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}

#cf3 img {
  position:absolute;
}

/* pokemone pictures EB board */

.pricing-boxn{
  background-color: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
  border-radius: 10px;
  flex: 1;
  padding: 0 5px 5px;
  margin: 2%;
  min-width: 250px;
  max-width: 500px;
  border:1px ridge #97d947;
  text-align:left;
  	font-family: Tahoma;
	font-size: 13px;
	font-weight: normal;
	color: #666666;
	text-decoration: none;
	line-height: 18px;

  }
  .pricing-boxp{
  background-color: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
  border-radius: 10px;
  flex: 1;
  padding: 0 5px 5px;
  margin: 2%;
  min-width: 100x;
  max-width: 100px;
  border:1px ridge #97d947;

  }
  .pricing-boxi{
  background-color: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
  border-radius: 10px;
  flex: 1;
  padding: 5px 5px 5px;
  margin: 2%;
  min-width: 200px;
  max-width: 250px;
  border:1px ridge #97d947;

  }
  
  .pricing-boxnc{
  background-color: #669933;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
  border-radius: 10px;
  flex: 1;
  padding: 0 5px 5px;
  margin: 2%;
  min-width: 250px;
  max-width: 500px;
  border:1px ridge #B2C248;
  text-align:left;
  	font-family: Tahoma;
	font-size: 13px;
	font-weight: normal;
	color: #ffffff;
	text-decoration: none;
	line-height: 18px;

  }
  .pricing-boxpc{
  background-color: #669933;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
  border-radius: 10px;
  flex: 1;
  padding: 0 5px 5px;
  margin: 2%;
  min-width: 100x;
  max-width: 100px;
  border:1px ridge #97d947;

  }
  .pricing-boxic{
  background-color: #669933;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
  border-radius: 10px;
  flex: 1;
  padding: 5px 5px 5px;
  margin: 2%;
  min-width: 200px;
  max-width: 250px;
  border:1px ridge #97d947;

  }

.pokemon {
  width: 100px;
  height: 100px;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overlay */
  box-shadow: 0 0 0 100px inset, 0 0 5px grey;
  /* hover out transition */
  transition: box-shadow 1s;
  float: left;
  margin: 2px;
}

/* pokemone names */

.pokemon::after {
  width: 80%;
  height: 80%;
  display: block;
  white-space: pre;
  font: 15pt 'sigmar one';
  color: white;
  border: 2px solid;
  text-align: center;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* hover out transition */
  transition: opacity 1s .5s;
}


/* reveal pokemone picture on hover */

.pokemon:hover {
  box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;
  transition: box-shadow 1s;
}


/* hide pokemone name on hover */

.pokemon:hover::after {
  opacity: 0;
  transition: opacity .5s;
}

#bulbasaur {
  background-image: url(https://www.ijlpr.com/public/site/images/admin/publons-p.png);
  color: rgba(45, 89, 133, .9);
  background-size: 100px 100px;
}

#bulbasaur::after {
  
  content: 'Publons'
}

#charmander {
  background-image: url(https://www.ijlpr.com/public/site/images/admin/orcid.png);
  color: rgba(161, 200, 55, .9);
   background-size: 100px 100px;
}

#charmander::after {
  content: 'Orcid'
}

#squirtle {
  background-image: url(https://www.ijlpr.com/public/site/images/admin/gscholar.png);
  color: rgba(51, 103, 189, .9);
   background-size: 100px 100px;
}

#squirtle::after {
  content: 'H-Index'
}

#pikachu {
  background-image: url(https://www.ijlpr.com/public/site/images/admin/affiliation-c3667339dc19b9f0702dd7e28c00cd2e.jpg);
  color: rgba(150, 223, 255, .9);
   background-size: 100px 100px;
}

#pikachu::after {
  content: 'Affliation'
}

#wrapper1 {
  width: 210px;
  height: 210px;

}

/* rTabs Contact Us*/
.tabs {
    max-width: 90%;
    float: none;
    list-style: none;
    padding: 0;
    margin: 75px auto;
    border-bottom: 4px solid #ccc;
}
.tabs:after {
    content: '';
    display: table;
    clear: both;
}
.tabs input[type=radio] {
    display:none;
}
.tabs label {
    display: block;
    float: left;
    width: 33.3333%;
    color: #ccc;
    font-size: 30px;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    line-height: 2;
    cursor: pointer;
    box-shadow: inset 0 4px #ccc;
    border-bottom: 4px solid #ccc;
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
    transition: all 0.5s;
}
.tabs label span {
    display: none;
}
.tabs label i {
    padding: 5px;
    margin-right: 0;
}
.tabs label:hover {
    color: #669933;
    box-shadow: inset 0 4px #669933;
    border-bottom: 4px solid #669933;
}
.tab-content {
    display: none;
    width: 100%;
    float: left;
    padding: 15px;
    box-sizing: border-box;
    background-color:#ffffff;
}
.tab-content * {
    -webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}
@keyframes scale {
  0% {
    transform: scale(0.9);
    opacity: 0;
    }
  50% {
    transform: scale(1.01);
    opacity: 0.5;
    }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.tabs [id^="tab"]:checked + label {
    background: #FFF;
    box-shadow: inset 0 4px #669933;
    border-bottom: 4px solid #669933;
    color: #669933;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
    display: block;
}
@media (min-width: 768px) {
    .tabs i {
        padding: 5px;
        margin-right: 10px;
    }
    .tabs label span {
        display: inline-block;
    }
    .tabs {
    max-width: 950px;
    margin: 50px auto;
    }
}


/*Cube button*/


  .boton {
        width: 150px;
        height: 50px;
        display: block;
        position: relative;
    }
    
    .botontext {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1;
        text-align: center;
        line-height: 50px;
        font-size: 14px;

    }
    
    .twist {
        display: block;
        height: 100%;
        width: 25%;
        position: relative;
        float: left;
        margin-left: -4px;
        
    }
    
    .twist:before {
        content: "";
        width: 100%;
        height: 100%;
        background: #669900;
        bottom: 100%;
        position: absolute;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .twist:after {
        content: "";
        position: absolute;
        width: 100%;
        top: 100%;
        height: 100%;
        background: #669900;
        transform-origin: center top 0px;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, -0.003, 
                            0, -50, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .twist:before {
        background: #DC143C;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton:hover .twist:after {
        background: #dedae1;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

    .boton .twist:nth-of-type(1) {
        margin-left: 0;
    }
    
    .boton .twist:nth-of-type(1):before,
    .boton .twist:nth-of-type(1):after {
        transition-delay: 0s;
    }
    
    .boton .twist:nth-of-type(2):before,
    .boton .twist:nth-of-type(2):after {
        transition-delay: 0.1s;
    }
    
    .boton .twist:nth-of-type(3):before,
    .boton .twist:nth-of-type(3):after {
        transition-delay: 0.2s;
    }
    
    .boton .twist:nth-of-type(4):before,
    .boton .twist:nth-of-type(4):after {
        transition-delay: 0.3s;
    }
    
    .boton .botontext:nth-of-type(1) {
        color: #3d3b40;
        bottom: 100%;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .botontext:nth-of-type(1) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton .botontext:nth-of-type(2) {
        color: #fff;
        top: 100%;
        transform-origin: center top 0px;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, -0.003, 
                            0, -50, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .botontext:nth-of-type(2) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

 /* Glow Over*/


.glow-on-hover {
    width: 120px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #fff;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #669900;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


/*Contact US*/

.snip1361 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 200px;
  max-width: 250px;
  width: 100%;
  color: #141414;
  text-align: left;
  line-height: 1.4em;
  font-size: 16px;
}

.snip1361 img {
  max-width: 100%;
  vertical-align: top;
  
}
.snip1361 figcaption {
  position: absolute;
  top: calc(77%);
  width: 100%;
  background-color: #ffffff;
  padding: 15px 25px 65px;
}
.snip1361 figcaption:before {
  position: absolute;
  content: '';
  z-index: 2;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}
.snip1361 h3,
.snip1361 p {
  margin: 0 0 10px;
}
.snip1361 h3 {
  font-weight: 300;
  font-size: 1.4em;
  line-height: 1.2em;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
}


.snip1361:hover figcaption,
.snip1361.hover figcaption {
  top: 80px;
}


/*Home banner*/


.slide-container {
width:810px;
height:300px;
position:absolute;
}

.dot-container {
position:absolute;
bottom:5px;
left:50%;
transform:translateX(-50%);
}

.dot {
cursor:pointer;
height:13px;
width:13px;
background-color:#669933;
border-radius:50%;
display:inline-block;
transition:background-color .6s ease;
margin:0 2px;
}

.active,.dot:hover {
background-color:#669933;
height:17px;
width:17px;
}

.captionText {
width:130px;
height:30px;
position:absolute;
bottom:10px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:14px;
font-weight:bolder;
text-align:center;
line-height:30px;
letter-spacing:.19em;
background:#7E3517;
color:#FFF;
opacity:0;
}

.main-content,.responsive-img {
width:100%;
height:100%;
}

@media only screen and max-width 700px{
.slide-container {
width:600px;
}
}

@media only screen and max-width 600px{
.slide-container {
width:500px;
height:300px;
}
}

@media only screen and max-width 500px{
.slide-container {
width:400px;
height:250px;
}

.captionText {
width:100px;
height:30px;
font-size:12px;
line-height:30px;
}
}

@media only screen and max-width 400px{
.slide-container {
width:300px;
height:200px;
}

.captionText {
width:130px;
height:30px;
font-size:10px;
line-height:30px;
}
}

/*Home Page 3 menu*/

figure.snip1256 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 245px;
  max-height: 220px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  background-color: #669900;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
}
figure.snip1256 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1256 img {
  opacity: 1;
  width: 100%;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
figure.snip1256 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% -50%;
  -ms-transform-origin: 50% -50%;
  transform-origin: 50% -50%;
  z-index: 1;
  opacity: 0;
  padding: 20px 30px;
}
figure.snip1256 h3,
figure.snip1256 p {
  line-height: 1.5em;
}
figure.snip1256 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
figure.snip1256 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
figure.snip1256 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1256 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1256:hover img,
figure.snip1256.hover img {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  opacity: 0;
}
figure.snip1256:hover figcaption,
figure.snip1256.hover figcaption {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}


/*Home Page 3 Yellow*/


.threeholder {
	position: relative;
	margin-top: 0px;
	width: 810px;
	height:280px;
	margin-left: auto;
	margin-right: auto;
}
.threeone {
	display: inline-block;
	width: 33.33333333333%;
	height: 100%;
	background: #363636;
	border-bottom: 15px solid #f5cb22;
	text-align: center;
	transition: all 0.25s;
}
.threetwo {
	display: inline-block;
	width: 33.333333333%;
	height: 100%;
	background: #333333;
	border-bottom: 15px solid #f5cb22;
	transition: all 0.25s;
}
.threethree {
	display: inline-block;
	width: 33.333333333%;
	height: 100%;
	background: #363636;
	border-bottom: 15px solid #f5cb22;
	transition: all 0.25s;
}
.threeone:hover {
	background: #f5cb22;
}
.threeone:hover .circlepic {
	background: #5c5c5c;
}
.threeone:hover .circleborder{
		background: #333333;
}

.threeholder h4 {
	width: 200px;
	text-align: center;
	font-size: 13px;
	margin-left: -55px;
	font-weight: bold;
	margin-top: 45px;
	text-align: center;
	color: white;
}
.threeholder p {
	display: inline-block;
	width:200px;
	text-align: center;
	margin-left: -55px;
	margin-top: 20px;
	font-size: 12px;
	color:white;
	letter-spacing: 1px;
}
.threeone:hover h4 {
	color: black;
}
.threetwo:hover h4 {
	color: black;
}
.threethree:hover h4 {
	color: black;
}
.threeone:hover svg, .threetwo:hover svg, .threethree:hover svg {
	transition: all 0.65s;
	transform: rotateY(360deg);
}
.threetwo:hover {
	background: #f5cb22;
}
.threetwo:hover .circleborder{
		background: #333333;
}
.threetwo:hover svg{
	fill:#f5cb22;
}
.threethree:hover {
	background: #f5cb22;
}
.threethree:hover .circleborder{
		background: #333333;
}
.threethree:hover svg{
	fill:#f5cb22;
}
.circleborder {
	position: absolute;
	top: 30px;
	width: 90px;
	height: 90px;
	background: #f5cb22;
	margin-left: 88.33333px;
	border-radius: 50%;
}
.circlepic {
	position:absolute;
	top:-10px;
	margin-top: 30px;
	width: 110px;
	height: 110px;
	background: #669900;
	margin-left: 78.33333px;
	border-radius: 50%;
}

.rotate-link:hover .rotate-icon
{
  transform: rotate(360deg);
  transition: all 0.9s;
  
}

/*Accordian- FAQ*/

.accordion_container {
  width: 800px;
}

.accordion_head {
  background-color: #669900;
  color: white;
  cursor: pointer;
  font-family: Tahoma;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

.accordion_body {
  background: #fff
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.plusminus {
  float: right;
}



/*Mouse pointer*/
[data-link] {
  cursor: pointer;
}

/*WOS*/

.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -2px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.swing img {
    display: block;
}
.swing:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
.swing:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}


.demo {
	width: 200px;
	height: 200px;
	border: 5px solid #669933;
	position:relative;
  	overflow:hidden;
}
.demo img {
	position:absolute;
	width: 200px;
	height:200px;
	overflow:hidden;
 	transform:scale(0);
	animation: anim 24s infinite;
  /* Maths: 24s = 4 images * 6s */
}
/* MATHS: delay= (img count -1) * 6s*/
.demo img:nth-child(2) {animation-delay: 6s;}
.demo img:nth-child(3) {animation-delay: 12s;}
.demo img:nth-child(4) {animation-delay: 18s;}
@keyframes anim {
  12.5% {transform:scale(1)}
  25% {transform:scale(0)
}



/* ISSN*/


.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #DB7F17 0%,
    #F1EB12 29%,
    #F1124C 67%,
    #17DB8E 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 180% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 9s linear infinite;
  display: inline-block;
  font-size: 20px;
}

@keyframes textclip {
  to {
    background-position: 180% center;
  }
}


/** ========================
 * Pricing Table
 ============================*/
.pricing-wrapper {
	width: 810px;
	margin: 20px auto 0;
}

.pricing-table {
	margin: 0 10px;
	text-align: center;
	width: 250px;
	float: left;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.4);
	box-shadow: 0 0 15px rgba(0,0,0,0.4);
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.pricing-table:hover {
	-webkit-transform: scale(1.06);
	-ms-transform: scale(1.06);
	-o-transform: scale(1.06);
	transform: scale(1.06);
}

.pricing-title {
	color: #FFF;
	background: #F5CB22;
	padding: 20px 0;
	font-size: 2em;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.pricing-table .price {
  color: #FFF;
	background: #669933;
	font-size: 1.8em;
	font-weight: 700;
	padding: 20px 0;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}