/* If the screen is wider than 320px */
@media screen and (min-width:0px) {
        @font-face {
                font-family: liberator-heavy;
                src: url(liberator-heavy.ttf);
            } 


            @font-face {
                font-family: cour;
                src: url(cour.ttf);
            } 
    
          /* Style inputs with type="text", select elements and textareas */
            input[type=text], select, textarea {
                width: 100%; /* Full width */
                padding: 15px; /* Some padding */  
                border: 1px solid black; /* Gray border */
                border-radius: 4px; /* Rounded borders */
                box-sizing: border-box; /* Make sure that padding and width stays in place */
                margin-top: 4px; /* Add a top margin */
                margin-bottom: 10px; /* Bottom margin */
                resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
                font-family: cour;
                font-size: 15px;
                background-color: transparent;
                color: black;
                //z-index: 99;


            }

            #message {

                    height: 120px !important;
            }

            /* Style the submit button with a specific background color etc */
            input[type=submit] {
                background-color: black;
                color: white;
                padding: 8px 11px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-family: liberator-heavy;
                font-size: 20px;
                //z-index: 99;
            }

            /* When moving the mouse over the submit button, add a darker green color */
            input[type=submit]:hover {
                background-color: #E1E1E1;
                font-family: liberator-heavy;
                //z-index: 99;
            }

            /* Add a background color and some padding around the form */
            .container {
                border-radius: 5px;
                background-color: transparent;
                //padding: 20px;
                font-family: cour;
                margin-top: 15%;
                padding-right: 5%;
                padding-left: 5%;
                color: black;
                font-size: 15px;
                z-index: 10;
                position: absolute;
            }
    
             #contact_hype_container {
                z-index: 1; 

            }
    
    
            html {
                    height:100%;
                    z-index: 0;
                    }
                    body {
                        background-color:#000000;
                        margin:0;
                        height:100%;
                        z-index: 0;
                    }
    
    #myCarousel {
                //z-index: 80;
                //border: 1px solid red;
                //width: 100%;
                //height: 100%;
                position: fixed;
                align-content: center;
                margin-left: 0;
                margin-right: 0;
                bottom: 2%;
                top: 20%;

                display: inline-block;
                vertical-align: middle;
            }



            .carousel-caption {

                //border: 1px solid red;
                //margin-bottom: -70px;
                font-size: 10px;
                font-family: cour;
                color: black;
                bottom: 0!important;
                padding-bottom: -5!important;
                //z-index: 90;
                text-align: center;
                
            }
    
    
            .carousel-control{

                display: none;
            }
    
    
    .glyphicon glyphicon-chevron-left {
        z-index: -10;
    }
    
    
    .glyphicon glyphicon-chevron-right .right carousel-control {
        z-index: -10;
    }
    
        #thanks {
             font-family: cour;
                position: fixed;
                text-align: center;
                left: 10%;
                right: 10%;
                top: 40%;
                z-index: 10;

            }
    
      .fixed {
        position: fixed !important;
        z-index: 99;
    }



}

/* If the screen is wider than 768px */
@media screen and (min-width:768px) {
        @font-face {
                font-family: liberator-heavy;
                src: url(liberator-heavy.ttf);
            } 


            @font-face {
                font-family: cour;
                src: url(cour.ttf);
            } 
    
             /* Add a background color and some padding around the form */
            .container {
                border-radius: 5px;
                background-color: transparent;
                //padding: 20px;
                font-family: cour;
                margin-top: 20%;
                padding-right: 10%;
                padding-left: 10%;
                color: black;
                font-size: 15px;
                z-index: 10;
                position: absolute;
            }
            
                #message {

                    height: 150px !important;
            }
    
                 #thanks {
             font-family: cour;
                position: fixed;
                text-align: center;
                left: 15%;
                right: 15%;
                top: 50%;
                z-index: 10;

            }

}

/* If the screen is wider than 1024px */
@media screen and (min-width:1024px) {
        @font-face {
                font-family: liberator-heavy;
                src: url(liberator-heavy.ttf);
            } 


            @font-face {
                font-family: cour;
                src: url(cour.ttf);
            } 
    
                  /* Add a background color and some padding around the form */
            .container {
                border-radius: 5px;
                background-color: transparent;
                //padding: 20px;
                font-family: cour;
                margin-top: 15%;
                padding-right: 15%;
                padding-left: 15%;
                color: black;
                font-size: 20px;
                z-index: 10;
                position: absolute;
            }
    
            #message {

                    height: 200px !important;
            }
    
            #thanks {
             font-family: cour;
                position: fixed;
                text-align: center;
                left: 15%;
                right: 15%;
                top: 50%;
                z-index: 10;

            }
    
          #myCarousel {
               z-index: 80;
                position: fixed;
                left: 50%;
                top: 45%;
                transform: translate(-50%, -50%);
                  width: 63%;
                  height: auto;
                cursor: -webkit-grab; cursor: -moz-grab;
 
 
            }
    
    
    #myCarousel:active {
         cursor: -webkit-grabbing; cursor: -moz-grabbing;

    }
    
    
      .carousel-caption {

                //border: 1px solid red;
                //margin-bottom: -70px;
                font-size: 12px;
                font-family: cour;
                color: black;
                width: 100%;
                bottom: 5%!important;
                padding-bottom: 0!important;
                //z-index: 90;
                position: relative;
                text-align: center;
            }
    
    
    #work_hype_container {
        
        z-index: 0;
        position: absolute;
    }
    
    .glyphicon glyphicon-chevron-right {
        z-index: 100;
    }
    
    .glyphicon glyphicon-chevron-left {
        z-index: 100;
    }
    
     .carousel-control{

                display: inline-block;
           
            }

}


/* If the screen is wider than 1200px */
@media screen and (min-width:1200px) {
 
            
            @font-face {
                font-family: liberator-heavy;
                src: url(liberator-heavy.ttf);
            } 


            @font-face {
                font-family: cour;
                src: url(cour.ttf);
            } 


            #text-box {
                padding-left: 15%;
                padding-right: 15%;
                text-align:justify;
                text-justify: inter-word;
                text-align-last: center;
                //padding-bottom: 100px;
                position: absolute;
                top: 15%;
                font-size: 20px;
                color: black;
                font-family: cour;
                padding-bottom: 10%
            }

            #otter-image {
                        margin-right: 33%; 
                        position: absolute;
                        display: block;
                        width: 500px;
                        height: 380px;
                        top: 42%;
                        background-image: url(website_images/Otter_Surfboards_Ben_Cook_Surfboard_first_surf.png);
                        background-repeat: no-repeat;
                        background-size: 500px 380px;
                        left: 50%;
                        transform: translate(-50%, 2%); 
            }


            //p {
                line-height: 30px;
            }

            /* Style inputs with type="text", select elements and textareas */
            input[type=text], select, textarea {
                width: 100%; /* Full width */
                padding: 15px; /* Some padding */  
                border: 1px solid black; /* Gray border */
                border-radius: 4px; /* Rounded borders */
                box-sizing: border-box; /* Make sure that padding and width stays in place */
                margin-top: 6px; /* Add a top margin */
                margin-bottom: 16px; /* Bottom margin */
                resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
                font-family: cour;
                font-size: 20px;
                background-color: transparent;
                color: black;
                //z-index: 99;


            }


            /* Style the submit button with a specific background color etc */
            input[type=submit] {
                background-color: black;
                color: white;
                padding: 12px 20px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-family: liberator-heavy;
                font-size: 25px;
                //z-index: 99;
            }

            /* When moving the mouse over the submit button, add a darker green color */
            input[type=submit]:hover {
                background-color: #E1E1E1;
                font-family: liberator-heavy;
                //z-index: 99;
            }

            /* Add a background color and some padding around the form */
            .container {
                border-radius: 5px;
                background-color: transparent;
                //padding: 20px;
                font-family: cour;
                margin-top: 10%;
                padding-right: 20%;
                padding-left: 20%;
                color: black;
                font-size: 20px;
                //z-index: 10;
                position: absolute;
            }
    
              #message {

                    height: 200px !important;
            }


            h1 {

                font-family: liberator-heavy;
                color: black;
                font-size: 30px;
                z-index: 10;
                position: absolute;
                top: 50px;
                text-align: center;
                left: 40%;
                right: 40%;
                border: 1px red solid;


            }


            //.container carousel slide{
                z-index: 0;
                //border: 1px solid red;
                padding-top: 50%;
               padding-left: 50%;
               width: 800px;
               height: 600px;
               margin-top: -300px; /* Half the height */
               margin-left: -400px; /* Half the width */
                position: fixed;
            }

            #myCarousel {
               z-index: 80;
                position: fixed;
                bottom: -10%;
                    margin-bottom: 5%;
                transform: translate(-50%, -50%);
                  //height: 100%;
                  width: auto;
                cursor: -webkit-grab; cursor: -moz-grab;
 
            }
    
    
    #myCarousel:active {
         cursor: -webkit-grabbing; cursor: -moz-grabbing;
        

    }
    
 



            .carousel-caption {

                //border: 1px solid red;
                //margin-bottom: -70px;
                font-size: 12px;
                font-family: cour;
                color: black;
                width: 100%;
                bottom: 5%!important;
                padding-bottom: 0!important;
                //z-index: 90;
                position: relative;
                text-align: center;
            }

            .right carousel-control{

                background-color: transparent;
            }

            #thanks {
             font-family: cour;
                position: fixed;
                text-align: center;
                left: 15%;
                right: 15%;
                top: 50%;
                z-index: 10;

            }


            .carousel-image {
                margin-bottom: -5%;
                width: 100%; 

            }



       

    #phone_hype_container {

        z-index: 2;
    }


    #contact_hype_container {
       z-index: 2; 

    }
    
    #work_hype_container {
        
        z-index: 0;
        position: absolute;
    
    }

       .glyphicon glyphicon-chevron-right {
        z-index: 100;
    }
    
    .glyphicon glyphicon-chevron-left {
        z-index: 100;
        
    }
    
       .carousel-control{

                display: inline-block;
            }
    
    .carousel-indicators {
         position: absolute;
        //left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        
    }

         img .item  {
            user-drag: none; 
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
    }