@import url('https://fonts.googleapis.com/css?family=Comfortaa:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto');

/* general styles */
html, body {
    height: 100%;
    width: 100%;
}

/*#background {
    background-image: url('/images/TimsOKC/WarpDrive.gif');
    background-size: cover;
    background-position: center;
    max-width: 100vw;
    height: 100vh;
    padding:0;
    margin:0;
    display: flex;
    justify-content: center;
}*/

.overlay {
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

.purple {
    background-color: purple;

    /* Set a specific height */
    min-height: 300px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.white {
    background-color: white;
    color: black;
}

.message {
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-size:30px;
}

.align-self-center {
    align-self: center;
    padding: 2rem;
}

.logo {
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-weight: 200;
    font-size: 130px;
}

.catchphrase {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    color: white;
}

.container-fluid {
    min-height: 64px;
}
.creativity {
    color: #7D7769
}

.header1 {
    color: #00ffc5;
}

.standout {
    border-radius: 30px;
    border: thin;
    border-style: solid;
    border-color: #00ffc5;
    /*border-color: #673AB7;*/
}

.top-20 {
    padding-top: 20px;
}
.top-10 {
    padding-top: 10px;
}

.logo {
    max-width: 75%;
}
.navbar {
    background-color: #7D7769;
    color: #FFFFFF;
    font-family: "Roboto";
    font-size: 18px;
}
.navbar a {
    color: #FFFFFF
}
.navbar-default .navbar-nav>li>a {
  color: #FFFFFF;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover
{
    background-color: transparent;
    color: #65A8A6;
}
.navbar-brand {
    margin-top: -5px;
}
.noLink
{
    color: inherit;
}
.noLink:hover
{
    color: inherit;
}
/* padded section */
.pad-section {
    padding: 50px 0;
}
.pad-section img {
    width: 100%;
}
.parallax1 {
    /* The image used */
    background-image: url("/images/backgroundLightSmall.png");

    /* Set a specific height */
    min-height: 300px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.parallax2 {
    /* The image used */
    background-image: url("/images/TimsOKC/hefner-1.jpg");

    /* Set a specific height */
    min-height: 1000px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
}

.picture {
    background-image: url("/images/TimsOKC/carbonara.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height:300px;
    margin-top: 10px;
    box-shadow: 4px 4px 8px 0px #004852;
    width: 75%;
}

.picture-holder
{
    text-align: center;
}

.sponsorship {
    min-height: 385px;
}
.third {
    min-height: 33%;
    height: 33%;
}
/* vertical-centered text */
.text-vcenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.text-vcenter h1 {
    font-size: 4.5em;
    font-weight: 700;
    margin: 0;
    padding: 0;
}
/* additional sections */
#home {
    /*background: url(/images/pawns.jpg) no-repeat center center fixed;*/
    background-color: black;
    display: table;
    height: 100%;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#resources, #sponsors, #about, #friends {
    background-color: #65A8A6;
    color: #ffffff;
}

#cooking {
    background-color: #3F51B5;
    color: #00ffc5;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
}

#resources .glyphicon {
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    font-size: 60px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    vertical-align: middle;
    width: 140px;
}
#information {
    background: url(/images/pawns.jpg) no-repeat center center fixed;
    display: table;
    height: 300px;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#information .panel {
    opacity: 0.85;
}
#google_map {
    height: 500px;
}
#mainLogo {
    width: 500px;
    text-align: center;
}
#navbar-collapse-main {
    margin-top:6px;
}
footer {
    background-color: #665683; 
    color: #FFFFFF;
    padding: 20px 0;
}
footer .glyphicon {
    color: #FFFFFF;
    font-size: 60px;
}
footer .glyphicon:hover {
    color: #306d9f;
}
h1, h2 {
    /*font-family: "Comfortaa";*/
    font-size: 48px;
}
p, h3, h4{
    /*font-family: "Roboto"*/
}
hr {
    color: #F8EBC2;
}

.cooking-card {
    padding-top: 15px;
}

.cooking-card p
{
    color: #00ffc5;
    text-align: center;
}

span.line
{
    display: inline-block;
    min-width: 175px;
    padding-top: 5px;
}

.cooking-card2
{
    max-width: 300px;
    /*background: #6fedffe0;*/
}

.cooking-title
{
    border-bottom: solid;
}

.cooking-info
{
    /*(border-bottom: solid;*/
    border-top: solid;
    /*color: #00ffc5;*/
    padding-top: 6px;
}

#cooking a
{
    text-decoration: none;
}

#cooking a:hover
{
    text-decoration: none;
}

#cooking a:visited
{
    text-decoration: none;
    color: #00ffc5;
}

#likes {
    background-color: white;
    color: green;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

#likes h1 {
    color: white;
}

#likes h2 {
    color: white;
}

#likes .standout-container {
    background-color: black;
    padding: 15px;
}

#likes .standout {
    border: double;
    border-style: double;
    border-color: white;
    background-color: black;
}

#likes .title {
    display: flex;
    justify-content: center;
    align-self: center;
    text-align: center;
}

#likes p {
    color: white;
}

.content-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.holder1 {
    background-color: #337ab7;
    padding: 35px;
    margin-bottom: 35px;
    margin-right: 35px;
}

.emoji:hover {
  -webkit-animation-name: wiggle;
  -ms-animation-name: wiggle;
  -ms-animation-duration: 1000ms;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
}

@-webkit-keyframes wiggle {
  0% {-webkit-transform: rotate(10deg);}
  25% {-webkit-transform: rotate(-10deg);}
  50% {-webkit-transform: rotate(20deg);}
  75% {-webkit-transform: rotate(-5deg);}
  100% {-webkit-transform: rotate(0deg);}
}

@-ms-keyframes wiggle {
  0% {-ms-transform: rotate(1deg);}
  25% {-ms-transform: rotate(-1deg);}
  50% {-ms-transform: rotate(1.5deg);}
  75% {-ms-transform: rotate(-5deg);}
  100% {-ms-transform: rotate(0deg);}
}

@keyframes wiggle {
  0% {transform: rotate(10deg);}
  25% {transform: rotate(-10deg);}
  50% {transform: rotate(20deg);}
  75% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}

.relative {
    position: relative;
    height: 0px;
    width: 0px;
}

.line1 {
    background-color: #15f715;
    top: 30px;
    width: 20vw;
    height: 10px;
    position: absolute;
}

.line2 {
    background-color: #167ac6;
    top: 50px;
    width: 25vw;
    height: 10px;
    position: absolute;
}

.line3 {
    background-color: #ec0956;
    top: 70px;
    width: 30vw;
    height: 10px;
    position: absolute;
}

.line4 {
    left: 92vw;
    background-color: #15f715;
    top: 30px;
    width: 60vw;
    height: 10px;
    position: absolute;
}

.line5 {
    left: 87vw;
    background-color: #167ac6;
    top: 50px;
    width: 60vw;
    height: 10px;
    position: absolute;
}

.line6 {
    left: 82vw;
    background-color: #ec0956;
    top: 70px;
    width: 60vw;
    height: 10px;
    position: absolute;
}

.cookingCardLoaded {
    width: 200px;
}

.more {
    text-align:center;
    font-size: 50px;
}

#cookingMore {
    cursor: pointer;
}

#liminalityMore {
    cursor: pointer;
}

#recentReviewsMore {
    cursor: pointer;
}

.center {
    text-align: center;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
  }
  .bounce {
    animation-name: bounce;
  }

  .text {
    text-align: center;
    margin-top: 56px;
    font-size: 1.0em;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  
  .animated:hover {
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }