body{
        font:12px/1.5 Gill, arial, verdana;
        padding:0;
        margin:0;
        background-color:#000000;
        text-decoration: none;

} 




/* INDEX NAV BAR LINKS */
/* INDEX NAV BAR LINKS */
/* INDEX NAV BAR LINKS */


/* Add a black background color to the top navigation */
.indexnav {
  background-color: #333333;
  padding: 0px 0px 0px 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 10px 0px 10px 6px;
  text-decoration: none;
  font:10px Gill, arial, verdana;

/* Style the links inside the navigation bar */
.indexnav a {
  float: left;
  display: block;
  color: #B0BF1A;


}

/* Change the color of links on hover */
.indexnav a:hover {
  background-color: #999999;
  color: #ffffff;
}

/* Add an active class to highlight the current page */
.indexnav a.active {
  background-color: #999999;
  color: white;
}

/* Hide the link that should open and close the indexnav on small screens */
.indexnav .icon {
  display: none;
}

}


.footernav {
        width:100%;
        padding: 20px 0px 20px 20px;
        background-color: #333333;
        overflow: hidden;
        display: flex;
        justify-content: center;
        font:18px/1.5 Gill, arial, verdana;


}




/* INDEX NAV BAR LINKS */
/* INDEX NAV BAR LINKS */
/* INDEX NAV BAR LINKS */






.indexcontainer{
        width:80%;
        padding-top: 50px;
        margin:auto;
        overflow:hidden;
        background-color: #000000;
        color:#666666;
        text-align: justify;
        text-justify: inter-word;
        letter-spacing: 0.2ex;
        font:15px/1.5 Gill, arial, verdana;
}








/* unvisited link */
a:link {
  color: #666666;
  text-decoration: none;
  font:16px/1.5 Gill, arial, verdana;
}

/* visited link */
a:visited {
  color: #ffffff;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #ffffff;
text-decoration: none;
}




/* selected link */
a:active {
  color: #ffffff;
  background-color: #999999;
  text-decoration: none;
  font:16px/1.5 Gill, arial, verdana;
}




/* HEADER AND LOGO */
/* HEADER AND LOGO */
/* HEADER AND LOGO */


header {

background-color: #c9acaa;
background-image: url("https://www.transparenttextures.com/patterns/vichy.png");



  padding: 0 10px;
  padding-top:0px;
  height: 180px;
  display: flex;
  justify-content: center;
  padding-top:20px;
  min-height:70px;
  border-bottom:#ffffff 1px solid;


}




header a{
         color:#ffffff;
         text-decoration:none;
         text-transform:uppercase:
         font-size:12px

}

header li{
          float:left;
          display:inline;
          padding: 0 20px 0 20px;

}


header #branding{
          float:left;
          color:#333333;

}


header #branding h1{
          margin:0;

}


header nav{
          float:right;
          margin-top:10px;

}



header .highlight, header .current a{
          color:#666666;
          font-weight:bold;

}



header a:hover{
         color:#666666;
          

}
/* HEADER AND LOGO */
/* HEADER AND LOGO */
/* HEADER AND LOGO */





/* NAV BAR LINKS */
/* NAV BAR LINKS */
/* NAV BAR LINKS */


/* Add a background color to the top navigation */
.topnav {
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  background-color: #69526f;
  color: #ffffff;
  text-align: center;
  padding: 12px 18px;
  text-decoration: none;
  font-size: 12px;
  
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #BE89D0;
  color: #ffffff;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #69526f;
  color: #333333;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  color: #333333;
}



/* NAV BAR LINKS */
/* NAV BAR LINKS */
/* NAV BAR LINKS */




/* PREVIEW IMAGE */
/* PREVIEW IMAGE */
/* PREVIEW IMAGE */


.responsive {
  width: 100%;
  padding: 00 10px 0 0px;
  background-image: url("img/subscribe-to-tigerrjuggs.jpg");
  background-size: cover;
  vertical-align: middle;

}




div.preview {
         color: #999999;
         letter-spacing: 0.2ex;
         font:16px/1.5 Gill, arial, verdana;
         text-decoration: none;
         background-color: #000000;
         
 }



div.preview a {
         color: #999999;
         letter-spacing: 0.2ex;
         font:16px/1.5 Gill, arial, verdana;
         text-decoration: none;
         background-color: #000000;
         
 }


div.preview a:hover {
  color: #ff99cc;
  letter-spacing: 0.2ex;
  font:16px/1.5 Gill, arial, verdana;
  text-decoration: none;
  background-color: #000000;
  
}


div.preview a.active {
  background-color: #4a4748;
  letter-spacing: 0.2ex;
  font:16px/1.5 Gill, arial, verdana;
  color: #ffffff;
  text-decoration: none;
}


/* PREVIEW IMAGE */
/* PREVIEW IMAGE */
/* PREVIEW IMAGE */


/* BUTTONS MOVIE */
/* BUTTONS MOVIE */
/* BUTTONS MOVIE */

.myButton {
	box-shadow:inset 0px -3px 7px 0px #000000;
	background:linear-gradient(to bottom, #333333 5%, #000000 100%);
	background-color:#000000;
	border-radius:2px;
	border:2px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
        font:16px/1.5 Gill, arial, verdana;
	padding:8px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}

.myButton:hover {
	background:linear-gradient(to bottom, #666666 5%, #000000 100%);
	background-color:#000000;
}

.myButton:active {
	position:relative;
	top:1px;
}


.myButtondisabled {

	box-shadow:inset 0px -3px 7px 0px #000000;
	background:linear-gradient(to bottom, #333333 5%, #000000 100%);
	background-color:#000000;
	border-radius:2px;
	border:2px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:8px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}


.myButtondisabed:hover {
	background:linear-gradient(to bottom, #000000 5%, #000000 100%);
	background-color:#000000;
	color:#999999;
}






/* BUTTONS MOVIE */
/* BUTTONS MOVIE */
/* BUTTONS MOVIE */



/* VIDEO PLAYER */
/* VIDEO PLAYER */
/* VIDEO PLAYER */


#player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #333333;
  z-index: 999;
}

video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px 30px 10px 5px;
}


/* VIDEO PLAYER */
/* VIDEO PLAYER */
/* VIDEO PLAYER */





/* MOVIES NAV BAR LINKS */
/* MOVIES NAV BAR LINKS */
/* MOVIES NAV BAR LINKS */



* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.rowmov {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 30px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 45%;
  padding: 0 30px;
  margin-top: 60px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}




/* MOVIES NAV BAR LINKS */
/* MOVIES NAV BAR LINKS */
/* MOVIES NAV BAR LINKS */








/* SLIDER IMAGES */
/* SLIDER IMAGES */
/* SLIDER IMAGES */

* {box-sizing: border-box;}
body {font-family: Gill, arial, verdana;}


.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.active {
  background-color: #000000;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: .0} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .0} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}

}


/* SLIDER IMAGES */
/* SLIDER IMAGES */
/* SLIDER IMAGES */





/* MAIN AND SUPPORT PAGES TWO COLUMN LAYOUT */
/* MAIN AND SUPPORT PAGES TWO COLUMN LAYOUT */
/* MAIN AND SUPPORT PAGES TWO COLUMN LAYOUT */

      


/* Create two equal columns that floats next to each other */
/* Left column */

.leftcolumn {
        font-family: Gill, arial, verdana;
        color: #ffffff;
        letter-spacing: 0.2ex;
        font:14px/1.5 Gill, arial, verdana
        text-decoration: none;
        float: left;
        padding:0px 0px 10px 0px;
        padding-top: 0px;
        width: 50%;
}

/* Right column */
.rightcolumn {
  font-family: Gill, arial, verdana;
  float: left;
  width: 50%;
  text-align: justify;
  padding-left: 40px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}


.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.fakeimg:hover .image {
  opacity: 0.6;
}

.fakeimg:hover .middle {
  opacity: 1;
}


/* Add a card effect for articles */
.card {
  background-color: #bdb4bf;
  padding: 50px;
  margin-top: 0px;
  font-size:14px;
  color: #666666;
  letter-spacing: 0.2ex;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* MAIN AND SUPPORT PAGES TWO COLUMN LAYOUT */
/* MAIN AND SUPPORT PAGES TWO COLUMN LAYOUT */
/* MAIN AND SUPPORT PAGES TWO COLUMN LAYOUT */





/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}


/* MAIN AND SUPPORT PAGES TWO COLUMN LAYOUT */



/* BODY CONTENT FORMATTING FOR SUPPORT PAGES */
/* BODY CONTENT FORMATTING FOR SUPPORT PAGES */
/* BODY CONTENT FORMATTING FOR SUPPORT PAGES */


/* Add a background color to body copy */

.bodycopy {
   width:100%;
        margin:auto;
        padding: 30px 0px 20px 0px;
        overflow:hidden;
        background-color: #000;
        text-align:justify;
        color: #999999;
        letter-spacing: 0.2ex;
        font:15px/1.5 Gill, arial, verdana;
        text-decoration: none;
       
}


.bodycopy a {
         color: #f2f2f2;
         letter-spacing: 0.2ex;
         font:15px/1.5 Gill, arial, verdana;
         text-decoration: none;
         background-color: #4a4748;
         
  
}

/* Change the color of links on hover */
.bodycopy a:hover {
  color: #ff99cc;
  text-decoration: none;
  background-color: #4a4748;
  
}

/* Add an active class to highlight the current page */
.bodycopy a.active {
  background-color: #4a4748;
  color: #ffffff;
  text-decoration: none;
}



/* BODY CONTENT FORMATTING FOR SUPPORT PAGES */
/* BODY CONTENT FORMATTING FOR SUPPORT PAGES */
/* BODY CONTENT FORMATTING FOR SUPPORT PAGES */






/* THUMBNAIL BOXES */
/* THUMBNAIL BOXES */
/* THUMBNAIL BOXES */


.container{
        width:100%;
        margin:auto;
   
        padding-top: 10px;
        padding-right: 30px;
        padding-bottom: 10px;
        padding-left: 30px;
        overflow:hidden;
        background-color: #000000;
        color:#666666;
        text-align: justify;
        text-justify: inter-word;
        letter-spacing: 0.2ex;
        font:15px/1.5 Gill, arial, verdana;


}

.movcontainer{
        width:100%;
        margin:auto;
        padding: 10px 20px 0px 20px;
        overflow:hidden;
        background-color: #bdb4bf;
        color:#666666;
        text-align: justify;
        text-justify: inter-word;
        letter-spacing: 0.2ex;
        font:15px/1.5 Gill, arial, verdana;


}



.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.movcontainer:hover .image {
  opacity: 0.6;
}

.movcontainer:hover .middle {
  opacity: 1;
}










span.title {
    color: #999;
    letter-spacing: 0.2ex;
    font:16px/2.0 Gill, arial, verdana;
}

span.movietitle {

    color: #999;
    letter-spacing: 0.2ex;
    font:16px/2.0 Gill, arial, verdana;
    text-decoration: none;
}

span.tag {
    color: #999999;
    font:12px/1.5 Gill, arial, verdana;
}




/* TAGS */
/* TAGS */
/* TAGS */


div.tag {
         color: #ffffff;
         letter-spacing: 0.2ex;
         font:12px/1.5 Optima,Verdana,Gill;
         text-decoration: none;
         background-color: #000;
         
 }



div.tag a {
         color: #ffffff;
         letter-spacing: 0.2ex;
         font:12px/1.5 Gill, arial, verdana;
         text-decoration: none;
         background-color: #000000;
         
 }


div.tag a:hover {
  color: #ff99cc;
  letter-spacing: 0.2ex;
  font:12px/1.5 Gill, arial, verdana;
  text-decoration: none;
  background-color: #000000;
  
}


div.tag a.active {
  background-color: #4a4748;
  letter-spacing: 0.2ex;
  font:12px/1.5 Gill, arial, verdana;
  color: #ffffff;
  text-decoration: none;
}



/* TAGS */
/* TAGS */
/* TAGS */


hr {
  border: none;
  border-top: 2px dotted #666;
  color: #fff;
  background-color: #000000;
  height: 2px;
  width: 100%;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}


/* Dashed red border */
hr.new2 {
  border-top: 1px dashed red;

}


#boxes{
         margin-top:1px;

          
}


#boxes .box{
         float:left;
         width:25%;
         padding:20px;
         text-align:center;
        
  
          
}



#boxes .box img{
         width:90%;
         margin: 0px;
         opacity: 0.7;
         border: 4px solid #eee;
	
}



#boxes .box img:hover { opacity: 1;

	 
	
		/*Glow*/ 
	
		-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); } 


 } 
        




.box:hover {
background: #666666;

}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* THUMBNAIL BOXES */
/* THUMBNAIL BOXES */
/* THUMBNAIL BOXES */



/* THUMBNAIL DESCRIPTIONS */
/* THUMBNAIL DESCRIPTIONS */



.content-main {
  position: relative;
  width: 400px;
  margin: 40px auto;
  
  .content-box {
    height: auto;
    overflow: hidden;
    padding: 20px;
    background: $main-color;
    box-shadow: 0 3px 5px rgba(0,0,0,0.05);
  
    &:before, &:after {
      content: ""; height: 2px;
      position: absolute;
      left: 0;
      right: 0;
      -webkit-clip-path: polygon(0% 0%, 5%  100%, 10% 0%, 15%  100%, 20% 0%, 25% 100%, 30% 0%, 35%  100%, 40% 0%, 45%  100%, 50% 0%, 55%  100%, 60% 0%, 65%  100%, 70% 0%, 75%  100%, 80% 0%, 85%  100%, 90% 0%, 95%  100%, 100% 0%);
    }
    &:before {
      background-color: $bg-color;
      top: 0;
    }
    &:after {
      background-color: $main-color;
      bottom: -2px;
    }
  }
}

      

/* THUMBNAIL DESCRIPTIONS */
/* THUMBNAIL DESCRIPTIONS */






/* FOOTER NAV BAR LINKS */
/* FOOTER NAV BAR LINKS */
/* FOOTER NAV BAR LINKS */


.footercontainer {

  background-color: #666666;
  padding: 10 0px;
  padding-top:0px;
  display: flex;
  padding-top:0px;
  min-height:0px;
  justify-content: center;

}


/* Add a background color to the bottom navigation */
.bottomnav {
   margin: 0;
   width: 100%;
   padding: 20px 20px 20px 20px;
   background-color: #d9d9d9;
   overflow: hidden;
   display: flex;
  justify-content: center;
}



/* Style the links inside the navigation bar */
.bottomnav a {
  float: left;
  display: block;
  background-color: #d9d9d9;
  font:12px/1.0 Gill, arial, verdana;
  color: #999999;  
}



/* Change the color of links on hover */
.bottomnav a:hover {
  background-color: #d9d9d9;
  color: #ffffff;
}

/* Add an active class to highlight the current page */
.bottomnav a.active {
  background-color: #666666;
  color: #333333;
}

/* Hide the link that should open and close the topnav on small screens */
.bottomnav .icon {
  display: none;
  color: #333333;
}









/* FOOTER NAV BAR LINKS */
/* FOOTER NAV BAR LINKS */
/* FOOTER NAV BAR LINKS */






/* FOOTER */
/* FOOTER */
/* FOOTER */


/* STYLES SPECIFIC TO FOOTER  */
.footer {
  width: 100%;
  position: relative;
  height: auto;
 background-color:#DDD7C6;


  overflow: hidden;
  display: flex;
  justify-content: center;
}



<!-- Logo Footer -->



.footer .col {
  width: 100%;
  height: auto;
  float: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 20px 20px 20px 20px;
}

.footer .col ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer .col ul li {
  color: #CC9900;
  
  font-family: 13px/1.5 Gill, arial, verdana;
  
  padding: 5px 0px 5px 0px;
  cursor: pointer;
  transition: .2s;
  -webkit-transition: .2s;
  -moz-transition: .2s;
}
.social ul li {
  display: inline-block;
  padding-right: 5px !important;
}

.footer .col ul li:hover {
  color: #666666;
  transition: .1s;
  -webkit-transition: .1s;
  -moz-transition: .1s;
}


.clearfix {
  clear: both;
}


@media only screen and (min-width: 1280px) {
  .contain {
    width: 1200px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1139px) {
  .contain .social {
    width: 1000px;
    display: block;
  }
  .social h1 {
    margin: 0px;
  }
}
@media only screen and (max-width: 950px) {
  .footer .col {
    width: 33%;
  }
  .footer .col h1 {
    font-size: 14px;
  }
  .footer .col ul li {
    font-size: 13px;
  }
}
@media only screen and (max-width: 500px) {
    .footer .col {
      width: 50%;
    }
    .footer .col h1 {
      font-size: 14px;
    }
    .footer .col ul li {
      font-size: 13px;
    }
}
@media only screen and (max-width: 340px) {
  .footer .col {
    width: 100%;
  }
}

/* FOOTER */
/* FOOTER */
/* FOOTER */



@media(max-width:1080px){
   header #branding,
   header nav,
   header nav li,
#boxes .box{
    float:none;
    text-align:center;
    width:100%
}


header{
padding-bottom:20px

 }
	
	#showcase {
    min-height: 400px;
	}
	
}

@media(max-width:550px){

#boxes .box{
    float:none;
    text-align:center;
    width:97%
}

	#showcase {
    min-height: 200px;
		
	}
	
}



/* HAMBURGER MENU */
/* HAMBURGER MENU */
/* HAMBURGER MENU */


.bensonzoo {
  text-decoration: none;
  background-color: #fff;
  color: #000;
  font-weight: bold;
  text-decoration: none;


   }


   .vertical-line{
        display: inline-block;
        border-left: 1px solid #fff;
        margin: 0 10px;
        height: 10px;
    }



</style>