/* HEADER */

	#main_header {	
        display: block; 
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 10;
        transition: height 500ms, background 500ms;
        }

         #main_header.header_border_bottom {	
            border-bottom: 1px solid #ddd !important;
            }


        #main_header.header_big {
            height: 170px;		
            border-bottom: 1px solid white;
            background-color: white;
            }

        #main_header.header_small {
            height: 80px;	
            background-color: rgba(255, 255, 255, 0.95);
            /* background-color: rgba(51, 51, 51, 0.85); */
            /* background-color: rgba(253, 66, 57, 0.95); */
            }


    /* HEADER - TOP */

        #main_header_box {
            height: 100%;
            margin: 0px auto;
            padding: 0px 20px;
            position: relative;
            text-transform: uppercase;
			font-family: 'Raleway', 'Helvetica Neue', 'Myriad Pro', calibri, arial, sans-serif;
			font-size: 18px;
			font-style: normal;
			font-weight: 700;
			text-transform: uppercase;
			color: #ccc;
			line-height: 0px;
            }
 
            #main_header_box .genericon {
                width: auto;
                height: auto;
                }

            #header_box_right {
                width: 300px;
                position: absolute;
                right: 20px;
                bottom: 0px;
                width: 300px;
                height: 80px;
                padding-top: 28px;
                }
								
			/* HEADER - SEARCH */
			
				#header_search   {  position: relative;
                                    display: inline-block;
                                    float: right;
                                    margin-left: 30px;
                                    height: 24px;   }

                                    #header_search form         {   line-height: 24px;  }

                                    #header_search .genericon   {   font-size: 24px !important; }

                    #header_search input[type="search"] {
                        top: 0px;
                        right: 0px;
                        height: 24px;
                        width: 24px;
                        color: transparent;    
                        border: 0px;
                        z-index: 2;
                        border-bottom: 1px solid;
                        border-color: transparent;
                        background-color: transparent;
                        content: '\f400';
                        padding: 0px;
                        -webkit-transition: all .5s;
	                    -moz-transition: all .5s;
	                    transition: all .5s;
                        -webkit-appearance: textfield;
                        -webkit-box-sizing: content-box;
                        }

                        input::-webkit-search-decoration,
                        input::-webkit-search-cancel-button {
                            display: none; 
                            }

                    #header_search label {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        z-index: 10; 
                        }

                        #header_search label:hover {
                            color: #0077c8;
                            }

                    #header_search input[type="search"]:hover {
                        border-color: white;
                        }

                    #header_search input[type="search"]:focus, #header_#search input[type="search"]:active {
                        width: 158px;
                        color: #0077c8;
                        font-weight: 400;
                        text-transform: uppercase;
                        margin-left: 34px;
                        border-color: #0077c8;
                        font-size: 16px; 
                        }

                        #header_search input:focus + label.genericon-search , #header_#search input:active + label.genericon-search {
                            left: 0px;
                            color: #0077c8;
                            }

			/* HEADER - TWITTER */

                a.header_twitter:hover      {   color: #55ACEE;    }

			/* HEADER - HOME */

                a.header_home               {   display: none;  }

                a.header_home:hover         {   color: #FD4239; }

			/* HEADER - BUTTON */

                a.header_button     {   margin-left: 30px; 
                                        position: relative;
                                        float: right;   }

                a.header_button .genericon {   font-size: 24px !important; }

                #st-trigger-effects {
                    position: relative;
                    float: right;
                    margin-left: 30px;
                    }

                    #st-trigger-effects button {
                        border: 0px;
                        text-align: left;
                        padding: 0px;
                        margin: 0px;
                        cursor: pointer;
                        text-indent: 0;
                        display: block;

                        background-color: transparent;
                        }

                        button.menu_button span.genericon.genericon-menu {
                            font-size: 24px !important;
                            }

                        #st-trigger-effects button:hover {
                            color: #555;
                            }

                    .st-menu-open #st-trigger-effects button { 
                        display: block;
                        }

                        .button_close {
                            display: none; 
                            border: 0px;
                            }

                    .st-menu-open .button_open {
                        display: none; 
                        border: 0px;
                        }
                        
                    .st-menu-open .button_close {
                        display: block;
                        color: #555;
                        cursor: pointer;

                        }

                        .st-menu-open .button_close .genericon {
                            font-size: 40px !important;
                            line-height: 24px;
                            margin-right: 11px;
                            margin-left: -9px;
                            width: 22px !important;
                            height: 22px !important;
                            border: 0px;
                            }

                #main_header_box,
                #st-trigger-effects button, 
                a.header_button {
                    color: #ccc;
                    }

            /* HEADER - FISH@BAT LOGO - MARLINS HOME RUN FEATURE */

                #header_logo    {   height: 100%;
                                    width: 340px;
                                    position: relative;
                                    bottom: 0px;   }

                                    .header_big #header_logo    {   margin: 0px auto;   }

                                    .header_small #header_logo  {   margin: 0px 0px;    }

                                    #header_logo a#homer        {   height: 100%;   }

                                    #header_logo a#homer span   {   font-weight: 800;   }


                                                                    .header_big #header_logo a#homer        {   font-size: 64px;    }

                                                                    .header_small #header_logo a#homer      {   font-size: 48px;    }

                                                                    .header_big .header_logo_text           {   position: absolute; 
                                                                                                                bottom: 20px;
                                                                                                                color: #333;
                                                                                                                line-height: 100%;  }

                                                                    .header_small .header_logo_text         {   position: relative;  
                                                                                                                height: 80px;
                                                                                                                line-height: 80px;
                                                                                                                color: #333;    }

                                                                    .header_big a .head_logo_text_fish      {   left: -4px; }

                                                                    .header_small a .head_logo_text_fish    {   margin-left: 1px;   }


                                                                    .header_big a .head_logo_text_at        {   left: 155px;
                                                                                                                bottom: 30px;
                                                                                                                z-index: 8;
                                                                                                                color: white;
                                                                                                                font-size: 54px;
                                                                                                                font-weight: 800; }

                                                                    .header_small .head_logo_text_at        {   bottom: 0px; 
                                                                                                                color: #fd4239;
                                                                                                                width: auto;
                                                                                                                margin: 0px;
                                                                                                                padding: 0px;
                                                                                                                left: -10px;
                                                                                                                bottom: 5px;
                                                                                                                font-size: 48px;
                                                                                                                font-weight: 800;   }

                                                                    .header_big a .head_logo_text_bat       {   right: 0px;    }

                                                                    .header_small a .head_logo_text_bat     {   left: -20px;    }


                                                                    .header_big img.homer                   {   position: absolute;
                                                                                                                bottom: 19px;
                                                                                                                left: 132px;
                                                                                                                z-index: 5;
                                                                                                                height: 103px;  }

                                                                    .header_small img.homer                 {   display: none;  }

                                                                    .header_big img#fishy                   {   position: absolute;
                                                                                                                bottom: 36px;
                                                                                                                left: 132px;
                                                                                                                padding: 0px 9px;
                                                                                                                z-index: 2; }

                                                                    .header_small img#fishy                 {   display: none;  }


                    .spin {            
                        -webkit-animation-name: spin;
                        -webkit-animation-duration: 3000ms;
                        -webkit-animation-iteration-count: 3;
                        -webkit-animation-timing-function: ease-in-out;
                        -moz-animation-name: spin;
                        -moz-animation-duration: 3000ms;
                        -moz-animation-iteration-count: 3;
                        -moz-animation-timing-function: ease-in-out;
                        -ms-animation-name: spin;
                        -ms-animation-duration: 3000ms;
                        -ms-animation-iteration-count: 3;
                        -ms-animation-timing-function: ease-in-out;

                        animation-name: spin;
                        animation-duration: 3000ms;
                        animation-iteration-count: 3;
                        animation-timing-function: ease-in-out;
                        }
                        @-ms-keyframes spin {
                            from { -ms-transform: rotate(0deg); }
                            to { -ms-transform: rotate(360deg); }
                        }
                        @-moz-keyframes spin {
                            from { -moz-transform: rotate(0deg); }
                            to { -moz-transform: rotate(360deg); }
                        }
                        @-webkit-keyframes spin {
                            from { -webkit-transform: rotate(0deg); }
                            to { -webkit-transform: rotate(360deg); }
                        }
                        @keyframes spin {
                            from {
                                transform:rotate(0deg);
                            }
                            to {
                                transform:rotate(360deg);
                            }
                        }