/**
  * Body CSS
      */
 
/*animated SEARCH*/
input[type=text] {
    width: 430px;
    box-sizing: border-box;
    border: 2px solid #111;
    border-radius: 4px;
    font-size: 20px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 50%;
}

/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
    width: 100%;
}


/*animated bubble material*/

  body {
    font-family: "Roboto", sans-serif;
  }
  .w3-bar-block .w3-bar-item {
    padding: 16px 16px 16px 16px;
    font-weight: bold;
  }
  .quarter {
    padding-left: 60px !important;
    background-color: #000;
  }
#quarter {
    padding-left: 60px;
    background-color: #000;
  }

  #year {
    padding-left: 40px;
  }
  .fa {
    padding-right: 10px;
  }
  .visibile {
    width: 0px important!;
  }
  .hidden {
    visibility: hidden;
  }
  #main {
    margin-left: 250px;
  }

.w3-border-left-thick-purple-hover {border-left:9px solid #673ab7!important}
.w3-border-left-thick-black {border-left:9px solid #000000!important}

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */

.gold-bg {
background: rgba(255,215,0,1);
background: -moz-linear-gradient(left, rgba(255,215,0,1) 0%, rgba(255,239,153,1) 50%, rgba(255,215,0,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(61,12,0,1)), color-stop(50%, rgba(143,129,86,1)), color-stop(100%, rgba(71,14,0,1)));
background: -webkit-linear-gradient(left, rgba(255,215,0,1) 0%, rgba(255,239,153,1) 50%, rgba(255,215,0,1) 100%);
background: -o-linear-gradient(left, rgba(255,215,0,1) 0%, rgba(255,239,153,1) 50%, rgba(255,215,0,1) 100%);
background: -ms-linear-gradient(left, rgba(255,215,0,1) 0%, rgba(255,239,153,1) 50%, rgba(255,215,0,1) 100%);
background: linear-gradient(to right, rgba(255,215,0,1) 0%, rgba(255,239,153,1) 50%, rgba(255,215,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d0c00', endColorstr='#470e00', GradientType=1 );
}

.silver-bg {
background: -moz-linear-gradient(45deg, rgba(192,192,192,1) 0%, rgba(255,255,255,1) 50%, rgba(128,128,128,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(192,192,192,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(128,128,128,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(45deg, rgba(192,192,192,1) 0%, rgba(255,255,255,1) 50%, rgba(128,128,128,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(45deg, rgba(192,192,192,1) 0%, rgba(255,255,255,1) 50%, rgba(128,128,128,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(192,192,192,1) 0%, rgba(255,255,255,1) 50%, rgba(128,128,128,1) 100%); /* ie10+ */
background: linear-gradient(45deg, rgba(192,192,192,1) 0%, rgba(255,255,255,1) 50%, rgba(128,128,128,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#c0c0c0',GradientType=1 ); /* ie6-9 */
}
.bronze-bg {
background: rgba(61,12,0,1);
background: -moz-linear-gradient(left, rgba(61,12,0,1) 0%, rgba(143,129,86,1) 50%, rgba(71,14,0,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(61,12,0,1)), color-stop(50%, rgba(143,129,86,1)), color-stop(100%, rgba(71,14,0,1)));
background: -webkit-linear-gradient(left, rgba(61,12,0,1) 0%, rgba(143,129,86,1) 50%, rgba(71,14,0,1) 100%);
background: -o-linear-gradient(left, rgba(61,12,0,1) 0%, rgba(143,129,86,1) 50%, rgba(71,14,0,1) 100%);
background: -ms-linear-gradient(left, rgba(61,12,0,1) 0%, rgba(143,129,86,1) 50%, rgba(71,14,0,1) 100%);
background: linear-gradient(to right, rgba(61,12,0,1) 0%, rgba(143,129,86,1) 50%, rgba(71,14,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d0c00', endColorstr='#470e00', GradientType=1 );
}






  /***DOC SETUP**/
* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
}
/*****/



button{
  position: relative;
  border: none;
  outline:none;
  cursor: pointer;
  background: #000000;
  color: white;
  padding: 18px 60px;
  border-radius: 2px;
  font-size: 22px;
}


.material{
  position:relative;
  color:white;
  margin: 20px auto;
  height:400px;
  width:500px;
  background:#f45673;
  
}



.ripple{
  overflow:hidden;
}

.ripple-effect{
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: deep-purple;

    
  animation: ripple-animation 2s;
}


@keyframes ripple-animation {
    from {
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      transform: scale(100);
      opacity: 0;
    }
}


#mytop-bar {position: fixed; padding: 0px 250px 0px 0px; }

#mytop-barSM {position: fixed; padding: 0px 0px 0px 0px; }

.contact-button {
    background-color: black;
  color: white;
  padding: 8px 18px;
  border-radius: 2px;
  font-size: 22px;
}

#nav-search  {}

.hover-deep-purple :hover {color: deep-purple;}

.deep-purple {background-color: #a702fc !important }

.w3-deep-purple,
.w3-hover-deep-purple:hover {
  color: #fff !important;
  background-color: #673ab7 !important;
}