/* ============================================================
   Base layer — reconstructed from the original Yola template
   so typography matches the live rockyspizzarestaurant.com.
   (The Yola site inherited these; the standalone rebuild must
   declare them explicitly.)
   ============================================================ */

/* NOTE: no global box-sizing override — the original site used the
   browser default (content-box). The custom components below were
   authored for content-box, so forcing border-box misplaces them. */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  line-height: 1em;
  text-transform: capitalize;
}

img { max-width: 100%; border: 0; }

/* <figure> has a default 1em/40px browser margin; the gallery slides are
   <figure> elements, so reset it (otherwise the first slide is inset 40px). */
figure { margin: 0; }

/* Heading / paragraph spacing (matches Yola .sys_layout) */
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em 0; }
p { margin: 0 0 1.5em 0; }

/* Content typography — exact sizes/colors/fonts from the live site */
h1 { font-size: 2em; font-weight: bold; line-height: 1.1em; }

h2 {
  font-family: 'Cantora One', sans-serif;
  font-weight: normal;
  font-size: 28px;
  color: #292828;
  letter-spacing: 1px;
  line-height: 1.5em;
}

h3 {
  font-family: 'Acme', sans-serif;
  font-weight: normal;
  font-size: 22px;
  color: #363636;
  letter-spacing: 1px;
  line-height: 1.5em;
}

h4 {
  font-family: 'Cantora One', sans-serif;
  font-weight: normal;
  font-size: 49px;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 0.8em;
}

h5 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 19px;
  color: #8bd61a;
  line-height: 1em;
}

h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #8bd61a;
  line-height: 1.4em;
}

a { color: #ffffff; text-decoration: none; }
a:hover { color: #000000; }

/* Footer keeps natural casing, like the original */
footer { text-transform: none; }

@media only screen and (max-width: 736px) {
  html { font-size: 80%; }
}

/* ============================================================
   Original custom site CSS
   ============================================================ */

hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.75), rgba(250, 250, 250, 0));
}
h5 { text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}
h6 { text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}
p {text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

body {
   background-image: url("resources/woodbg.webp");
   background-repeat: repeat;
   background-attachment: scroll;
}

a:focus {
  outline: none;
}

.content {
  margin: 0px;
}

.clearfix:after {
  content: '.';
  height: 0;
  font-size: 0;
  line-height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.tabs-content {
  font-family: sans-serif;
}

/* Menu  */
.tabs-menu {
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

.tabs-menu ul {
  margin: 0px;
  padding: 0px;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  list-style: none;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

/* UN-Selected Tab */
.tabs-menu ul li {
  display: inline-block;
  background: rgba(0,0,0,0);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

/* UN-Selected Tab */
.tabs-menu ul li a {
  display: block;
  padding: 5px 5px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  background: rgba(28,29,32,.1);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

/* Selected Tab */
.tabs-menu ul li a.active-tab-menu {
  background: rgba(28,29,32,0.5 );
}



/*  COLUMN SETUP USED FOR MENU */
.col {
  margin: 20px;
  padding: 2px 0;
  text-align: center;
	display: block;
	float:left;
	margin: .1% ;
  	background-color: rgba(0, 0, 0, 0.01);
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF FIVE  */
.span_5_of_5 {
	width: 100%;
}
.span_4_of_5 {
	width: 79.8%;
}
.span_3_of_5 {
	width: 59.6%;
}
.span_2_of_5 {
	width: 39.4%;
}
.span_1_of_5 {
	width: 19.2%;
}







/* ------- ---------- ----------
 ------- large screen ----------
 ------- ----START--- ----------
 ------- ---------- ---------- */

 @media screen and (min-width: 768px) {

img {
  height: auto;
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

/* Used to jump on screen */
a.anchor{display: block; position: relative; top: -120px; visibility: hidden;}

/* Is the blank space ontop of website */
#topBox {
  height:120px;

}

   .topContainer {
  width: 40%;
  height: 120px;
  overflow: visible;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  vertical-align: top;

}

/* No extra margins inside the header so content centers vertically */
.topContainer h1, .topContainer p { margin: 0; }

.headerBox {
 color: white;
 position: fixed;
 display: block;
 box-sizing: border-box;
 padding:0 90px;
 height: 120px;
 width:100%;
  min-width: 1015px;
 text-align: top;
 z-index: 9999;
  border-color: black;
  border-radius: 0px;
  border-style: solid;
  border-width: 2px;
background-color: rgba(0,0,0, .6);

}

.headerBoxSmall {
 visibility: hidden;
 color: white;
 position: fixed;
 display: block;
 padding:0;
 height: 45px;
 width:100%;
 font-size: 12px;
 margin:0px 0 ;

 text-align: center;
 z-index: 9999;
  border-color: black;
  border-radius: 0px;
  border-style: solid;
  border-width: 2px;
  background-color: #3F3F3F;
 background-color: rgba(0,0,0, .6);
}



/* Used to hold the menu */
#centerBox {

  margin:10px 5%;
  padding: 10px 0px;
  text-align: center;
  width:90%;
  height: auto;
  color: white;
  border-color: black;
  border-radius: 20px;
  border-style: solid;
  border-width: 1%;
  background-color: #3F3F3F;

background: -moz-linear-gradient(45deg,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2)));
background: -webkit-linear-gradient(45deg,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(45deg,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(45deg,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(45deg,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.4) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3345484d', endColorstr='#33000000',GradientType=1 );

 }

#centerBox:after {
  content:".";
        display:block;
        clear:both;
        visibility:hidden;

}

/* HOLDS HOURS AND LOCATION */
.container {
  width: 100%;
  margin: 0px auto;
  position: relative;
  text-align:center;
}

/* HOLDS MENU */
.container2 {
  width: 100%;
  margin: 0px auto;
  padding: 20px 0;
  position: relative;
  text-align:center;
}

.block {
  padding: 10px 2px;
  margin: 20px;
  display:inline-block;
  text-align: center;
  width: 340px;
  height: 240px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1%;
  border-color: black;
  overflow: hidden;
  background-color: rgba(255,255,255, .2);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);

}

.blockMap {
  overflow: hidden;
  margin: 20px;
  display:inline-block;
  width: 344px;
  height: 260px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1%;
  border-color: black;
  background-color: white;
}

.coupon {
  padding: 10px 2px;
  margin: 20px;
  display:inline-block;
  text-align: center;
  width: 340px;
  height: 520px;
  overflow: hidden;
  border-color: black;
  border-radius: 5px;
  border-style: dashed;
  border-width: 3px;
  background-color: rgba(255,255,255, .2);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}




.itemName {
  width:40%;
  margin: 0 10px;
  padding: 0 0 0 10px;
  text-align: center;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
}

.itemName2 {
  width:75%;
  margin: 0 -2px;
  background: gray;

  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
}

.itemPrice {
  width:25%;
  margin: 6px -2px;

  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
  vertical-align: top;
}

.itemPrice2 {
  width:50%;
  margin: 6px -2px;

  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
  vertical-align: top;
}

.itemPrice3 {
  width:50%;
  margin: 6px -2px;
  text-align: left;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
  vertical-align: top;
}

/* Selected Tab Content */
.tabs {
  display: none;
  padding: 30px ;
  border-style: solid;
  border-color: black;
  border-width: 0px;
  background: rgba(28,29,32,0 );
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}
/* First Selected Tab Content */
.first-tab {
  display: block;
  background: rgba(28,29,32,0 );
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

.textBack {
  width:80%;
  height:80%;
  margin: 0;
  font:20px;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.2);
  border-radius: 0px;
  border-style: solid;
  border-width: 3px;
}

.textBox {
  width:300px;
  height: auto;
  margin: 0;
  background: gray;
  font-size: 25px;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  border-style: solid;
  border-width: 3px;
}

   }

/* ------- ---------- ----------
 ------- large screen ----------
 ------- ----END--- ----------
 ------- ---------- ---------- */




/* ------- ---------- ----------
 ------- Small screen ----------
 ------- ----START--- ----------
 ------- ---------- ---------- */

 @media screen and (max-width: 767px) {



   body {
   background-image: url("resources/woodbg.webp");
   background-repeat: repeat;
   background-attachment: scroll;
}




img {
  height: auto;
}

/* Used to jump on screen */
a.anchor{display: block; position: relative; top: -45px; visibility: hidden;}

/* Is the blank space ontop of website */
#topBox {
  height:45px;
}

.topContainer {
  width: 40%;
  height: 45px;
  overflow: visible;
  text-align: center;
  display:inline-block;

}

.headerBox {
 visibility:hidden;
 position: fixed;

}

.headerBoxSmall {
 color: white;
 position: fixed;
 display: block;
 padding:0;
 height: 45px;
 width:100%;
 font-size: 12px;
 margin:0px 0 ;
 text-align: center;
 z-index: 9999;
  border-color: black;
  border-radius: 0px;
  border-style: solid;
  border-width: 2px;
  background-color: rgba(0,0,0, .6);
}



/* Used to hold the menu */
#centerBox {

  margin:10px auto;
  padding: 0px 0px;
  text-align: center;
  width:98%;
  height: auto;
  color: white;
    border-color: black;
  border-radius: 20px;
  border-style: solid;
  border-width: 1%;
  background-color: #3F3F3F;

   background: -moz-linear-gradient(45deg,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2)));
background: -webkit-linear-gradient(45deg,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(45deg,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(45deg,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(45deg,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3345484d', endColorstr='#33000000',GradientType=1 );

 }

#centerBox:after {
  content:".";
        display:block;
        clear:both;
        visibility:hidden;

}


/* HOLDS HOURS AND LOCATION */
.container {
  width: 100%;
  margin: 0px auto;
  position: relative;
  text-align:center;
}

/* HOLDS MENU */
.container2 {
  width: 100%;
  margin: 0px auto;
  padding: 20px 0;
  position: relative;
  text-align:center;
}

.block {
  padding: 10px 0px;
  margin: 20px;
  display:inline-block;
  text-align: center;
  width: 90%;
  height: 240px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1%;
  border-color: black;
  overflow: hidden;
  background-color: rgba(255,255,255, .2);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.blockMap {
  overflow: hidden;
  margin: 20px;
  display:inline-block;
  width: 90%;
  height: 260px;
  border-radius: 2px;
  border-style: solid;
  border-width: 1%;
  border-color: black;
  background-color: white;
}

.coupon {
  padding: 10px 0px;
  margin: 20px;
  display:inline-block;
  text-align: center;
  width: 90%;
  height: auto;
  overflow: hidden;
  border-color: black;
  border-radius: 5px;
  border-style: dashed;
  border-width: 3px;
  background-color: rgba(255,255,255, .2);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.itemName {
  width:38%;
  margin: 0 0px;
  padding: 0 0 0 5%;
  text-align: center;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
}

.itemName2 {
  width:75%;
  margin: 0 -2px;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
}

.itemPrice {
  width:25%;
  margin: 6px -2px;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
  vertical-align: top;
}

.itemPrice2 {
  width:50%;
  margin: 6px -2px;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
  vertical-align: top;
}

.itemPrice3 {
  width:50%;
  margin: 6px -2px;
  text-align: left;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.01);
  vertical-align: top;
}

/* Selected Tab Content */
.tabs {
  display: none;
  padding: 30px 0px;
  border-style: solid;
  border-color: black;
  border-width: 0px;
  background: rgba(28,29,32,0 );
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}
/* First Selected Tab Content */
.first-tab {
  display: block;
  background: rgba(28,29,32,0 );
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

.textBack {
  width:95%;
  height:90%;
  margin: -20px 0;
  font:20px;
  background: gray;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.2);
  border-radius: 0px;
  border-style: solid;
  border-width: 3px;
}

.textBox {
  width:100%;
  margin:  0px;
  height: auto;

  background: gray;
  font-size: 25px;
  display:inline-block;
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  border-style: solid;
  border-width: 3px;
}


    }

/* ------- ---------- ----------
 ------- Small Screen ----------
 ------- ----END--- ----------
 ------- ---------- ---------- */



.logo {
  margin: 0px 0px;
  padding: 0 -10px;
  width: 18%;
  height: 120px;
  text-align: center;
  overflow: visible;
  display:inline-block;
  vertical-align: top;
}

.Number {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 180px;
  display:inline-block;
}


.navMenu {
  margin:0%;
  display:inline-block;
}



/* Pizza Slides */
#pizza1 {
   background: url("resources/photos/BGfood1.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;

 }

#pizza2 {
   background: url("resources/photos/BGfood2.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}

#pizza3 {
   background: url("resources/photos/BGfood3.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}

#pizza4 {
   background: url("resources/photos/BGfood1.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}

#pizza5 {
   background: url("resources/photos/BGfood2.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}

#pizza6 {
   background: url("resources/photos/BGfood3.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}

#pizza7 {
   background: url("resources/photos/BGfood1.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}

#pizza8 {
   background: url("resources/photos/BGfood2.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}

#pizza9 {
   background: url("resources/photos/BGfood3.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}

#pizza10 {
   background: url("resources/photos/BGfood2.webp");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 100%;
   width: 100%;
   padding:50px 0px;
}



/* ------ Footer ------ */

.footer-distributed{
   background-color: rgba(30,30,30, .6);
   border-color: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  border-style: solid;
  border-width: 3px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	font: bold 16px sans-serif;

	padding: 20px 20px;
	margin-top: 0px;
    margin-bottom: -230px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
	width: 40%;

}

/* The company logo */

.footer-distributed h3{
	color:  #FE3401;
	font: normal 36px;
	margin: 0;
}

.footer-distributed h3 span{

  	color:  #FFCC00;
}

/* Footer links */

.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;

}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
	width: 35%;

}

.footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;

}

.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}

.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}

.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}

.footer-distributed .footer-center p a{
	color:  #5383d3;
	text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
	width: 20%;
}

.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #92999f;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}

.footer-distributed .footer-icons{
	margin-top: 25px;
}


.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 780px) {

	.footer-distributed{
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;
	}

}





/* Makes images with links shake */

a:link img {

  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

a:hover img {

   -webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}



/*
==============================================
pullDown
==============================================
*/

.pullDown{
	animation-name: pullDown;
	-webkit-animation-name: pullDown;

	animation-duration: 1.1s;
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;

	transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}
}

@-webkit-keyframes pullDown {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}
}







/* slider 2 */

.gallery .control-operator:target ~ .controls .control-button {
  color: #ccc;
  color: rgba(255, 255, 255, 0.4);
}

.gallery .control-button:first-of-type,
.gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
.gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5),
.gallery .control-operator:nth-of-type(6):target ~ .controls .control-button:nth-of-type(6),
.gallery .control-operator:nth-of-type(7):target ~ .controls .control-button:nth-of-type(7),
.gallery .control-operator:nth-of-type(8):target ~ .controls .control-button:nth-of-type(8),
.gallery .control-operator:nth-of-type(9):target ~ .controls .control-button:nth-of-type(9),
.gallery .control-operator:nth-of-type(10):target ~ .controls .control-button:nth-of-type(10) {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}

.gallery .item:first-of-type {
  position: static;
  pointer-events: auto;
  opacity: 1;
}

.gallery .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.gallery .control-operator {
  display: none;
}

.gallery .control-operator:target ~ .item {
  pointer-events: none;
  opacity: 0;
  -webkit-animation: none;
  -o-animation: none;
  animation: none;
}

.gallery .control-operator:target ~ .controls .control-button {
  -webkit-animation: none;
  -o-animation: none;
  animation: none;
}

@-webkit-keyframes controlAnimation-10 {
  0%, 16.67%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  1.67%, 15.67% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }
}

@-o-keyframes controlAnimation-10 {
  0%, 16.67%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  1.67%, 15.67% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }
}

@keyframes controlAnimation-10 {
  0%, 16.67%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  1.67%, 15.67% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }
}

@-webkit-keyframes galleryAnimation-10 {
  0%, 16.67%, 100% {
    opacity: 0;
  }

  1.67%, 15.67% {
    opacity: 1;
  }
}

@-o-keyframes galleryAnimation-10 {
  0%, 16.67%, 100% {
    opacity: 0;
  }

  1.67%, 15.67% {
    opacity: 1;
  }
}

@keyframes galleryAnimation-10 {
  0%, 16.67%, 100% {
    opacity: 0;
  }

  1.67%, 15.67% {
    opacity: 1;
  }
}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1),
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2),
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3),
.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4),
.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5),
.gallery .control-operator:nth-of-type(6):target ~ .item:nth-of-type(6),
.gallery .control-operator:nth-of-type(7):target ~ .item:nth-of-type(7),
.gallery .control-operator:nth-of-type(8):target ~ .item:nth-of-type(8),
.gallery .control-operator:nth-of-type(9):target ~ .item:nth-of-type(9),
.gallery .control-operator:nth-of-type(10):target ~ .item:nth-of-type(10) {
  pointer-events: auto;
  opacity: 1;
}

.items-10.autoplay .control-button {
  -webkit-animation: controlAnimation-10 60s infinite;
  -o-animation: controlAnimation-10 60s infinite;
  animation: controlAnimation-10 60s infinite;
}

.items-10.autoplay .item {
  -webkit-animation: galleryAnimation-10 60s infinite;
  -o-animation: galleryAnimation-10 60s infinite;
  animation: galleryAnimation-10 60s infinite;
}

.items-10 .control-button:nth-of-type(1),
.items-10 .item:nth-of-type(1) {
  -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;
}

.items-10 .control-button:nth-of-type(2),
.items-10 .item:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}

.items-10 .control-button:nth-of-type(3),
.items-10 .item:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

.items-10 .control-button:nth-of-type(4),
.items-10 .item:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}

.items-10 .control-button:nth-of-type(5),
.items-10 .item:nth-of-type(5) {
  -webkit-animation-delay: 24s;
  -o-animation-delay: 24s;
  animation-delay: 24s;
}

.items-10 .control-button:nth-of-type(6),
.items-10 .item:nth-of-type(6) {
  -webkit-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}

.items-10 .control-button:nth-of-type(7),
.items-10 .item:nth-of-type(7) {
  -webkit-animation-delay: 36s;
  -o-animation-delay: 36s;
  animation-delay: 36s;
}

.items-10 .control-button:nth-of-type(8),
.items-10 .item:nth-of-type(8) {
  -webkit-animation-delay: 42s;
  -o-animation-delay: 42s;
  animation-delay: 42s;
}

.items-10 .control-button:nth-of-type(9),
.items-10 .item:nth-of-type(9) {
  -webkit-animation-delay: 48s;
  -o-animation-delay: 48s;
  animation-delay: 48s;
}

.items-10 .control-button:nth-of-type(10),
.items-10 .item:nth-of-type(10) {
  -webkit-animation-delay: 54s;
  -o-animation-delay: 54s;
  animation-delay: 54s;
}

.gallery .control-button {
  color: #ccc;
  color: rgba(255, 255, 255, 0.4);
}

.gallery .control-button:hover {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}

/*
	Theme controls how everything looks in Gallery CSS.
*/

.gallery {
  position: relative;
}

.gallery .item {
  height: 520px;
  overflow: hidden;
  text-align: center;
  background: #ffffff;
}

.gallery .controls {
  position: absolute;
  bottom: 12px;
  width: 100%;
  text-align: center;
  line-height: 1;
}

.gallery .control-button {
  display: inline-block;
  margin: 0 .02em;
  font-size: 3em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: color .1s;
  -o-transition: color .1s;
  transition: color .1s;
}

/* ============================================================
   Gallery slide fixes
   - body line-height:1em inherits as a fixed 18px, which scrunches
     the slide's larger 25px/32px text; restore a scaling line-height.
   - stack the image and the detail box centered under the title
     instead of letting them sit side-by-side on the baseline.
   ============================================================ */
.textBack {
  text-align: center;
  line-height: 1.25;
  padding-top: 30px;
}
.textBack h1 {
  line-height: 1.2;
}
/* Image and detail box sit side-by-side, vertically centered */
.textBack img {
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}
.textBox {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.3;
}