@charset "UTF-8";
/* CSS Document */
html {
  overflow-x: hidden;
}

		body {
			padding: 0;
			padding-bottom: 0px;
			margin-top: 0px;
			margin-left: auto;
			margin-right: auto;
			width: 99%;	
		}

		* {
			padding: 0;
			margin: 0;
			font-family: 'Open Sans', sans-serif;
		}
		h1 {
			text-align: center;
			color: black;
		}
	
/*RED OUTLINE ALL ELEMENTS
* {
    outline: solid 1px red;
}
*/


/*nav wrapper*/
.wrapper {
  position: relative;
    top: 5px;
    z-index: 900;
}
.nav-box {
  position: relative;
  z-index: 1;
}


/**/

.logoposition {
  position: absolute;
    top:4px;
    left:10px;
  z-index: 10000;
/*    width: 100%;*/
}



@media (max-width: 799px) {
    .logoposition {
        top:15px;
          z-index: 1000;
    }
.logoposition img{
    width: 100%;
      max-width: 250px;
      height: auto;
}
    }

@media (min-width: 800px) {
.logoposition img{
      max-width: 400px;
      height: auto;
}
    }




/* TOP NAV BAR */
* {
    box-sizing: border-box;
}
.navbar {
    display: flex;
    padding: 0px;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    color: white;
}

.brand-title {
    height: 24px;
    margin: 8px;
    color: 000;
}

.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;

}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 1rem;
}

.navbar-links li:hover {
    background-color: #555;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@media (max-width: 1075px) {
        .logoposition {
        top: 5px;
    }
    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
/*added position: absolute; which places the menu text but missing the background color. Added background-color: 555;*/
    .navbar-links ul {
        position: absolute;
        width: 100%;
        flex-direction: column;
        background-color: #555555;
    }

    .navbar-links li {
        text-align: center;
    }

    .navbar-links li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }
}


/* END TOP NAV BAR */



main {
    min-height: 100vh;
}

a {
  text-decoration: none;
}


ul {
    list-style-type: none;
}


/* TWO COLUMNS */
.responsive-two-column-grid {
    display:block;
    background-color: fff;
}

/* columns */
.responsive-two-column-grid > * {
    display:block;    padding: 1rem;
    padding-left: 3rem;
}

.slide-placement {
    padding-left: 0px; 
    width: 100%;
    padding-top: 50px;
    margin-top: 0%; 
    font-size: x-large;
}




/* tablet breakpoint */
@media (min-width:768px) {
    .responsive-two-column-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}

/* columns reversed */
.responsive-two-column-grid-reversed {
    display:block;
}

.responsive-two-column-grid-reversed > * {
    padding: 1rem;
    padding-left: 1rem;
}

/* tablet breakpoint */
@media (min-width: 1000px) {
    .responsive-two-column-grid-reversed {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}



		/*for shines page*/
.row {
display: flex; 
 justify-content: center; 
    flex-wrap: wrap;
    align-items: center;
    max-width: 90%;
}
    
.column {
  flex: 10%;
  padding-top: 10px;
padding-bottom: 0;
 max-width: 270px;
    max-height: 285px;
  margin: 10px;
  height: auto; 
}


        .cole {
          display: flex;
            align-items: center;
            justify-content: center;
        }
		
		.cole img {
 border-radius: 20px;
}



/* footer */
.footer {
    position: absolute;
    width: 99%;
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 0px;
    color: white;
    background-color: black;
    text-align: center;
    font-size: 80%;
	  z-index: 10000;
}
.footer a {
  color: #fff;
}

/* end footer */

.copyright {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #717070;
	color: #fff;
	font-weight: normal;
	font-size: 80%;
	letter-spacing: 1px;
	border-top-width: 1px;
}

/*button-85*/
/* CSS BUTTON */
.button-85 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    /* #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000 */
#ff33ff,
#ffff00,
#ff33ff,
#ffff00,
#ff33ff,
#ffff00,
#ff33ff,
#ffff00,
#ff33ff
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 7px;
}

/* INQUIRIES DIVS*/
.inquiries {
    padding-top: 30%;
}

@media (max-width: 767px) {
.inquiries {
        padding-top: 10%;      
}
}


/*capsules are styled and a pill shape is created*/
.capsule {
  background-color: #e44ee5;
  border: none;
  color: yellow;
  padding: 10px 50px;
    font-size: 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 5px 3px;
  border-radius: 20px;
}
/*Adding hover effect to the capsule*/
.capsule:hover {
  background-color: #555555;
  transition-duration: 0.5s;
}

.divcenter{
    margin-top: 50px;
      text-align: center;

}


.divcenter-right{
    margin-top: 20px;
    margin-right: 100px;
      text-align: right;

}


.divcenter-left{
    margin-top: 20px;
    margin-left: 100px;
      text-align: left;

}