/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/


/* UNIVERSAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
}


/* ==== GRID SYSTEM ==== */

.container {
	position:relative;
	z-index: 10;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
    width: 75%;
    max-width: 60rem;
  }
}

/*Mariana*/

/***** GENERAL RULES *****/

::selection {
  background-color: rgba(212,89,58,.3);
}

html {scroll-behavior: smooth;}

body {
	background:black;
	font-family: acumin-pro-condensed, sans-serif;
	color: white;
	}

img {width: 100%;}

a {text-decoration: none; color:white;}

div.mobile {display:none;}

h1 {font-family: fave-script-pro, sans-serif;
font-style: normal;
font-weight: 400;
color:#D4593A;
font-size: 70pt;
margin-top: 190px;}

p {font-size: 15pt; font-weight: 100;}

h3 {text-align: center; margin-top: 0px;}
h4 {font-weight: 100; margin-top: -15px; text-align: center;}


/***** END GENERAL RULES *****/


/***** HOME *****/

div.navbar {position:fixed; width: 100%; z-index:11; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5); }
div.navbar a {display:block; padding-top: 50px; padding-bottom: 20px; font-size: 18px;}
div.navbar a.logo {padding-top: 20px; width: 100%; transition: 0.5s;}
div.navbar a.logo:hover {transform: scale(1.1);}
div.navbar a:hover {color: #D4593A;}


div.video {position: fixed; z-index:1; top: 0; left: 0; width: 100%;}
div.video video {width:100%; }

div.navbar div.row {text-align: center;}

/*Social Media Icons*/

		.icon-bar {
		  position: fixed;
		  z-index: 11;
		  top: 50%;
		  right: 0;
		  -webkit-transform: translateY(-50%);
		  -ms-transform: translateY(-50%);
		  transform: translateY(-50%);
		}

		.icon-bar a {
		  display: block;
		  text-align: center;
		  padding: 10px 14px ;
		  margin: 20px 20px;
		  transition: all 0.5s ease;
		  color: white;
		  font-size: 20px;
		  border-radius: 5px;
		  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
		  
		}

		.icon-bar a:hover {
		  background: url("images/static.gif") top center no-repeat #D4593A; background-size: 400%; transform: scale(1.1);
		}

		.facebook {
		  background: rgba(212,89,58,0.4);
		}

		.twitter {
		  background: rgba(212,89,58,0.4);
		}

		.instagram {
		  background: rgba(212,89,58,0.4);
		}

		.youtube {
		  background: rgba(212,89,58,0.4);
		}

		.tiktok {
		  background: rgba(212,89,58,0.4);
		}

		.content {
		  margin-left: 75px;
		  font-size: 30px;
		}


div.button a {font-size: 22px; display: block; width: 70%; border-radius: 10px; padding: 10px; background-color: #D4593A; text-align: center; margin:0 auto; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); cursor:pointer; transition: 0.5s;}

div.button a:hover {transform: scale(1.1);background: url("images/static.gif") top center no-repeat #D4593A; background-size: 100%;}

div.button.home a {margin-top: 900px; margin-bottom: 150px;}



/*Fade-in elements*/

.fade-in {
	-webkit-animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


	/*BIO Page*/
	
div.biopage {background:url("images/texture.png"), linear-gradient(to top, #113B43 0%, #051012 93%); position: relative; z-index: 2; background-size:cover;}

img.polaroid1 {filter: grayscale(100%); transition: transform .5s; rotate: 4deg; padding-left:50px; margin-top: 190px;}
img.polaroid1:hover {filter: none; transform: scale(1.1) rotate(-3deg);}

img.polaroid2 {filter: grayscale(100%); transition: transform .5s; rotate:-6deg; margin-top: -120px; }
img.polaroid2:hover {filter: none; transform: scale(1.1) rotate(4deg); }

img.polaroid3 {filter: grayscale(100%); transition: transform .5s; rotate:7deg; margin-top: -120px; padding-left:50px; }
img.polaroid3:hover {filter: none; transform: scale(1.1) rotate(-6deg); }

div.button.col-7 a {margin-top: 100px; margin-bottom: 100px; width: 40%;}  /*This is button for Bio Page*/


	/*VIDEO Page*/

div.videopage {background:url("images/texture.png"); position: relative; background-size:cover; z-index: 2; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding-bottom: 200px;}

.videocontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
	margin-bottom: 25px;
}
.musicvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

iframe {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);}



	/*MUSIC Page*/
	
div.musicpage {background:url("images/connie-music1.png"); position: relative; background-size:cover; z-index: 2; padding-bottom: 100px;}



.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
	margin:0 auto;
	margin-bottom: 50px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {

}

.flip-card-back {
  transform: rotateY(180deg);
}

div.button.small a {font-size: 15px; display: block; width: 35%; margin: 15px auto; border-radius: 5px;}


/*LIVE Page*/

div.livepage {background:url("images/texture.png"), linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,212,255,0) 100%); position: relative; background-size:cover; z-index: 2; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}

table {margin: 0 auto; width: 100%; border-collapse: collapse; margin-bottom: 150px;}
th,td {text-align: left;}
th {padding-left: 20px;}
tr {border-bottom: 1px solid #D4593A; border-top: 1px solid #D4593A;}
tr:hover {background-color: rgba(15,40,45,0.5);}



/*FOOTER*/

div.footer {background:url("images/texture.png"), linear-gradient(to bottom, #113B43 0%, #051012 93%); position: relative; z-index: 2; background-size:cover;}

div.footer h3 {margin-top: 50px;}
div.footer p {text-align: center;}

input,textarea {width: 25%; font-size: 15px; font-family: acumin-pro-condensed, sans-serif; color: white; background-color: rgba(212,89,58,.3); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5); padding: 10px; border: none; border-radius: 5px; display:block;}
textarea{resize: none;}
::placeholder{color: white;}

div.footer .button.small.col-12 a {width: 15%;}

div.footer div.button.small.col-12 form a#myBtn {width: 10%; margin-top: 20px; margin-bottom: 40px; margin-left:20px !important; margin-right:0;  display: inline-block;}

input,textarea {width: 25%;}
	
input.email {display: inline-block;}

form {text-align: center;}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background:url("images/texture.png"), rgba(15,40,45,.7); background-size:cover;
  margin:200px auto 0 auto;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  width: 30%;
}

/* The Close Button */
.close {
  color: #D4593A;
  float: right;
  font-size: 30px;
  font-weight: bold;
	line-height: 20px;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.modal-content p {text-align: center;}



/*404*/

div.four04 {background:url("images/glass.png"), linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,212,255,0) 100%); position: relative; background-size:cover; z-index: 2; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding-top: 250px;}

.message h2 {text-align: center;}
.message p {text-align: center;}
div.message a {width: 23%; margin-top: 200px; margin-bottom: 200px;}


.flicker-in-1 {
	-webkit-animation: flicker-in-1 2s linear both;
	        animation: flicker-in-1 2s linear both;
}

/**
 * ----------------------------------------
 * @animation flicker-in-1
 * ----------------------------------------
 */
@-webkit-keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * @animation glitch
 * ----------------------------------------
 */

.glitch-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: rgba(0,0,0,0);
}

.glitch {
   position: relative;
   font-size: 180px;
   font-weight: bold;
   color: #D4593A;
   letter-spacing: 3px;
   z-index: 1;
}

.glitch:before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: -2px;
   width: 100%;
   color: 100px;
   background-color: rgba(0,0,0,0);
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-before 3s infinite linear alternate-reverse;
}

.glitch:after {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 2px;
   width: 100%;
   color: 100px;
   background-color: rgba(0,0,0,0);
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-after 2s infinite linear alternate-reverse;
}

@keyframes noise-before {
   0% {
      clip: rect(61px, 9999px, 52px, 0);
   }
   5% {
      clip: rect(33px, 9999px, 144px, 0);
   }
   10% {
      clip: rect(121px, 9999px, 115px, 0);
   }
   15% {
      clip: rect(144px, 9999px, 162px, 0);
   }
   20% {
      clip: rect(62px, 9999px, 180px, 0);
   }
   25% {
      clip: rect(34px, 9999px, 42px, 0);
   }
   30% {
      clip: rect(147px, 9999px, 179px, 0);
   }
   35% {
      clip: rect(99px, 9999px, 63px, 0);
   }
   40% {
      clip: rect(188px, 9999px, 122px, 0);
   }
   45% {
      clip: rect(154px, 9999px, 14px, 0);
   }
   50% {
      clip: rect(63px, 9999px, 37px, 0);
   }
   55% {
      clip: rect(161px, 9999px, 147px, 0);
   }
   60% {
      clip: rect(109px, 9999px, 175px, 0);
   }
   65% {
      clip: rect(157px, 9999px, 88px, 0);
   }
   70% {
      clip: rect(173px, 9999px, 131px, 0);
   }
   75% {
      clip: rect(62px, 9999px, 70px, 0);
   }
   80% {
      clip: rect(24px, 9999px, 153px, 0);
   }
   85% {
      clip: rect(138px, 9999px, 40px, 0);
   }
   90% {
      clip: rect(79px, 9999px, 136px, 0);
   }
   95% {
      clip: rect(25px, 9999px, 34px, 0);
   }
   100% {
      clip: rect(173px, 9999px, 166px, 0);
   }
}

@keyframes noise-after {
   0% {
      clip: rect(26px, 9999px, 33px, 0);
   }
   5% {
      clip: rect(140px, 9999px, 198px, 0);
   }
   10% {
      clip: rect(184px, 9999px, 89px, 0);
   }
   15% {
      clip: rect(121px, 9999px, 6px, 0);
   }
   20% {
      clip: rect(181px, 9999px, 99px, 0);
   }
   25% {
      clip: rect(154px, 9999px, 133px, 0);
   }
   30% {
      clip: rect(134px, 9999px, 169px, 0);
   }
   35% {
      clip: rect(26px, 9999px, 187px, 0);
   }
   40% {
      clip: rect(147px, 9999px, 137px, 0);
   }
   45% {
      clip: rect(31px, 9999px, 52px, 0);
   }
   50% {
      clip: rect(191px, 9999px, 109px, 0);
   }
   55% {
      clip: rect(74px, 9999px, 54px, 0);
   }
   60% {
      clip: rect(145px, 9999px, 75px, 0);
   }
   65% {
      clip: rect(153px, 9999px, 198px, 0);
   }
   70% {
      clip: rect(99px, 9999px, 136px, 0);
   }
   75% {
      clip: rect(118px, 9999px, 192px, 0);
   }
   80% {
      clip: rect(1px, 9999px, 83px, 0);
   }
   85% {
      clip: rect(145px, 9999px, 98px, 0);
   }
   90% {
      clip: rect(121px, 9999px, 154px, 0);
   }
   95% {
      clip: rect(156px, 9999px, 44px, 0);
   }
   100% {
      clip: rect(67px, 9999px, 122px, 0);
   }
}




/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media only screen and (max-width: 767px) {
	
	
	
	
	div.desktop {display:none;}
	div.mobile {display: block;}
	div.navbar {position: fixed; z-index: 21; width: 100%;}
	
	h2 {font-size: 15pt;}
	
	
	/*Header Mobile*/

		.navbar {
		  overflow: hidden;
		  position: relative;
		}

		.navbar #myLinks {
		  display: none;
		}

		div.navbar a {
			padding-left: 30px;
			padding-top: 15px;
			display: block;
		}

		.navbar a.icon {
		  display: block;
		  position: absolute;
		  right: 30px;
		  top: 28px;;
		}

		.logo img {
        max-width: 120px; 
        height: auto;
    	}
		
		div.navbar a.logo {transition:none;}
		div.navbar a.logo:hover {transform: none;}
	
	
	h1 {font-size: 50pt; text-align: center; margin-top: 150px;}
	p {font-size: 13pt;}
	
	
	/*CTA button Mobile*/

		div.button.home a {width: 40%; margin-top: 800px;}
	

	/*Bio Mobile*/	
	
		div.biopage .button.col-12 a {margin-top: 80px; margin-bottom: 80px; width: 40%;}  /*This is button for Bio Page*/
	
	/*Music Mobile*/	
	


	/*404 Mobile*/	
	
	div.message a {margin-top: 100px; width: 40%;}
	
	
	/*Footer Mobile*/
	
	div.footer .button.small.col-12 a {width: 25%;}
	
	div.footer div.button.small.col-12 form a#myBtn {width: 20%; margin-top: 20px; margin-bottom: 40px; margin-left:20px !important; margin-right:0;  display: inline-block;}
	input,textarea {width: 45%;}
	
	div.footer h3 {margin-top: 30px}
	
	input.email {display: inline-block;}
}
/*1000px*/

@media only screen and (max-width: 1000px) {
	
	div.desktop.video {display:none;}
	div.mobile.video {display: block;}
	
	
	div.biopage .button a {width: 50%;}
	
	div.musicpage {background:url("images/texture.png"), linear-gradient(to top, #113B43 0%, #051012 93%); position: relative; z-index: 2; background-size:cover;}
	div.musicpage .desktop {display:none;}
	div.musicpage .mobile {display: block;}
	
	div.button.small a {width: 45%;}
	
	h1 {font-size: 50pt;  margin-top: 150px;}
	p {font-size: 13pt;}
	
	.modal-content {width: 50%;}

}