/*  this contains css styling for the index home page of Table Memories */


.carousel{
            height:75px;
            text-align:center;
            width:100%;
        }
        .carousel__button div{
    width:12px;
}
.carousel__track{
    width:100%;
}
.carousel__track-container{
    width:100%;
}
.carousel__image {
    width:100%;
    height:100%;
    background-color:#b39800;
    font-size:50px;
    font-weight:500;
    text-transform: uppercase;
    -webkit-text-stroke: 1px white;
font-weight:1000;
    font-stretch: extra-expanded;
}
            #image1{
               
                height:500px;
                text-align:center;
                display:inline-block;
                border-color:white;
                border-radius:800px;
                opacity:1;
                 margin-top:175px;
            }
            #image2{
                width:35%;
                height:500px;
                text-align:center;
                display:inline-block;
                margin-top:150px;
                
            }
            #image3{
                width:35%;
                height:500px;
                text-align:center;
                display:inline-block;
                margin-top:200px;
                
            }
            .nav-scrolled{
                height:30px;
                transition:background 350ms ease-in-out;
                
            }
            .nav-scrolled img{
                display:none;
                transition:background 350ms ease-in-out;
            }
            .nav-scrolled #login-button{
                font-size:11;
                font-weight:400;
                padding:0.5%;
                border-radius:13px;
                top:16px;
                transition:background 350ms ease-in-out;
            }
            .nav-scrolled h2{
                display:none;
                transition: 0.25s ease-out;
            }
            .nav-scrolled h4{
                display:none;
                transition: 0.25s ease-out;
            }
            .section-1{
                height:900px;
                width:100%;
                text-align:center;
                background-image: url('wedding pic1.jpg');
                background-size:cover;
                
            }
            .back-image{
                height:100%;
                background-color:silver;
                opacity:0.7;
               
            }
            .section-2{
                min-height:900px;
                height:auto;
                width:100%;
                text-align:center;
                background-color:grey;
                color:white;
            }
            .section-3{
                height:900px;
                width:100%;
                text-align:center;
                background-color:#e6e6e6;
                
            }
            .section-4{
                height:1300px;
                width:100%;
                text-align:center;
                background-color:white;
                display:grid;
                grid-template-columns: 50% 50%;
                
            }
            .text{
                width:250px;
                display:inline-block;
                opacity:1;
                font-size:25px;
                font-weight:600;
                font-family: "Times New Roman", Times, serif;
                position:relative;
                bottom: 170px;
                color:#b39800;
            }
            .top-section{
                height:80px;
                width:550%;
                background-color:#b39800;
                overflow: hidden;
                
                
            }
            
            .fade-in{
                opacity:0;
                transition: opacity 550ms ease-in;
            }
            .fade-in.appear{
                opacity:1;
            }
            .fade-in2{
                opacity:0;
                transition-delay: 2s;
                transition: opacity 2s ease-in;
            }
            .fade-in2.appear{
                opacity:1;
            }
            .fade-in3{
                opacity:0;
                transition-delay: 6s;
                transition: opacity 2s ease-in;
            }
            .fade-in3.appear{
                opacity:1;
            }
            .fade-in4{
                opacity:0;
                transition-delay: 10s ;
                transition: opacity 2s ease-in;
            }
            .fade-in4.appear{
                opacity:1;
            }
            .left{
                transform: translateX(-70%);
            }
            .right{
                transform: translateX(70%);
            }
            .left,
            .right{
               transition: opacity 350ms ease-in, transform 400ms ease-in; 
               opacity:0;
            }
            .left.appear,
            .right.appear{
               transform: translateX( 0);
               opacity:1;
            }
            #last-parg{
                right:3%;
            }
            #first-parg{
                width:400px;
                color:black; 
                bottom:0px; 
                opacity:1;
            }
            .top-section div{
                text-align:center;
                font-size:45px;
                text-transform: uppercase;
                -webkit-text-stroke: 1px white;
                font-weight:1000;
                font-stretch: extra-expanded;
                margin-top:0px;
                margin-bottom:0px;
                padding-top:15px;
                display:inline-block;
                width:600px;
            }
            
            .section-6{
                width:100%;
                height:500px;
                text-align:center;
                background-color:#668cff;
                background-image: #668cff;
                display:grid;
                grid-template-columns:auto auto; 
            }
            .sports-text{
                margin-top:120px;
                width:38%;
                margin-left:40%;
                margin-right:20%;
                padding:1%;
                color:white;
                text-shadow: 2px 2px 4px gray;
                font-family: verdana, arial, helvetica, sans-serif;
                font-variant-caps: petite-caps;
                font-size:22px;
                font-weight:bold;
                grid:1/2;
            }
            .sports-pic{
                grid:2/2;
            }
            #sports{
                margin-top:100px;
                min-width:200px;
                width:60%;
                margin-left:5%;
                margin-right:auto;
                
            }
           

@media only screen and (min-width: 850px){
     /*keyframe animations*/
  .first {
 -webkit-animation: bannermove 20s linear infinite;
    -moz-animation: bannermove 20s linear infinite;
     -ms-animation: bannermove 20s linear infinite;
      -o-animation: bannermove 20s linear infinite;
         animation: bannermove 20s linear infinite;
}   
 
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2325px;
 }
 
}
 
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2325px;
 }
 
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2325px;
 }
 
}
 
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2325px;
 }
 
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2325px;
 }
 
}
}
            
            @media only screen and (max-width: 850px){
                #image1{
                    height:300px;
                    margin-top:40px;
                }
                #image2{
                    margin-top:40px;
                    width:85%;
                height:300px;
                }
                #image3{
                width:85%;
                height:300px;
                text-align:center;
                display:inline-block;
                margin-top:40px;
                
            }
            .section-6{
                display:inline-block;
                min-height:500px;
                height:auto;
           /*     display:grid;
                grid-template-rows:auto auto; */
            }
            .sports-text{
                margin-top:40px;
                width:80%;
                margin-left:10%;
                margin-right:10%;
            }
            .sports-pic{
                grid:2/2;
            }
            #sports{
                margin-top:100px;
                min-width:20px;
                width:100%;
                margin-left:0%;
                margin-right:auto;
                
            }
            .bottom{
                bottom:50px;
                right:0px;
            }
            .carousel{
            height:50px;
            }
            .carousel__image{
                font-size:25px;
            }
            .top-section{
                height:10px;
            }
            .videos{
                width:95%;
               height:200px;
                display:inline-block;
            }
            #other-box{
                display:inline-block;
            }
            #reviews-box{
                display:none;
                width:100%;
            }
            #reviews-box p{
                width:100%;
                height:100px;
                display:inline-block;
            }
                .text{
                    bottom:0px;
                    font-size:23px;
                    font-weight:600;
                }
                .section-2{
                    min-height:650px;
                    height:auto;
                }
                .section-1{
                    height:530px;
                }
                .section-3{
                    height:500px;
                }
                .section-4{
                    min-height:1600px;
                    display:inline-block;
                }
                #last-parg{
                    right:0px;
                }
                #first-parg{
                    width:300px;
                }
                .left{
                transform: translateX(0%);
            }
            .right{
                transform: translateX(0%);
            }
            }