@import url('https://fonts.googleapis.com/css?family=Monoton');
@import url('https://fonts.googleapis.com/css?family=Fugaz+One');
@import url('https://fonts.googleapis.com/css?family=Alice&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rakkas&display=swap');
@import url('https://fonts.googleapis.com/css?family=Yatra+One&display=swap');
*{
    box-sizing: border-box;
}
body {
	width: 100%;
	height: 100%;
	color: #fff;
	background: linear-gradient(-45deg, #333333, #dd1818, #1D4350, #A43931);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
h6 {
	font-family: 'Open Sans';
	font-weight: 300;
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}
.hs{
    font-size:14px;
    font-weight: bold;
}

.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; 
    top: 0;
    width: 100%; 
    left: 0;
  }
.navlogo{
float:left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-family: 'Rakkas', cursive;
font-weight: bolder;
font-size: 15px;
}
.navbar a {
    float: right;
    display: block;
    color: #dd1818;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Rakkas', cursive;
    font-size: 20px;
  }
.navbar a:hover {
    background:#dd1818;
    color: black;
  }
  

.banner{
    background-image: url(./img/banner.jpg);
    background-repeat: repeat-x;
    width: auto;
    height: 250px;
}
.artist{
    text-align:center;
}
.artisth{
    text-align: center;
    color: white;
    font-family:'Rakkas', cursive;
    -webkit-text-stroke-width: 0.0005px;
    -webkit-text-stroke-color: black;
    font-size: 40px;
    padding: 85px;
}
.artistp{
    font-family: 'Yatra One', cursive;
    font-size: 20px;
    text-align: center;
    padding:10px;
    top: 50px;
}
.facefront{
    background-image: url(./img/faceme.png);
    background-size: 100% 100%;
    height: 150px;
    width:150px;
    padding: 15px;
    display: block;
  margin-left: auto;
  margin-right: auto;
    cursor: pointer;
    transition: transform 1s ease-in-out;               
}
.facefront:hover {
    transform: rotateY(180deg);
    transform: rotateY(360deg);
  }

.work1{
    text-align: center;
    color: white;
    font-family:'Rakkas', cursive;
    font-size: 50px;
    -webkit-text-stroke-width: 0.15px;
    -webkit-text-stroke-color: black;
    padding: 85px;
    background-image: url(./img/work.jpg);
    width: auto;
    height: 250px;
}
.workpics{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 975px 975px 975px;
    grid-template-areas: "w1 w2" "w3 w4" "w5 w6";
    text-align: center;
    background-position: center;
    justify-items: center;
}
.w1{
    grid-area: w1;
    background-image: url(./img/work1.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 975px;    
    width: 50%;
    transition: transform 2s linear;  
}
.w1:hover {
    transform: scale(1.05 , 1.05);
-moz-box-shadow: 0 0 975px #ccc;
		-webkit-box-shadow: 0 0 15px #ccc;
		box-shadow: 0 0 15px #ccc;}
.w2{
    grid-area: w2;
    background-image: url(./img/work2.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 975px;    
    width: 50%; 
    transition: transform 2s linear;  
}
.w2:hover {
    transform: scale(1.05 , 1.05);
    -moz-box-shadow: 0 0 975px #ccc;
		-webkit-box-shadow: 0 0 15px #ccc;
		box-shadow: 0 0 15px #ccc;}
.w3{
    grid-area: w3;
    background-image: url(./img/work3.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 975px;    
    width: 75%;
    transition: transform 1s linear;  
}
.w3:hover {
    transform: scale(1.15, 1.15);
    -moz-box-shadow: 0 0 975px #ccc;
		-webkit-box-shadow: 0 0 15px #ccc;
		box-shadow: 0 0 15px #ccc;}
.w4{
    grid-area: w4;
    background-image: url(./img/work4.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 975px;    
    width: 65%;  
    transition: transform 1s linear;  
}
.w4:hover {
    transform: scale( 1.10 ,1.10);
    -moz-box-shadow: 0 0 975px #ccc;
    -webkit-box-shadow: 0 0 15px #ccc;
    box-shadow: 0 0 15px #ccc;}
.w5{
    grid-area: w5;
    background-image: url(./img/work5.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 975px;    
    width: 75%;   
    transition: transform 1s linear;  
}
.w5:hover {
    transform: scale(1.10 , 1.10);
    -moz-box-shadow: 0 0 975px #ccc;
		-webkit-box-shadow: 0 0 15px #ccc;
		box-shadow: 0 0 15px #ccc;}
.w6{
    grid-area: w6;
    background-image: url(./img/work6.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 975px;    
    width: 60%;
    transition: transform 1s linear;  
}
.w6:hover {
    transform: scale(1.10 , 1.10);
    -moz-box-shadow: 0 0 975px #ccc;
		-webkit-box-shadow: 0 0 15px #ccc;
		box-shadow: 0 0 15px #ccc;}
.Music{
    text-align: center;
}
.musicpics{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 75%;
  grid-template-areas: "cc shc";
  justify-items: center;
  text-align:center;
}
.cc { 
    grid-area: cc;
}

.shc { 
    grid-area: shc;
}

.photopics{
  grid-template-columns: 100%;
  grid-template-rows: 75%;
  grid-template-areas: "photo1 photo2";
  text-align: center;

}
.photo1{
    grid-area: photo1;
    background-image: url(./img/photo1.JPG);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 975px;    
    width: 50%; 
    display: block;
  margin-left: auto;
  margin-right: auto; 
  transition: transform 1s linear;  
}
.photo1:hover {
    transform: scale(1.10 , 1.10);
    -moz-box-shadow: 0 0 975px #ccc;
		-webkit-box-shadow: 0 0 15px #ccc;
		box-shadow: 0 0 15px #ccc;}
.photo2{
    grid-area: photo2;
    background-image: url(./img/photo2.JPG);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 975px;    
    width: 50%;
    display: block;
  margin-left: auto;
  margin-right: auto;
  transition: transform 1s linear;  
}
.photo2:hover {
    transform: scale(1.10 , 1.10);
    -moz-box-shadow: 0 0 975px #ccc;
    -webkit-box-shadow: 0 0 15px #ccc;
    box-shadow: 0 0 15px #ccc;}
.contactp {
    text-align: center;
    float:center;
    font-family: 'Yatra One', cursive;
    font-size: 20px;
    padding:20px;
  }
.pictograms{
  float: center;
  text-align:center;
  justify-items: center; 
  padding:10px;
  width: 100%;
  min-height: 10vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}