.mobile-container {
  max-width: 98vw;
  margin: auto;
  background-color: #ffffff;
  height: 500px;
  color: black;
  border-radius: 10px;
}
.caption {
    font-size:1vw;
}
.brushes {
    position:absolute;
    top:300px;
    right:5vw;
}
.sparkle-gold {
	/*color: #D81E1E;*/
  
    color: gold;
	background: -webkit-linear-gradient(transparent, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/gold_glitter.gif) repeat;
	background: -o-linear-gradient(transparent, transparent) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	margin: 0;
	padding: 0;
    font-size:3vw;
	font-weight: 600;
	width: 100%;
	text-align: center;
	letter-spacing: 1px;
	z-index: 999999;
	-webkit-background-clip: text;
}

@import url(https://fonts.bunny.net/css?family=almarai:300);

#popup {
    width:900px;
    hight:auto;
    background-color:yellow;
}
/* NEOMORPHIC SECTION START*/
.block {
  align-items: row;
  background:transparent;/*afd275#c6f2ff*/
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 200px;d2e7f4
  height: 100vh;
  justify-content: center;
  padding: 1rem;
}
    .element {
  align-items: center;
  background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(198,242,255,0.25));
  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  display: flex;
  height: 200px;
  justify-content: center;
  width: 200px;
  border-radius: 30px;
}
.elementa {
    margin-left: -40%;
  align-items: center;
  background: transparent;
  /*box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);*/
  border-radius: 10px;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 250px;
}
.elementa1 {
    width:100px;
    height:40px;
    border-radius: 8px;
    font-size:1vw;
    font-weight:bold;
}
.elementa1:hover {
    color:orange;
    font-size:1.2vw;
}

.element-1 {
  background: #c6f2ff;
   box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}

.element-2 {
  background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(198,242,255,0.25));
   box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}

.element-3 {
  background: linear-gradient(135deg, rgba(0,0,0,0.22), rgba(198,242,255,0.25));
   box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}
/* NEOMORPHIC SECTION END*/


/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #7ae8f9;/*#7ae8f9;*/
  position: relative;
}
.top, .bottom{
			box-sizing : border-box;
			width : 250px;
			display : block;
			margin : auto;
			height : 50px;
			background-color : rgb(30,60,90);
			border : 0px solid rgb(30,60,90);
			border-radius : 0 50px 0 50px;
			color : white;
			font-size : 100%;
			font-family : sans-serif;
			text-align : center;
			}
.top{border-radius : 0 50px 0 50px; padding-top : 10px;}
.bottom{border-radius : 50px 0 50px 0; margin-top : -40px;}


/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
   background-color:pink;/*#056672;*/
   color:#ffffff;
}
/* Style navigation menu links */
.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  background-color:#07717f;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #7ae8f9;/*056672*/
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  scale:1;
}
/* Menu background color */
#myLinks {
    background-color:#056672;
    color:#ffffff;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #fff;
  color: blue;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}
body {
  background-image: url('img/lake-sunrise2.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.beleid {
    border:1px solid #bed9dd;
    font-size:3vw;
    color:#bed9dd;
    padding: 0 4px 0 4px;
}
.main {
    background-color:white;
    border-radius:20px;
}
.column {
    border-radius:30px;
    background-color:#eff4f9;
    font-size:2vw;
    color:grey;
}
/* GRID XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.grid-container {
    font-weight:normal;
  display: grid;

    grid-template-columns: 1fr 3fr 1fr ;
    grid-template-rows: repeat(2, 700px);
    grid-gap: 1rem;

  grid-template-areas:
        "head head2 . side"
        "main main2 . side"
        "footer footer footer footer";
}
/* REVOLVING BOX START XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
#box div
{
position: absolute;
height: 250px;
width: 250px;
border: 1px solid lightgrey;
background: rgba(255,200,100,0.8);
text-align: center;
font-size: 200px;
}

#box
{
-webkit-animation-name: animation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
margin:80;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 125px 125px 0;
/*&:hover {
    animation-play-state: paused;
  }*/
}
#box:hover {
 animation-play-state: paused;   
}
@media only screen and (min-width: 900px) {
    #box {
        margin-top:-80%;
    }
    #box img {
        margin-top:-40%;
    }
}
@media only screen and (max-width: 600px) {
    #box img {
        margin-top:-34%;
    }
}

#box .one
{ 
-webkit-transform: translateZ(125px);
background-image:url('https://img.webnots.com/2016/09/A-One.png');
font-size:1.5vw;
color:black;
}
#box .two
{ 
-webkit-transform: rotateX(-90deg) translateZ(125px);
}
#box .three 
{
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
}
#box .four 
{
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
}
#box .five
{ 
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
}
#box .six 
{
-webkit-transform: rotateY(90deg) translateZ(125px);
background-image:url('https://img.webnots.com/2016/09/F-Six.png');
background-color:lightgreen;
font-size:1.5vw;
color:black;
}

@-webkit-keyframes animation
{
from,to{}
12% { -webkit-transform: rotateY(-90deg);}
24% { -webkit-transform: rotateY(-90deg) rotateZ(135deg);}
50% { -webkit-transform: rotateY(225deg) rotateZ(135deg);}
66% { -webkit-transform: rotateY(135deg) rotateX(135deg);}
83% { -webkit-transform: rotateX(135deg);}
}
/* REVOLVING BOX END XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/