html { font-size: 110%; }
html, body {
  height: 50%; /* Fullscreen BG */
  width: 100%;
}
body {
  color: #ffffff;
  font-family: "futura", garamond;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.5;
}

p {
  color: black;
  font-family: futura;
  font-size: 16px;
  
}
h1 {
  font-family: futura;
  font-size: 3rem;
}
h2 {
  font-family: futura;
  font-size: 2.3rem;
  color: teal;
}
h3 {
  font-family: futura;
  font-size: 1.3rem;
  
}
h4 {
  color: #000000;
  font-size: .9rem;
  letter-spacing: 1px;
  line-height: 1.5;
  font-family: futura;
  text-transform: uppercase;
}

h5 {
  color: black;
  letter-spacing: 1px;
  font-size: .6rem;
  line-height: 1.4;
  font-family: futura;
  text-transform: uppercase;
}

#viralcat-text {
  position: float-right;
  width: 3.5rem;

}


small {
  line-height: 2;
}
a {
  color: purple;
  transition: background-color 0.2s ease-in-out,
              color 0.2s ease-in-out;
}
a:focus,
a:hover {
  background-color: #29a577;
  color: purple;
}
hr {
  border-color: #ffffff;
  margin: 30px 0 60px;
}

i {
  background-color: transparent;
  font-size: 28px;
}

#logocat {
  
  width: 20rem;
  margin-left: -0.5em;
  margin-top: 0.5em;
  margin-right:25px;

}

#vc-founding-text {
  padding-top: 10px;
}

#vcletters {
  max-width: 95px;
  
}

img {
  max-width: 5rem;
  height: auto;
  overflow: visible;
}


.portfolio-text {
  text-align: center;
}


/* =====================
  Navbar Styles
===================== */
/* styles the mobile screen top navbar background */
#main-nav {
  background-color: rgb(255, 255, 255);
  border-bottom:#29a598
}


#menu {
  background-color: black;
  margin-top:-4px;
  margin-left: -2px;
}

.navbar-brand,
.navbar-nav > li > a {
  font-family: 'futura', garamond;
  padding-bottom: 0;
  padding-top: 0;
  color: white;
}
.navbar-brand {
  font-size: 1.5rem;
  height: 100px;
  line-height: 60px;
  margin-top: 10px;

  /* to see top cat */
  opacity: 90;
  overflow:visible;
  text-transform: uppercase;
  transition: opacity 0.5s ease-in-out;
}
.navbar-brand .logo {
  margin-top: -10px;
  margin-right: 15px;
  margin-left: -20px;
  max-height: 80px;
}
.navbar-brand span {
  color: #29a598;
}
.navbar-nav > li > a,
.navbar-nav > li > button {
  color: #ffffff;
  height: 36px;
  line-height: 36px;
  margin-top: 22px;
}
.navbar-default .navbar-nav > .active > a {
  background-color: transparent;
  color: #29a598;
  text-decoration:solid;
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: transparent;
  color: #208479;
  text-decoration: none;
}









/* Menu Toggle area with burger attempt */

/*** Mobile Nav ***/
.navbar-toggle {
  height: 36px;
  margin-bottom: 22px;
  margin-top: 22px;
}
.navbar-toggle .glyphicon {
  color: #000000;
  top: -2px;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: transparent;
  border-color: #29a598;
}
.navbar-default .navbar-toggle .active {
  color: #000000;
}

#hamburger-right {
  display:flexbox;
  float: right;
  margin-left: 1px;
  padding-right: -20px;
}









/* three bars of the hamburger */
.navbar-toggle .glyphicon {
  margin-top: 2px;
  margin-bottom: 2px;
  padding-bottom: -10px;
  color: #000000;
 
  top: -7px;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: rgb(255, 255, 255);
  border-color: #000000;
}
.navbar-default .navbar-toggle .active {
  color: #3ddaca;
}
.navbar-collapse {
  background-color: rgba(8,33,30,1);
  border: none;
  box-shadow: 0 4px 10px rgba(8,33,30,.5);
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 2000;
}
.navbar-collapse .outline.pink {
  margin: 15px auto 30px;
  max-width: 100px;
}



/* Fixed Menu, doesn't effect the output? */
.menu-fixed {
  
  background-color: #fffefd;
  background-color: rgba(255,254,253,0.97);
  border-radius: 0;
  box-shadow: 0 3px 9px rgba(8,33,30,0.15);
  height: 60px;
  padding-top: 0;
  position: fixed;
  transition: background-color 0.5s ease-in-out,
              box-shadow 0.5s ease-in-out;



}
.menu-fixed .navbar-header {
  height: 60px;
}
.menu-fixed .navbar-toggle,
.menu-fixed .navbar-nav > li > a {
  margin-top: 13px;
}
.menu-fixed .navbar-brand {
  display: block;
  margin-top: 0;
  opacity: 1;
}





/* =====================
  Containers
===================== */
section.row,
footer.row {
  padding: 50px 50px 60px;
}






/*jumbotron */


.jumbotron {
  background: linear-gradient(to bottom, 
  rgb(255, 255, 255, .9) 0%,
  rgb(255, 255, 226, .9) 40%,
  rgb(239, 228, 73, 0.9) 60%, 
  rgb(244, 149, 6, .9) 100%
);
  
  background-size: cover;
  height: 100%;
  margin: 0;
  min-height: 510px;
  position: relative;
  width: 100%;
}
.jumbotron .container {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.jumbotron .row {
  padding-bottom: 45px;
}
.jumbotron .logo {
  max-width: 700px;
  
  width: 100%;
}
.jumbotron .title {
  color: #000000;
  text-decoration:overline;
  
}
.jumbotron p {
  margin: 0;
}












/* =====================
  Buttons
===================== */


.td-btn {
  padding: 12px 36px;
  text-transform: uppercase;
  transition: background-color 0.5s ease-in-out;
}
.td-btn + .td-btn {
  margin-left: 6px;
}
.td-btn.small {
  font-family: 'futura', helvetica, sans-serif;
  font-size: 0.7rem;
  
}
.outline {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.outline:focus,
.outline:hover {
  background-color: transparent;
  color: #fffefd;
}
.outline.green {
  border-color: #29a598;
  color: #29a598;
  background-color: white;
}
.outline.green:focus,
.outline.green:hover {
  background-color: #29a598;
  color: #fffefd;
}
.outline.white {
  border-color: teal;
  color: teal;
}
.outline.white:focus,
.outline.white:hover {
  background-color: #fffefd;
  color: purple;
}



/* Navbar Contact Button */
.navbar-nav .outline.purple {
  border-color: #ffffff;
  color: #651465;
  margin: 20px 15px 25px;
  padding-top: 0;
  background-color: white;
}

.navbar-nav .outline.purple:focus {
  background-color:white;
}
.navbar-nav .outline.purple:hover {
  background-color:rgb(255, 170, 0);
  transition: background-color 0.5s ease-in-out;
  color: white;
}


.navbar-fixed-top {
  position: fixed;
}

/* Social Icons */
.social {
  display: inline-block;
  transition: box-shadow 0.2s ease-in-out,
              transform 0.2s ease-in-out;
  height: 36px;
  margin-left: 3px;
  width: 36px;
}
.social:focus,
.social:hover {
  background-color: transparent;
}
.social + .social {
  margin-left: 9px;
}
.social img {
  max-width: 100%;
}


.sendbutt {
  display:flex;
  align-items: center;
  justify-content:center;
  margin-bottom: 30px;
}

.positionbutt {
  margin-top: 2%;
}


/* =====================
  Icons and Images
===================== */
.icon {
  max-height: 90px;
}
.icon + p { 
  margin-top: 15px;
}

.fa-star-and-crescent {
  color: black;
}
.fa-video {
  color: black;
}
.fa-book {
  color: black;
}

.magazines {
  border-radius: 10%;
  margin-bottom: 20px;
}




/* =====================
  Other Styles
===================== */
.mb-0 {
  margin-bottom: 0;
}
.mb-15 {
  margin-bottom: 15px!important;
}
.mb-30 {
  color:black;
  margin-bottom: 30px;
}
.mb-60 {
  margin-bottom: 60px;
  
  color: black;
}

.mb-center {
  font-size: 30px;
  margin-bottom: 20px;
  color: black;
}

.mb-150 {
  margin-bottom: 25px!important;
  text-align:center;
}

.mb-top {
  margin-top: 5px;
}



.bg-shadow {
  box-shadow: 0 1px 3px rgba(8,33,30,0.5);
}

.bg-yellow {
  color:yellow;
  z-index:2000;
}
.bg-white {
  background-color: teal;
  position: relative;
}
.bg-teal {
  background-color: teal;
  color: teal;
  position: relative;
  
}
.bg-star-y {
  background: #ffc93f fixed;
  background-size: 100px;
  color: #fffefd;
  height: 50rem;
}
.bg-star-g {
  background: blue; fixed;
  background-size: 60px;
  color: purple;
}
.linear-gradient {
  background: linear-gradient(to bottom, 
    rgb(1, 110, 110) 0%,
    rgb(41, 164, 186) 20%,
    rgb(99, 210, 229) 50%, 
    rgb(244, 149, 6) 100%
  );


  background-size: 25px;
  }
  
  #contactcontainer {
    margin-top: 20px;
  }


.purple {
  color: purple;
  font-weight: bold;
  font-size: 15px;
}
.solid {
  border-top: 3px solid orange;
}
/*** Contact Form ***/
.checkbox {
  display: none;
}

/* =====================
  Media Queries
===================== */






@media (max-width: 300px) {
  /* Center class for medium screens */
  .md-center { text-align: center; }
}

 

@media (max-width: 300px) {
  /*** Page Elements ***/
  section .row [class^="col-sm-"] + [class^="col-sm-"],
  section .row [class*=" col-sm-"] + [class*=" col-sm-"] {
    margin-top: 30px;
  }
   /*** Jumbotron ***/
   .jumbotron .logo {
    max-width: 120px;
  }


  /*** Mobile Nav ***/
  .navbar-toggle {
    height: 36px;
    margin-bottom: 22px;
    margin-top: 22px;
  }




  .navbar-toggle .glyphicon {
    color: #05f4d4;
    top: -2px;
  }
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background-color: transparent;
    border-color: #29a598;
  }
  .navbar-default .navbar-toggle .active {
    color: #29a598;
  }
  
 
}


.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1600px;
  margin: 50px auto;
  padding: 20px 10px;
 }
 
 
 .gallery img {
  max-width: 100px;
  width:75%;
  height:75%;
  object-fit: cover;
  border-radius: 10px;
 }
 
 
 .gallery::after {
  content: "";
  width: 350px;
 }

.follow {
  color:orange;
}

.latest {
  color:orange;
}




/* Contact Page */

body {
  font-family: 'futura', sans-serif;
  background-color: #ffffff;
}

.container-contact {
  max-width: 750px;
  
  margin-top: 90%;
  padding-top: 50px;
  padding-left: 30px;
  padding-right: 30 px;
  padding-bottom: 30px;
  background-color: #fdbf5a;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.bold-email {
  font-weight:bold;
}

/* Submission Page */

.container-submission {
  margin-top: 2rem;
  margin-left: 3rem;
  margin-right: 3rem;
  text-align:left;
  
}
.container-submissiontitle {
  margin-top: 2rem;
  text-align: center;
  margin-left: 2rem;
  margin-right:2rem;
  background: url("https://viralcathouse.com/wp-content/uploads/2023/07/feral-key-west-cats.jpg") center center fixed;
}




/*** Modal ***/
.modal-dialog.wide {
  width: 90%;
}
.modal-dialog.wide .row {
  margin: 0 0 30px;
}
.modal-dialog.wide .row .row {
  margin-left: -15px;
  margin-right: -15px;
}
.modal-header {
  border: none;
  padding: 30px 30px 0;
}
.modal-header .close {
  font-size: 2rem;
}
.modal-content {
  background-color: #fffefd;
  border: none;
  box-shadow: 0 3px 6px rgba(8,33,30,0.2);
}
.modal-body {
  padding: 30px;
}
.modal-body li {
  margin-bottom: 9px;
}
.modal-footer {
  padding: 30px 0 15px;
}
/* Fade Up Animation */
.modal.fade .modal-dialog {
  -webkit-transform: translate3d(0, 100vh, 0);
  -ms-transform: translate3d(0, 100vh, 0);
  transform: translate3d(0, 100vh, 0);
}
.modal.in .modal-dialog {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.modal-backdrop {
  background-color: #fffefd;
  z-index: 1025;
}
.modal-backdrop.in {
    opacity: 0.9;
}














/* =====================
  Book Projects
===================== */
#projects .carousel-control {
  background: none;
  color: #ffffff;
  font-size: 2rem;
  margin-top: 150%;
  margin-left: 50px;
  margin-right: 50px;
  opacity: 1;
  width: 100%;
  transition: all 0.2s ease-in-out;
  text-shadow: none;
}
#projects .carousel-control:focus,
#projects .carousel-control:hover {
  color: #28aea0;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#projects .carousel-inner {
  overflow: inherit;
}
#projects .carousel-inner img {
  width: 40%;
}
#projects .carousel-caption {
  bottom: inherit;
  left: inherit;
  position: relative;
  right: inherit;
  text-align: left;
  text-shadow: none;
}
.card {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(8,33,30,0.5);
  color: #6f0663;
  padding: 25px;
  
}
.card h3 {
  margin-top: 0;
}
.card h4 {
  font-size: 0.8rem;
}
#portfolio .carousel-indicators {
  bottom: 0;
  position: relative;
}
#portfolio .carousel-indicators li {
  border-radius: 20px;
  height: 15px;
  width: 15px;
}
#portfolio .carousel-indicators li.active {
  height: 16px;
  width: 16px;
}
/*** Project Modals ***/
.hero {
  margin: 30px auto;
  max-width: 900px;
  width: 100%;
}
.label.tag {
    background-color: #ffce3f;
    border-radius: 0;
    font-weight: normal;
}
/* To override button alignment in modals */
.center {
  text-align: center;
}