.mobile-container {
  max-width: 98vw;
  margin: auto;
  background-color: #ffffff;
  height: 500px;
  color: black;
  border-radius: 10px;
}
.brushes {
    position:absolute;
    top:30px;
    right:2.5vw;
    width:9vw;
    height:auto;
    opacity:0.8;
}
#neo {
    margin:auto;
    width:80%;
    height:20vh;
    border-radius:10px;
    padding-top:1.8vh;
    background-color:white;
    background: url(img/landscape2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color:#c1c1c1;
    font-family:sans-serif, arial, allura, almarai;font-size:2vw;
    font-weight:normal;
    box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}
#about {
    z-index:20;
    width:79%;
    height:35vh;
    position:absolute;
    top:20vh;
    left:10.4vw;
    padding:10px;
    background: url(img/fields1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    font-size:1vw;
    font-weight:normal;
    box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
    background-color:white; /*#8ef98e*/
    display:none;
    border:0px solid grey;
    border-radius:10px;
}

/* FLIP CARD START XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.flip-card {
  font-family:Arial;
  position:fixed;
  background-color: transparent;
  width: 180px;
  height: 180px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  float:left;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height:100%;
  text-align: center;
  transition: transform 1.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius:12px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #efefef;
  color: grey;
  font-size:1.3vw;
}

/* Style the back side */
.flip-card-back {
  background-color: #88c4fc;
  font-size:0.9vw;
  font-weight:bold;
  color: #434ead;
  transform: rotateY(180deg);
}
/* FLIP CARD END XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/* GRID MENU STARTS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.grid-container {
  display: grid;
  margin:auto;/*-left:1.9vw;
  /*grid-auto-flow: column;repeat(4, 25%);*/
  width:85%;
  column-gap: 20px;
  /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr;*/
  grid-template-columns: auto auto auto ;
  /*(grid-template-columns: repeat(3, 25%);*/
}
.grid-item {
  width:20vw;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(193, 193, 193, 0.8);
  border-radius:10px;
  padding: 20px;
  font-size: 1.3vw;
  text-align: center;
  cursor:pointer;
  color:grey;
  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}
.grid-item:hover {
   background-color: #e0e0e0;
    font-weight:bold;
    color:blue;
    cursor:pointer; 
  /*transform: rotateX(180deg);  */
}
/* GRID MENU ENDS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
#garagedoor {
  margin: 50px auto;
  list-style: none;
  background: url(../images/menu-bg.jpg);
  width: 800px;
  overflow: auto;	
}

#garagedoor li {
  width: 200px;
  height: 100px;
  display: block;
  float: left;
}

#garagedoor li#shutter1 {
  background: url(../images/shutter-africanplains.jpg) no-repeat; 
}
#garagedoor li#shutter2 {
  background: url(../images/shutter-reptiles.jpg) no-repeat; 
}
#garagedoor li#shutter3 {
  background: url(../images/shutter-aviary.jpg) no-repeat; 
}
#garagedoor li#shutter4 {
  background: url(../images/shutter-arcticzone.jpg) no-repeat; 
}

#garagedoor a {
  width: 200px;
  height: 100px;
  display: block;
  background: url(../images/window.png) no-repeat bottom center;
  text-indent: -9999px;
}
/* GARAGEDOOR MENU ENDS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@-webkit-keyframes RotateX {    
         0% { -webkit-transform: rotateX(0deg);animation-pause: 2s; }
         100% { -webkit-transform: rotateX(360deg); }
    }
@-moz-keyframes RotateX {    
         0% { -webkit-transform: rotateX(0deg); }
         50% { -webkit-transform: rotateX(180deg);color:white }
         83%, 100% { -webkit-transform: rotateX(360deg);
         }
    }    
    /* Standard syntax */
@keyframes RotateX {  
         0% { -webkit-transform: rotateX(0deg); }
         50% { -webkit-transform: rotateX(180deg);color:white; }
         83%, 100% { -webkit-transform: rotateX(360deg);
         }
    }
.banner {
  width: 30vw;
  height: 19vh;
  display: inline-block;
  overflow: hidden;
  background-color: transparent;
  -webkit-animation: RotateX 6s linear infinite; /* Safari */
  -moz-animation: RotateX 6s linear infinite;
  animation: RotateX 6s linear infinite;
  -webkit-transition: all 3s ease-in-out;
            -moz-transition: all 3s ease-in-out;
            -ms-transition: all 3s ease-in-out;
            -o-transition: all 3s ease-in-out;
}
  
.banner2 {
            position: relative;
            width: 50vw;
            height: 20vh;
            -webkit-transition: all 2s ease-in-out;
            -moz-transition: all 2s ease-in-out;
            -ms-transition: all 2s ease-in-out;
            -o-transition: all 2s ease-in-out;
            transition: all 2s ease-in-out;
            background:url(http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif);
            -webkit-transform:rotateY(180deg);
            -webkit-transform-style: preserve-3d;
                line-height:600px;
            text-align:center;
            font-size:0;
            margin: auto;

.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-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);

#logo {
    opacity: 0;
}
#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;
  color:#d9daf7;
}
    .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;
  color:#cfe1f9;
}
.elementa1 {
    width:100px;
    height:40px;
    border-radius: 8px;
    font-size:1vw;
    font-weight:bold;
    color:#bcbaba;
}
.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;
}
.main a {
    text-decoration:none;
}
.main a:hover {
    background-color: yellow;
    font-weight:bold;
    color:blue;
    cursor:pointer;
}
.column {
    border-radius:30px;
    background-color:#eff4f9;
    font-size:2vw;
    color:grey;
}
/* GRID XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*
.grid-container {
    font-weight:normal;
  display: grid;

    grid-template-columns: auto auto auto auto auto  ;
    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*/