/*@media (min-width:700px) {
    body {
        background-image: url('gene-gallin-eqaDK06RqYk-unsplash_cropped.jpg');
        padding: 0;
        margin: 0;
        background-position-x:right;
        background-repeat: no-repeat;
    }
}*/

body{
    margin:0;
    padding:0;
    width:min(100%, 1920px);
    
}

a:visited{
    color:#333;
}

a:link{
    color:#333;
}



 /*
@media (max-width:699px) {
    body {
        background-image: url('robert-ruggiero-unsplash-crop.jpg');
        padding: 0;
        margin: 0;
       
        background-attachment: fixed;
        background-size: 100%;
    }
}*/

/*to keep the golfers in the image in-frame
@media (max-width:1300px){
    body{
        background-position-x:right -470px;
    }
}
*/


#navbar {
   /* background-image: linear-gradient(hsl(296, 59%, 8%), hsl(296, 29%, 20%));*/
   /* background-image: linear-gradient(hsl(95, 19%, 17%),rgba(100,100,100,.8)); /*rgba(86, 95, 78, .5)*/
    display: flex;
    flex-direction:row;
    top:0;
    left:0;
   /* height: max(70px,10vh);*/
    
    width:min(100%, 1920px);

  /* width: calc(100% - 40px); */
    justify-content: space-between;
    align-items: center;
    position:absolute;
    top:0;
    left:0;
   
    
}

#navbarButtons{
    width:33vw;
    background-color:rgba(0,0,0,.6);
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    font-size:20px;
}

@media (max-width:699px){
    #navbarButtons{
        display:none;
    }
}

@media (min-width:700px){
    #navbarButtons{
        display:flex;
        flex-direction:'row';
    }
}

#icon-container{
    background-color:#fafafa;  
    height:40px; 
    border-radius:50%; 
    margin:15px; 
    margin-left:40px; 
    padding:5px; 
    display:flex; 
    z-index:2;
}

 
#navbarHeadline{
    font-size: 22px;
    color: hsl(95,20%,20%);
   /* padding: 20px;*/

    /*font-family: 'Lora', serif;*/
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    letter-spacing:2.5px;
    padding-left:20px;
    z-index:2;
    
}

@media (max-width:699px){
    #navbarHeadline{
        font-size: 22px;
        padding-left:5px;
        color:white;
    }
    #icon-container{
        margin-left:4vw;
    }
}


.buttonContainer{
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:'Nunito';
    color:#fff;
    padding-right:10px;
    padding-left:10px;
    transition:.3s;
    
}

.navButtonUnderline{
    width:10%;
    background-color:none;
    height:4px;
    border-radius:100px;
    transition:.2s;
}


.buttonText{
    color:white;
    font-size:20px;
    transition:.2s;
}



/*.buttonText:hover{
    
    transform:scale(1.1);
}*/

.buttonText:hover + div{
    background-color:hsl(95,40%,50%);
    width:100%;
}






#contactButton, #aboutButton{
    z-index: 5;
}



/*8888888888888888888888888888888888888888888888888888888888888888888888888888 Hamburger Menu 888888888888888888888888888888888888 */


@media (max-width:699px){
    #hamburgerMenu{
        display:inline;
        position:relative;
        padding-right:15px;

    }
}

@media (min-width:700px){
    #hamburgerMenu{
        display:none;
    }
}

.hamburgerDiv{
    position:absolute;
    top:50%;
    width:30px;
    height: 4px;
    background-color:#fff;
    margin-right:30px;
    border-radius:10px;
    cursor:pointer;
    z-index:6;
    transition:.3s;
}

.hamburgerDiv:before,
.hamburgerDiv:after{
    content:"";
    position:absolute;
    height:4px;
    right:0;
    background-color:#fff;
    border-radius: 10px;
    transition:.3s;
}

.hamburgerDiv:before{
    top:-10px;
    width:30px;
}

.hamburgerDiv:after{
    top:10px;
    width:30px;
}

.hamburgerInput{
    position:relative;
    bottom:-0px;
    width:30px;
    height:60px;
    z-index: 7;
    cursor:pointer;
    opacity:0;
}

.hamburgerInput:checked ~ .hamburgerDiv{
    background-color:transparent;
}

.hamburgerInput:checked ~ .hamburgerDiv:before{
    transform:rotate(45deg);
    top:0;
}

.hamburgerInput:checked ~ .hamburgerDiv:after{
    transform:rotate(-45deg);
    top:0;
}


#hamburgerMenuItems{
    position:fixed;
    width:300px;
    height:80vh;
    background-color:#fff;
    top:70px;
    right:0;
    z-index:10;
    border-radius:5px;
    transition:.3s;
    transform:translateX(100%);
}

.hamburgerInput:checked ~ #hamburgerMenuItems{
    transform:translateX(0%);
}

#topSectionDarkOverlay{
    display:none;
    position:absolute;
    bottom:-100vh;
    width:100vw;
    height:200vh;    
    background-color:rgba(0,0,0,.8);
    z-index:5;
    
}

.hamburgerInput:checked ~ #topSectionDarkOverlay{
    display:block;
    position:absolute;
    top:-20px;
    right:0;
}

.hamburgerMenuItemText{
    font-family:'Nunito';
    font-size:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.2s;
    color:#333;
    text-decoration:none;
}

.hamburgerMenuItemText:hover{
    background-color: hsla(95,30%,30%,.5);
}


/*8888888888888888888888888888888888888888888888888888888888888888888888888888 Hamburger Menu End 888888888888888888888888888888888888 */


#topSection{
    position:relative;
    width:100%;
    display:inline-block;
    max-width:100%;
    overflow:hidden;
    margin:0;
    padding:0;
    min-height:800px;
    max-height:1012px;
}

@media (max-width:699px){
    #topSection{
        background-image: linear-gradient(hsla(95,20%,5%,.7), hsla(95,20%,5%,0), hsla(95,20%,5%,0));
    }
}

#topBackgroundContainer{
    width:55%;
    height:100%;
    overflow-x: hidden;
}

#topBackground{
    position:absolute;
    top:0;
    right:calc(25% - 470px);
    z-index:-1;
    overflow-x: hidden;
}

@media (min-width:1600px){
    #topBackground{
        right:calc(25% - 600px);  /*keep the golfers in the image centered*/
    }
}

@media (max-width:699px){
    #topBackground{
        top:-18%;
    }

    #topBackgroundContainer{
        height:82%;
    }
}


@media (min-width:700px) {
    #headlines {
        background-color: rgba(240, 240, 240, 1);
        display: flex;
        justify-content:center;
        flex-direction: column;
        padding-left:45px;
        min-height:950px;
        width: 50%;
       /* margin-top: 20px;*/
        /* padding-left:40px; */
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        

    }
}
/*
@media (max-width:1299px) {
    #headlines {
        background-color: rgba(240, 240, 240, 0);
        display: flex;
        flex-direction: column;
        width: 50%;
        margin-top: 20px;
        margin-left: 30px;
        border-radius: 10px;
        margin-right: 50px;

    }
}
*/
@media (max-width:699px) {
    #headlines {
        background-color: rgba(240, 240, 240, 0);
        display: flex;
        flex-direction: column;
        justify-content:center;
        width: 90%;
        height:100vh;
        min-height:800px;
        padding-left:4vw;
        border-radius: 10px;
        margin-right: 20px;

    }

}

#topHeadline{
    display:flex;
    flex-direction:column;
    justify-content:center;
    
    font-size:55px;    
    font-family:'Lora';
    font-weight:500;  
    margin:0;
    background-color: rgba(0,0,0,.0);
    border-radius: 10px;
    min-height:950px;
    max-height:1012px;
   
}

@media (max-width:699px){
    #topHeadline{
        justify-content:flex-start;
        margin-top: 260px;
        width:100%;
    }
}

/*
@media (max-width:699px){
    #topHeadline{
      background-color:rgba(0,0,0,.7);
    }
}*/

@keyframes fadeIn{
    0%{
        background-color: rgba(0,0,0,.0);
    }
    100%{
        background-color: rgba(0,0,0,.5);
    }
}

#topHeadlineText{
    text-align:left; 
    background-color:hsla(296, 0%, 10%,.0); 
    color:hsl(300, 20%, 15%);
    line-height:58px;
    width:min(100%,50ch); 
    
    border-radius: 10px;
    position: relative;
    left: -4px;
    animation-name: upAndFadeIn;
    margin-bottom:10px;
    opacity:0;
    animation-delay: .5s;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}





.subHeadlineText{
    color:hsl(300, 20%, 25%);
    font-family:'Nunito';
    font-size:20px;
    width:min(100%,50ch);  
    line-height: 35px;
    padding-bottom:20px;
    

}

@media(max-width:699px) {

    #topHeadlineText {
        color: white;
        margin-bottom:0px;
    

    }

    .subHeadlineText {
        color: #eee;
        font-size: 22px;
        font-weight:bolder;
        border-radius: 10px;
        line-height:28px;
        background-color:hsla(95,20%,5%,.3);
        padding:10px;
        padding-left:0;
        
    }

   
}

@media (max-width:899px){
    .featuresItem{
      background-color:rgba(0,0,0,.7);
    }
}

@keyframes upAndFadeIn{
    0%{
        top: .08em;
        opacity:0;
       
    }
      
    80%{
        top: 0em;
        opacity:1;
        
    }
    100%{
        top: 0em;
        opacity:1;
       
    }
}


#topCallToActionButton {
    height: 75px;
    width: 300px;
    background-color: hsl(300,25%,10%);
    background-image: linear-gradient(45deg, hsl(300,25%,10%),hsl(300,25%,10%), hsl(305,35%,50%),hsl(300,25%,10%), hsl(300,25%,10%));
    background-size:500%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    animation: movingBtnGradient 8s ease-in-out 0.5s infinite both;
}

#topCallToActionButtonText{
    font-size:30px; 
    font-family:Nunito; 
    font-weight:600; 
    color:white; 
    text-align:center;
}

@media(max-width:899px){
    #topCallToActionButton{
        width:min(95%,250px);
    }
}

@media(max-width:699px){
    #topCallToActionButton{
       margin-top:150px;
    }
}

#topCallToActionButton:hover{
    background-image:none;
    background-color: hsl(305,35%,50%);
    transition-duration:.5s;
}


@keyframes movingBtnGradient {
    0% {
      background-position: right;
    }
  
    50% {
      background-position: left;
    }
    100% {
      background-position: right;
    }
  }

  #videoAreaContainer{
    background-image:linear-gradient(45deg,hsl(0,0%,87%),hsl(0,0%,91%)); 
    padding-top:4%; 
    padding-bottom:4%
  }

  #groupOfDots{
    z-index:5; 
    position:absolute;
    top:-150px; 
    left:35px
  }

  @media(max-width:950px){
    #groupOfDots{
        display:none;
    }
  }

  .videoHeadline{
    font-family:'Lora';
    font-weight:bolder;
    font-size:25px;
    color:#444;
    text-align:center;
  }

  #videoArea1Container{
    width:100%; 
    display:flex; 
    flex-direction:row; 
    justify-content:space-around; 
    align-items:end;
    flex-wrap:wrap;
  }

  .videoWidthContainer{
    width:15%;
    position:relative;
  }

 
  .bigNumberVidArea{
    position:absolute; 
    bottom:0; 
    left:-30%; 
    font-family:'Lora'; 
    color:hsl(0,0%,80%); 
    font-size:160px; 
    transform:translate(-0%,-0%);
    margin:0px;
  }

  @media(max-width:1300px){
    .videoWidthContainer{
        width:25%;
        padding-top:10%;
    }
    .bigNumberVidArea{
        left:-10%;
    }
  }

  @media(max-width:950px){
    .videoWidthContainer{
        width:320px;
        
    }
  }


  .videoDescription{
    font-family:'Nunito';
    font-size:18px;
    text-align:center;
    z-index:3;
    position:relative;
  }


  #listOfFeatures{
    width:100%;
    background-image:url('./so-white.png');
    padding-bottom:100px;
    position:relative;
    
  }


  .centeredHeadline{
    text-align:'center';
    font-size:30px;
    font-family: Lora;
    font-weight:600;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    color:#333;
    letter-spacing:.6em;

  }

  .featuresIconWrapper{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    flex-direction:column;
    width: max(25%,200px);
  }

  .featuresIcon{
    height:50px;
    width:50px;
  }
  
  .featureItemHeadline{
    font-family:'Lora';
    font-weight:600;
    font-size:large;
    text-decoration:underline;
    margin-bottom:0;
    text-align: center;
    
  }

  .featuresText{
    text-align:center;
    font-family:'Nunito';
    margin-top:1px;
    color:#333;
    
  }


  /*

@media (max-width:630px){
    #featuresToShowOnPC{
        display:none;
    }
    #featuresToShowOnMobile{
        display:flex;
        flex-direction:column;
        
    }
}

@media (min-width:631px){
    #featuresToShowOnPC{
        display:block;
    }
    #featuresToShowOnMobile{
        display:none;
    }
}




.featuresItem{
    display:flex;
    flex-direction:row;
    padding-left:1vw;
    font-family: 'Nunito', sans-serif;
    align-items:center;
    width:50%;
    background-color:rgba(0,0,0,.5);
    
}
@media (max-width:899px){
    .featuresItem{
      background-color:rgba(0,0,0,.7);
    }
}
@media (max-width:630px){
    .featuresItem{
        width:100%;
      }
}

.featuresText{
    margin-left: .5vw;
    margin-right: 1.5vw;
    color:#fff;
}

.featureIcons{
    width:40px; 
    height:40px; 
    padding-left:20px;
    background-color:'red';
}*/

/* #callToAction{
   background-size:cover;
    background-image: url('./Contour_Line.svg')
}*/



.callToActionHeadline{
    color:hsl(296, 59%, 1007%);
    font-family:'Lora'; 
    font-size: 40px;
    font-weight:500;
    padding-left:20%;
    padding-right:20%;
    margin-top:35px;
    margin-bottom:4px;
        
}


#appStoreButtonArea{
    background-image:linear-gradient(45deg,hsl(95,20%,20%),hsl(90,20%,30%));
    padding-bottom:10%;

}

#callToAction{
width:100%;
text-align:center; 
padding-top:20px; 
padding-bottom:20px;
color:#fafafa;
}

@media(min-width:700px) {
    #appStoreButtons {
        display: flex;
        flex-wrap:wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width:60%;
        margin-left:20%;
        height: auto;
        margin-bottom:30px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        
       /* background-size:cover;
        background-image: url('./Contour_Line.svg')*/
               
    }
}

@media(max-width:699px){
    #appStoreButtons {
        display: flex;
        flex-wrap:wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom:30px;
        width:100%;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
       /* background-size:cover;
        background-image: url('./Contour_Line.svg')*/
        
       
    }
}

.appStoreButtonOuterContainers{
    width:max(50%, 200px);  /*25% side margins until 200px width is reached*/
}

.appStoreButtonContainers{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

}

#googleButton{
    width:100%;
}

#appleButton{
    width:78.5%;
    padding: 12.5%;
}

@media(max-width:699px){
    #appleButton{
        padding:0;
        width: 87.5%;
    }
}



#appleButton:hover{
    transform: scale(1.03, 1.03);
    
}
#googleButton:hover{
    transform: scale(1.03,1.03);
}

/*fade in on scroll*/
.hidden{
    opacity:0;
    transition: all 1s;
    transform: translateY(10%);
    transition-delay:.2s;
}

.show{
    opacity:1;
    transform:translateX(0);
}

@media(prefers-reduced-motion){
    .hidden{
        transition:none;
    }
}