nav ul a,
nav .brand-logo {
font-family: 'Stint Ultra Condensed', cursive;
font-size: 25px;
color: #00CC00;
}

.icon-bar{
color:black;
}
p {
  line-height: 2rem;
}
html {
  overflow-x: hidden;
}

body{
font-family: 'Pangolin', cursive;
 font-size:20px;
 background-image:url(img/Sports.png);
}
head{
  background-color: black;
}
.carousel-inner{
  width:100%;
  max-height: 390px !important;
}
.carousel-caption{
  color:yellow;
  
}
.sidenav-trigger {
  color: #26a69a;
}

.src{
  max-height: 370px

}
.parallax-container {
  min-height: 380px;
  line-height: 0;
  height: auto;
  color: yellow;
}
  .parallax-container .section {
    width: 100%;
  }

.img-fluid{
  width: 50%;
  height: 50%;
  position: center;

}
.page-footer{
  font-size: 15px;
}

@media only screen and (max-width : 992px) {
  .parallax-container .section {
    position: absolute;
    top: 40%;
  }
  #index-banner .section {
    top: 10%;
  }
}

.black{
  font-color: yellow;
}
@media only screen and (max-width : 600px) {
  #index-banner .section {
    top: 0;
  }
}
.col-l3-s12{
  background-color: black;
  color: yellow;
}

.header-center-teal-text-text-lighten-2{
  font-family: 'Fredericka the Great', cursive;
   position: center;

}
nav{
  background-color: black
  color:yellow;
}
.logo{
 font-family: 'Indie Flower', cursive;
   position: center;
   text-align: center;
   height:90px;
}

@media screen and (max-width:400px) {  
  .hide-mobile img {
    display: none;
  }
}

h3{
  font-family: 'Indie Flower', cursive;
}
h1{
  font-family:'Indie Flower', cursive;
  text-align: : center;
}
h2,h5,h4,h6{
   font-family: 'Stint Ultra Condensed', cursive;
   font-size: 30px;
   text-align: : center;
}


portfolio-caption{
  position: center; 
  height: 350
}
button.navbar-toggler {
background:yellow !important; /* !important is just to override other styles, if any. */
}

.page-footer{
background-color: black
}
.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}

footer.page-footer {
  margin: 0;
}

.text{
  font-size: 40; 
}


figcaption{
  font-family: 'Stint Ultra Condensed', cursive;
  font-size:30px;
}
/* CSS Image Hover. Created refering to Naoya's Pen: https://codepen.io/nxworld/pen/ZYNOBZ */
/*Sepia*/
.column#sepia img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.column#sepia:hover img {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

/*GrayScale*/
.column#grayscale img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.column#grayscale:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/*Zoom In*/
.column#zoomIn img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.column#zoomIn:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

/*Zoom Out*/
.column#zoomOut img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.column#zoomOut:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 3D Transform. Craeted refering to Dudley Storey's Pen: https://codepen.io/dudleystorey/pen/KFLJp */
.tdimension {
  width: 300px;
  height: 300px;
  margin: 20px auto 40px auto;
  perspective: 1000px;
}
.tdimension a {
  display: block;
  width: 100%;
  height: 100%;
  background: url("https://mir-s3-cdn-cf.behance.net/project_modules/disp/e8346826957515.56361c2106f3f.png");
  background-size: cover;
  transform-style: preserve-3d;
  transform: rotateX(70deg);
  transition: all 0.8s; 
}
.tdimension:hover a {
  transform: rotateX(20deg);  
} 
.tdimension a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));    
    transform: rotateX(90deg);
    transform-origin: bottom;
}

/*With Simple Caption*/
.column#caption {
  position: relative;
}
.column#caption .text {
    position: absolute;   
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    transition: all 0.8s ease;      
}
.column#caption .text h1 {    
    margin: 0;    
    color: purple;
}
.column#caption:hover .text {
  opacity: 1;
  
}
.column#caption:hover img {
  -webkit-filter: sepia(90%);
}

/* Craeted refering to LittleSnippets.net Pen: https://codepen.io/littlesnippets/pen/adLELd */
.frame {
  text-align: center; 
  position: relative;
  cursor: pointer;  
  perspective: 500px; 
}
.frame img {
  width: 450px;
  height: 450px;
}
.frame .details {
  width: 80%;
  height: 95%;  
  padding: 5% 8%;
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
  transform-origin: 50%;
  background: black;  
  opacity: 0;
  transition: all 0.4s ease-in;
  
}
.frame:hover .details {
  transform: translate(-50%, -50%) rotateY(0deg);
  opacity: 1;
}

.active, .dot:hover {
  background-color: #717171;
}

@media only screen and (min-width: 500px) {
#mobileshow  {
display: none !important;}
}

@media (max-width:629px) {
  img#hidemobile {
    display: none;
  }
}

#hide-mobile{
    display: none;
    text-align: center
}

@media screen and (min-width: 768px) {
    #hide-mobile {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 70%;
    }
}

/*CALENDAR*/
 @media (max-width: 550px) {
     .big-container {
         display: none;
     }
 }
 @media (min-width: 550px) {
     .small-container {
         display: none;
     }
 }

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}






/*table*/
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr { 
    display: block; 
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { border: 1px solid #ccc; }
  
  td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
  }
  
  td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }