@charset "utf-8";
/* CSS Document */

@font-face {
    font-family:'BeatlesLightLight';
    src: url('../fonts/BeatlesLightLight.ttf');
}
html, body { width: 100%; height: 100%; }
body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.gon {
	display:inline-block;
  width: 440px;
  height: 440px; 
  background:url(../images/1.jpg);  /*#D7D7D7*/
  background-size: 440px 440px;

  padding-left:70px;
  padding-right:70px;
  /* Text styling */
  line-height: 17px;
  text-align: center;
  font-family:BeatlesLightLight;
  font-size: 16px;
  font-weight: bold;
  color: #06F;
  color:#473C3C;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
}
.gon:hover {
  color: #4756D7;
 
}

.pental {
  height: 400px;
  padding-top:40px;
  margin-left:70px;
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}
.pentar {
	  padding-top:40px;
  height: 400px;
margin-left:20px;
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}


.penta {
  padding-top:130px;

  height: 400px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
}

@media screen and (max-width: 320px) {
	
	
	
	.gon {
	display:inline-block;
  width: 300px;
  height: 300px; 
  background:url(../images/1.jpg);  /*#D7D7D7*/
  background-size: 260px 260px;

  padding-left:30px;
  padding-right:30px;
  /* Text styling */
  line-height: 15px;
  text-align: center;
  font-family:BeatlesLightLight;
  font-size: 9px;
  font-weight: bold;
  color: #06F;
  color:#473C3C;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
}

.penta {
  padding-top:85px;

  height: 250px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
}
.pental {
  height: 250px;
  padding-top:50px;
  margin-left: 4px;
 
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}
.pentar {
	padding-top:85px;
margin-left: 4px;
  height: 250px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );

	
}
}

@media only screen and (max-width: 480px) and (min-width: 321px) {
	
	
	
	.gon {
	display:inline-block;
  width: 370px;
  height: 370px; 
  background:url(../images/1.jpg);  /*#D7D7D7*/
  background-size: 380px 380px;

  padding-left:45px;
  padding-right:45px;
  /* Text styling */
  line-height: 15px;
  text-align: center;
  font-family:BeatlesLightLight;
  font-size: 12px;
  font-weight: bold;
  color: #06F;
  color:#473C3C;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
}

.penta {
  padding-top:90px;

  height: 300px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
}
.pental {
  height: 300px;
  padding-top:70px;
  margin-left: 65px;
 
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}
.pentar {
	padding-top:70px;
margin-left:65px;
  height: 300px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );

	
}
}

@media only screen and (max-width: 640px) and (min-width: 481px){
	
	
	
	.gon {
	display:inline-block;
  width: 250px;
  height: 250px; 
  background:url(../images/1.jpg);  /*#D7D7D7*/
  background-size: 440px 440px;

  padding-left:40px;
  padding-right:40px;
  /* Text styling */
  line-height: 14px;
  text-align: center;
  font-family:BeatlesLightLight;
  font-size: 10px;
  font-weight: bold;
  color: #06F;
  color:#473C3C;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
}

.pental {
  height: 270px;
  padding-top:20px;
  margin-left:50px;
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}
.pentar {
	  padding-top:20px;
  height: 280px;
margin-right:-50px;
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}


.penta {
  padding-top:85px;

  height: 280px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
}}

@media only screen and (max-width: 769px) and (min-width: 641px){
	
	
	
	.gon {
	display:inline-block;
  width: 340px;
  height: 340px; 
  background:url(../images/1.jpg);  /*#D7D7D7*/
  background-size: 440px 440px;

  padding-left:40px;
  padding-right:40px;
  /* Text styling */
  line-height: 17px;
  text-align: center;
  font-family:BeatlesLightLight;
  font-size: 12px;
  font-weight: bold;
  color: #06F;
  color:#473C3C;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
}

.pental {
  height: 340px;
  padding-top:40px;
  margin-left:0px;
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}
.pentar {
	  padding-top:40px;
  height: 340px;
margin-right:-40px;
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}


.penta {
  padding-top:130px;

  height: 340px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
}}


@media only screen and (max-width: 1024px) and (min-width: 770px){
	
	
	
	.gon {
	display:inline-block;
  width: 440px;
  height: 440px; 
  background:url(../images/1.jpg);  /*#D7D7D7*/
  background-size: 440px 440px;

  padding-left:50px;
  padding-right:50px;
  /* Text styling */
  line-height: 17px;
  text-align: center;
  font-family:BeatlesLightLight;
  font-size: 16px;
  font-weight: bold;
  color: #06F;
  color:#473C3C;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
}

.pental {
  height: 400px;
  padding-top:40px;
  margin-left:0px;
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}
.pentar {
	  padding-top:40px;
  height: 400px;
margin-right:-40px;
  -webkit-clip-path: polygon(
     18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
   18% 0%, 82% 0%, 100% 62%, 50% 100%,0 62%
  );
}


.penta {
  padding-top:130px;

  height: 400px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
}}