.wrappermodal { 

    padding: 10px;
        text-align: center;
margin: auto;
height: auto;
min-height: 100px;
    max-width: 950px;
        
    vertical-align: middle;
     display:flex;
flex-direction: row;
  justify-content: center;
  align-items: center;


}

    
.wrappermodal div {
   width: 100%; 
 
   padding: 10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


.wrappervenue div {
   width: 100%; 
 
   padding: 10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.wrappermodal .sociallogo { 
 margin: 0px;
    float:left;
    padding: 0px;
  
margin-left: -10px;
    flex-direction: row;
      order: 0;
  flex: 1 1 auto;
  align-self: left;;
}
.wrappervenue .sociallogo { 
 margin: 0px;
    float:left;
    padding: 0px;
  
margin-left: -10px;
    flex-direction: row;
      order: 0;
  flex: 1 1 auto;
  align-self: left;;
}
.sociallogo2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  height:100%;
}
.tiktokbutton {
 width:33px;
    height: 33px;
    background-color: #D28D6C;
    display: inline-block;
    max-width: 33px;
    margin-right:10px;
    border-radius: 50%;
    background-image: url("../img/tiktok_icon1.png");
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    cursor: pointer;
}
.tiktokbutton:hover {

    background-color: #312E41;
   
}
.tiktokbutton2 {
 width:26px;
    height: 26px;
    background-color: #D28D6C;
    display: inline-block;
    max-width: 26px;
    margin-right:10px;
    border-radius: 50%;
    background-image: url("../img/tiktok_icon1.png");
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    cursor: pointer;
}
.tiktokbutton2:hover {

    background-color: #312E41;
   
}

@media screen and (max-width: 600px) {
    
   
            .wrappermodal  {
flex-direction: column;
            margin: 0px;
            padding: 0px;
}
    .wrappermodal div {
   width: 100%; 
 display: flex;
        flex-direction: column;
   padding: 10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
  
    
        .wrappervenue  {
flex-direction: column;
            margin: 20px;
            padding: 0px;
}
    .wrappervenue div {
   width: 100%; 
 display: flex;
        flex-direction: column;
   padding: 10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
    
   #one { width: 100%; float: center; }
   #two { width:100%; float: center;}
    
    #one img{ 

    max-width:180px;
  

}
    
}


 




       /* The Modal (background) */
        .modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 50;
            /* Sit on top */
            padding: 30px;
            /* Location of the box */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.7);
            /* Black w/ opacity */
            overflow: hidden;
              align-items: flex-start;
   
            text-align: center;
          
        }

        /* Modal Content */
        .modal-content {

            max-height: 100%;
            overflow: hidden;

            background-color:#F7EDEA;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
         max-width: 700px;
            width:100%;
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.9s;
            animation-name: animatetop;
            animation-duration: 0.9s;
            border-radius: 0px;
 position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  text-align: center;

         
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
            from {
           
                opacity: 0
            }

            to {
               
                opacity: 1
            }
        }

        @keyframes animatetop {
            from {
       
                opacity: 0
            }

            to {
               
                opacity: 1
            }
        }
        .modal-header {
            padding: 2px 16px;
            text-align: right;
            position: relative;
    display: flex;
    justify-content: flex-start;
            min-height: 30px;
            border:0px;
   
        }

        /* The Close Button */
        .close {
            text-align: center;
            color: #2C2647;
            font-size: 35px;
            vertical-align: middle;
            font-weight: bold;
           position: absolute;
            border-radius: 50%;


    right: 0;

        }

        .close:hover,
        .close:focus {
            color:#D28D6C;
            text-decoration: none;
            cursor: pointer;
      
        }



        .modal-body {
            padding: 2px 16px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }