body {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
  }
  
  body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }

  .modal {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
  }
  
  .modal::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }

.jumbotron_story1{
    background-image: url("../img/designmonkeys ilustration-01.png");
    /* Set a specific height */
    
    min-height: 500px; 
    background-color: white;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.jumbotron_story2{
    background-image: url("../img/designmonkeys ilustration-02.png");
    /* Set a specific height */
    
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.jumbotron_story3{
    background-image: url("../img/designmonkeys ilustration-03.png");
    /* Set a specific height */
    
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer{
    background-color: #333;
    padding: 60px;
    color: beige;
}


#foxyform_embed_link_953226{
    display:none !important;
}

/* img:hover {
    background-color: yellow;
  } */

/* #aboutus {
    margin-top: 10%;
} */

.modal-content {
    padding:10px;
}

/* .modal-content img {
    width: inherit;
    transform: scale(0.8);
}
 */
.toucan{
    position: absolute;
    top: 240px;
    left:240px;
}

.rubber{
    position: absolute;
    top: 300px;
    left:700px;
}

.monkey{
    position: absolute;
    top: 350px;
    left:850px;
}

.pyramid{
    position: absolute;
    top: 400px;
    left:500px;
}



.md {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .mc {
    height: auto !important;
    width: max-content !important;
    min-height: 100% !important;
    border-radius: 0 !important;
  }

.aztec-writing{
    position: absolute;
    top: 1000px;
    left:200px;
}

.magma{
    position: absolute;
    top: 1100px;
    left:400px;
}


.aztec-sculpture{
    position: absolute;
    top: 980px;
    left:800px;
}

.skull{
    position: absolute;
    top: 1600px;
    left:400px;
}

.cave{
    position: absolute;
    top: 1700px;
    left:800px;
}

.game{
    position: absolute;
    top: 1650px;
    left:500px;
}


#game{
    height:0px;
    width:0px;
    
}

.gameClose{
    position: absolute;
    top: 200px;
    right: 140px;
    width: 90px;
    height: 48px;
}

h1{
    font-size: 1rem !important;
    margin-bottom: 0 !important;
}

h2{
    color:white;
    font-size: 1.5rem !important;
    text-align: center;
 
    
}

h3{
    color:#ccc;
    -webkit-text-emphasis: triangle;
    text-emphasis: triangle;
    
}

.triangle{
    -webkit-text-emphasis: triangle;
    text-emphasis: triangle;
}

p{
    text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  padding: 10px;
  padding-top: 0px;
}

.col-md-4 p{
 padding-bottom: 0px;
}



.row{
    text-align: center;
}

.btn{
     color: rgba(255,255,255,0.9);
     background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5);
     background-size: 600%;
     animation: anime 16s linear infinite;
     /* border: 5px solid transparent; */
     transform: scale(3);
}

.modal-content .btn{
    
    transform: scale(1.5);
    margin-top: 20px;
}

.gradient{
    background: linear-gradient(-45deg, rgb(49, 196, 161), #338AFF, #FF3D77, #FFA63D);    
    background-size: 600%;
    animation: anime 16s linear infinite;
}

.gradient2{
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(-45deg, rgb(49, 196, 161), #338AFF, #FF3D77, #FFA63D);    
    background-size: 600%;
    animation: anime 16s linear infinite;
}

.gradient3{
    background: linear-gradient(-45deg, #338AFF, #FF3D77, #FFA63D, rgb(49, 196, 161));    
    background-size: 600%;
    animation: anime 16s linear infinite;
}

.close{
    font-size: 3rem !important;
   
}

.btn{
    border: 0 !important;
}

.mobileHidden{
    display:none;
}

.mobileHidden2{
    display: block;
}

#dragHide{
    margin-left:35px;
}

#dragHide2{
    margin-left:135px;
}

@keyframes anime{ 
   0% {
     background-position: 0% 50%;
    }
   50% {
     background-position: 100% 50%;
   }
   100% {
     background-position: 0% 50%;
    }
    }

    #friends{
        display:none;
        
    }

    #friends2{
        display:none;
        
    }

    #friends3{
        display:none;
        
    }

    

@media only screen and (max-width: 480px) {

    .game{
        display: none;
    }

    #game{
        display: none;
    }

    #friends{
        display:block;
        height: 1662px;
        overflow: hidden;
    }

    #friends2{
        display:block;
        height: 1662px;
        overflow: hidden;
    }

    #friends3{
        display:block;
        height: 1662px;
        overflow: hidden;
    }

    .friendsIcon{
        background: linear-gradient(-45deg,  rgba(61, 255, 174, 0.3), rgba(132, 255, 61, 0.7));    
        background-size: 600%;
        animation: anime2 16s linear infinite;
        border-radius: 5px;
        
    }

    .friendsIcon2{

        background: linear-gradient(-45deg,  rgba(248, 55, 113, 0.3), rgb(243, 151, 46, 0.7));    
        background-size: 600%;
        animation: anime2 16s linear infinite;
        border-radius: 5px;
    }

    .friendsIcon3{
        background: linear-gradient(-45deg,  rgb(248, 55, 113, 0.3), rgb(243, 151, 46, 0.7));  
        background-size: 600%;
        animation: anime2 16s linear infinite;
        border-radius: 5px;
    }

    .gradient{
        background: linear-gradient(-45deg, #338AFF, #FF3D77, rgb(49, 196, 161), #FFA63D);    
        background-size: 600%;
        animation: anime2 16s linear infinite;
    }

    @keyframes anime2{ 
        0% {
          background-position: 0% 50%;
         }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
         }
         }
     
    p{
        font-size: initial;
    }

    .custom_fb{
        display: none;
    }

    footer{
        background-color: #333;
        padding: 0px;
        padding-top: 30px;
        color: beige;
    }



    .jumbotron_story1{
        background-image: url("../img/designmonkeys\ ilustration-drag-05.png");
        /* Set a specific height */
        height: 1660px; 
        background-attachment: inherit;
    }

    .jumbotron_story2{
        background-image: url("../img/designmonkeys\ ilustration-drag-06.png");
        /* Set a specific height */
        height: 1660px; 
        background-attachment: inherit;

    }
    
    .jumbotron_story3{
        background-image: url("../img/designmonkeys\ ilustration-drag-07.png");
       /* Set a specific height */
       height: 1660px; 
       background-attachment: inherit;
  }

  .toucan{
    position: absolute;
    top: 500px;
    left:50px;
}

.rubber{
    position: absolute;
    top: 950px;
    left:100px;
}

.monkey{
    position: absolute;
    top: 1250px;
    left:150px;
}

.pyramid{
    position: absolute;
    top: 1600px;
    left:200px;
}

.aztec-writing{
    position: absolute;
    top: 2350px;
    left:150px;
}

.magma{
    position: absolute;
    top: 2550px;
    left:100px;
}


.aztec-sculpture{
    position: absolute;
    top: 3250px;
    left:50px;
}

.skull{
    position: absolute;
    top: 4500px;
    left:100px;
}

.cave{
    position: absolute;
    top: 5000px;
    left:150px;
}

main{
    zoom:1;
}

}

/* .mobileAdd{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    
    text-align: center;
    background-color: #666;

    display: none !important;
    

} */




/* @media (max-width:1024px) and (orientation: landscape){

    .mobileAdd{
        display:block;
    }

    .mobileAdd h1{
        font-size: 25px !important;
        color: white;
        font-weight: 800 !important;
    }
} */


@media (min-width:769px) and (max-width:1280px){
    .jumbotron_story1{

        background-image: url("../img/designmonkeys-ilustration-01-mh.png");
        
        max-height: 576px; 
        background-color: white;
        background-attachment: inherit;

    }

    .jumbotron_story2{

        background-image: url("../img/designmonkeys-ilustration-02-mh.png");
        
        max-height: 576px; 
        background-color: white;
        background-attachment: inherit;

    }

    .jumbotron_story3{

        background-image: url("../img/designmonkeys-ilustration-03-mh.png");
        
        max-height: 576px; 
        background-color: white;
        background-attachment: inherit;

    }
}

@media screen and (width:768px){
    .jumbotron_story1{

        background-image: url("../img/designmonkeys-ilustration-01-mv.png");
        
        min-height: 432px; 
        background-color: white;
        background-attachment: inherit;

    }

    .jumbotron_story2{

        background-image: url("../img/designmonkeys-ilustration-02-mv.png");
        
        min-height: 432px; 
        background-color: white;
        background-attachment: inherit;

    }

    .jumbotron_story3{

        background-image: url("../img/designmonkeys-ilustration-03-mv.png");
        
        min-height: 432px; 
        background-color: white;
        background-attachment: inherit;

    }

    main{
        zoom:0.5;
    }
}

@media screen and (width:568px){

.modal-content{
    width: 30%;
    margin: auto;
}

nav{
    width: 1136px;
}



}

@supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
  }
  
  @supports not (-webkit-overflow-scrolling: touch) {
    /* CSS for other than iOS devices */ 
    
        

    }

    @media (max-width:1024px){
        .mobileHidden{
            display:block;
        }

        .mobileHidden2{
            display: none;
        }
    }

    @media (orientation: landscape) and (max-width:1024px){
        
        main{
            zoom:0.5;
        }
        .jumbotron_story1{
            width: 100%;
        }
        .jumbotron_story2{
            width: 100%;
        }
        .jumbotron_story3{
            width: 100%;
        }

        p{
            font-size:x-large;
        }
        
        small{
            font-size: larger;
        }
        
        h6{
            font-size: larger !important;
        }

        .form{
            min-height: 500px;
        }
    }

    @media (min-width: 768px) and (max-width:1024px){
    .container {
            max-width: 1024px !important;
    }
}

html{   
        width: 100%;
        overflow-x: hidden;
  }