* {
    box-sizing: border-box;
    }


    body {
        font-family: sans-serif;
    }

    #top-padding {
        padding-top: 1%;
    }

    #tableskate-land-anchor {

        float: right;
        padding-right: 55px;


    }


    #tableskate-fill {
        fill:black;
        stroke-width:1;

    }



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

        .the-tableskate-svg{

            width: 60%;
            margin-left: 16%;

        }
        
    }

    

        .the-tableskate-svg {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 35%;
        margin-left: 28%;
        }

        .the-tableskate-svg {
        animation-name: tableskatedivanim;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;


        }


        .the-tableskate-svg:hover {

        animation-play-state: paused;

        }


        @keyframes tableskatedivanim {


            from {
            transform: scale(1);
            }

            to {
            transform: scale(1.01);
            }

        }

        .the-tableskate-svg:hover {
        -ms-transform: scale(0.99);
        /* IE 9
        -webkit-transform: scale(0.99);
        /* Safari 3-8 */
        transform: scale(0.99);
        cursor: pointer;

        }





    .the-about-button{
        padding: 1%;
        text-align:center;
    }


    .the-about-button {
    display: block;
    width: 100%;
    color: blue;
    background-color: white;
    border: none;
    text-align: left;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    }

    .the-about-container {
    display: none;
    width: 100%;
    padding: 50px 0;
    background-color: white;
    margin-top: 20px;
    }



    .about-div {
    width: 50%;
    height: auto;
    padding: 1%;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, .5);
    margin-left: auto;
    margin-right: auto;
    line-height: 28px;

    }

     .the-about-button-mobile{
            display: none;
        }

  

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


        .about-div{

            width: 100%;

        }

        .the-about-button{
            display: none;
        }

        .the-about-button-mobile{
            display: block;
            word-spacing:17px;
            line-height: 3;
            text-align: center;
            padding-bottom: 5%;
            color: blue;
            background-color: white;
            border: none;
            text-decoration: none;
            font-size: 12px;
            cursor: pointer;
            padding-bottom: 20%;

        }

    }


    #wordsOfHope {

        padding:0% 10% 0% 10%; 
        text-align:center;
        /*background-color: red;*/
    }

    

    #privacy-div {

        text-align: right;
        padding-bottom: 0px;


    }

     #privacy-span {

        float: right;
        padding-bottom: 20px;


    }

     #privacy-anchor {

        padding-right: 20px;
    }

    #about-pannel-anchor {
        padding-left: 20px;
    }






        /* The Modal (background) */
        .tableskating-equipment-modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(255, 255, 255, 0.95);
        /* Black w/ opacity */
        text-align: center;
        }
        /*Stroke Model Option Headers */
        .modal-option-headers {
        /*-webkit-text-stroke: 1px gold;*/
        /*background-color: #fff;*/
        font-size: 3em;
        /*text-shadow: 0 0 30px white;*/
        }
        /* Modal Content */
        .tableskating-equipment-modal-on-first-level-content {
        position: relative;
        margin: auto;
        padding: 0;
        width: 20%;
        -webkit-animation-name: animatetoptableskaters;
        -webkit-animation-duration: 0.8s;
        animation-name: animatetoptableskaters;
        animation-duration: 0.8s
        }
        /* Add Animation */
        @-webkit-keyframes animatetoptableskaters {
        from {
        top: -300px;
        opacity: 0
        }
        to {
        top: 0;
        opacity: 1
        }
        }
        @keyframes animatetoptableskaters {
        from {
        top: -300px;
        opacity: 0
        }
        to {
        top: 0;
        opacity: 1
        }
        }
        .tableskating-equipment-modal-on-first-level-content:hover {
        -ms-transform: scale(1.1);
        /* IE 9 */
        -webkit-transform: scale(1.1);
        /* Safari 3-8 */
        transform: scale(1.1);
        }
        #tableskaters-icon-button {
        background: rgb(0, 0, 0);
        /* Fallback color */
        background: rgba(0, 0, 0, 0);
        /* Black background with 0.5 opacity */
        border: none;
        cursor: pointer;
        }
        .tableskaters-icon-size {
        display: block;
        width: 100%;
        }


        /* The tableskating-equipment-modal-close Button */
        .tableskating-equipment-modal-close {
        float: right;
        font-size: 28px;
        font-weight: bold;
        padding: 12%;
        }

        .tableskating-equipment-modal-close:hover,
        .tableskating-equipment-modal-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
        }


        .tableskating-equipment-modal-close:hover {
        -ms-transform: scale(1.1);
        /* IE 9 */
        -webkit-transform: scale(1.1);
        /* Safari 3-8 */
        transform: scale(1.1);
        }


        #idBasedtableskatingEquipmentModalClose {

        position: fixed;
        top: 18%;
        right: 2%;
        font-size: 28px;
        font-weight: bold;

        }


        #idBasedtableskatingEquipmentModalClose:hover,
        #idBasedtableskatingEquipmentModalClose:focus {
        position: fixed;
        text-decoration: none;
        cursor: pointer;
        }





        .tableskating-equipment-button-div {

        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        margin-top:10%;
        margin-bottom: 10%;
        text-align: center;
        font-size: 18px;


        }



        .tableskating-equipment-button-anim-div {

        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 23%;


        animation-name: tableskatingequipmentbuttonanim;
        animation-duration: 1.1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;


        }


        @keyframes tableskatingequipmentbuttonanim {


        from {
        transform: scale(1);
        }

        to {
        transform: scale(1.1);
        }

        }


        .tableskating-equipment-button-anim-div:hover {


        animation-play-state: paused;
        }

        #tableskatingEquipmentButton {
        color: #fff;
        background-color: #ff0000;
        padding:3%;
        border:1px solid #000 ;
        border-radius: 3px;
        font-size: 1em;
        cursor: pointer;
        }

        #tableskatingEquipmentButton:hover {
        -ms-transform: scale(0.99);
        /* IE 9 */
        -webkit-transform: scale(0.99);
        /* Safari 3-8 */
        transform: scale(0.99);
        cursor: pointer;

        }

        .socialmedia {
        		/*font-size: 3vw;*/
        		font-size: 40px;
        		color: #000;
        		letter-spacing: 1vw;
        	}


        @media screen and (max-width: 600px) {
        	.mddt {
        		padding: 10% 0 10% 0;
                /*visibility: hidden;*/
        	}


            #tableskatingEquipmentButton {
                color: #fff;
                background-color: #ff0000;
                padding:10%;
                border:1px solid #000 ;
                border-radius: 3px;
                font-size: 1em;
                cursor: pointer;
            }

        }

        .tableskate-gif-div{

            display: none;
        	cursor: pointer;

        }
        .tableskate-gif{

        	display: block;
        	margin-left: auto;
        	margin-right: auto;
        	width: 50%;


        }



        @media screen and (max-width: 600px) {
            .tableskate-gif {
                width: 100%;
                margin-left: -23%;



            }


        .extra-centered-for-mobile {
          padding-right: 0%;
        }

        @media only screen and (max-width: 600px) {
          .extra-centered-for-mobile{
          padding-right: 30%;

          }

          .modal-option-headers{
            font-size: 2em;
            /*padding-right: 30%;*/

          }

          
        }

        .extra-scrolling-for-mobile {
          display: none;
        }

        @media only screen and (max-width: 600px) {
          .extra-scrolling-for-mobile{
              display: block;
              padding: 25%;

          }

        }