﻿#Featured-Parks{
	clear: both;
	width: 100%;
	max-width: 1064px;
	margin: 0px auto;
	padding: 0px 20px 20px 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}	
    #Featured-Parks h2{
        font-family: 'Source Sans Pro', helvetica,arial,verdana,sans-serif;
	    font-weight: 600;
	    font-size: 36px;
	    line-height: 44px;
	    text-transform: lowercase;
        color: #1a83ab;
        border-bottom: 6px solid #1a83ab;
        text-align: left;
    }
    #Featured-Parks div.tiles {
    }
	    #Featured-Parks div.tiles div.tile{
            position: relative;
		    float: left;
		    width: 50%;
		    box-sizing: border-box;
	    }
            #Featured-Parks div.tiles div.tile:nth-child(2n){
		        padding: 6px 0px 0px 3px;

            }	
            #Featured-Parks div.tiles div.tile:nth-child(2n+1){
		        padding: 6px 3px 0px 0px;

            }			
		    #Featured-Parks div.tiles div.tile div.wrap{
			    position: relative;
			    width: 100%;
                padding-bottom: 99px;
			    cursor: pointer;
		    }				
			    #Featured-Parks div.tiles div.tile div.wrap div.images{
				    width: 100%;
                    background-color: #cecece;
				    overflow: hidden;
			    }					
				    #Featured-Parks div.tiles div.tile div.wrap div.images div.container{
					    position: relative;
					    width: 100%;
					    height: 0px;
					    padding-bottom: 40%;
					    overflow: hidden;
				    }					
					    #Featured-Parks div.tiles div.tile div.wrap div.images div.container div{
						    display: none;
						    position: absolute;
						    top: 0px;
						    bottom: 0px;
						    left: 0px;
						    right: 0px;
						    background-position: center center;
						    background-repeat: no-repeat;
						    background-size: cover;
					    }	
					    #Featured-Parks div.tiles div.tile div.wrap div.images div.container div.current{
						    display: block;
						    z-index: 3;
					    }
					    #Featured-Parks div.tiles div.tile div.wrap div.images div.container div.next{
						    display: block;
						    z-index: 2;
					    }
				    #Featured-Parks div.tiles div.tile div.wrap div.images div.container span{
					    z-index: 4;
					    position: absolute;
					    top:-3px;
					    right: -3px;
					    width: 60px;
					    height: 60px;
					    border: 3px solid #ffffff;
					    background-position: center center;
					    background-repeat: no-repeat;
					    background-size: contain;
				    }
					    #Featured-Parks div.tiles div.tile div.wrap div.images div.container span.northwest{
						    background-image: url(/images/regions/Florida-Northwest.svg);	
                            background-color: #8eb755;					
					    }
					    #Featured-Parks div.tiles div.tile div.wrap div.images div.container span.north{
						    background-image: url(/images/regions/Florida-North.svg);		
                            background-color: #d56f66;										
					    }
					    #Featured-Parks div.tiles div.tile div.wrap div.images div.container span.central{
						    background-image: url(/images/regions/Florida-Central.svg);		
                            background-color: #eb923c;										
					    }
					    #Featured-Parks div.tiles div.tile div.wrap div.images div.container span.south{
						    background-image: url(/images/regions/Florida-South.svg);		
                            background-color: #1ac6d4;										
					    }

		    #Featured-Parks div.tiles div.tile div.wrap div.details{
			    z-index:5;
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                margin-top: 40%;
			    padding: 4px 12px 15px 12px;
                background-color: #ffffff;
                overflow: hidden;
                border-bottom: 3px solid #8eb755;
			    -moz-box-sizing: border-box;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
		    }
                #Featured-Parks div.tiles div.tile div.wrap div.details div{
                    height: 80px;
                    max-height: 80px;
			        overflow: hidden;

                    -webkit-transition: max-height 1000ms;
				    -moz-transition: max-height 1000ms;
				    -o-transition: max-height 1000ms;
				    -ms-transition: max-height 1000ms;
				    transition: max-height 1000ms;
                }
                #Featured-Parks div.tiles div.tile div.wrap:hover div.details{
                    z-index: 6;
                    -webkit-box-shadow: 0px 6px 3px -2px #888;
                    box-shadow: 0px 6px 3px -2px #888;
                }
                #Featured-Parks div.tiles div.tile div.wrap:hover div.details div {
                    height: auto;
                    max-height: 500px;

                    -webkit-transition: max-height 1000ms;
				    -moz-transition: max-height 1000ms;
				    -o-transition: max-height 1000ms;
				    -ms-transition: max-height 1000ms;
				    transition: max-height 1000ms;
                }
                #Featured-Parks div.tiles div.tile.northwest div.wrap div.details{
                    border-bottom: 3px solid #8eb755;
                }
                #Featured-Parks div.tiles div.tile.north div.wrap div.details{
                    border-bottom: 3px solid #d56f66;
                }
                #Featured-Parks div.tiles div.tile.central div.wrap div.details{
                    border-bottom: 3px solid #eb923c;
                }
                #Featured-Parks div.tiles div.tile.south div.wrap div.details{
                    border-bottom: 3px solid #1ac6d4;
                }

			    #Featured-Parks div.tiles div.tile div.wrap div.details h3{
				    height: 32px;
                    font-family: 'Source Sans Pro', helvetica,arial,verdana,sans-serif;
				    font-style: normal;
				    font-weight: 600;
				    font-size: 22px;
				    line-height: 32px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
			    }
				    #Featured-Parks div.tiles div.tile div.wrap div.details h3 a{
                        color: #7b756c;
					    text-decoration: none;
				    }
			    #Featured-Parks div.tiles div.tile div.wrap div.details p{
				    padding-bottom: 16px;
                    font-family: helvetica,arial,verdana,sans-serif;
				    font-weight: normal;
				    font-size: 12px;
				    line-height: 16px;
                    color: #7b756c;
                    overflow: hidden;
			    }                
                    #Featured-Parks div.tiles div.tile div.wrap div.details p.amenities,
                    #Featured-Parks div.tiles div.tile div.wrap div.details p.features{
                    padding: 8px;
                    color:#ffffff;
                    text-shadow: 0px 0px 2px rgba(0,0,0,.5);
                    background-color: #1a83ab;
                }

			    #Featured-Parks div.tiles div.tile div.wrap a.button{
				    z-index: 12;
                    position: absolute;
				    top: 50%;
				    right: 20px;
				    float: right;
				    padding: 0px 12px 0px 12px;
                    margin-top: -15px;
                    
                    font-size: 18px;
				    line-height: 30px;
				    font-family: 'Source Sans Pro', helvetica,arial,verdana,sans-serif;
				    font-style: normal;
				    font-weight: 700;
				    color: #ffffff;
				    text-decoration: none;
                    			
                    background-color: #1a83ab;
                    background-position: -20px center;
                    background-size: 16px 16px;
                    background-repeat: no-repeat;
                    background-image: url(/images/common/right-arrow-go.png);

				    -moz-border-radius: 3px;
				    -webkit-border-radius: 3px;
				    border-radius: 3px;
                    opacity:0;

				     -webkit-transition: padding 300ms, opacity 300ms;
				    -moz-transition: padding 300ms, opacity 300ms;
				    -o-transition: padding 300ms, opacity 300ms;
				    -ms-transition: padding 300ms, opacity 300ms;
				    transition: padding 300ms, opacity 300ms;
				    
			    }
				    #Featured-Parks div.tiles div.tile div.wrap:hover a.button{
                        padding: 0px 20px 0px 4px;
                        background-position: right center;
                        opacity: 1;

					    -webkit-transition: padding 300ms, opacity 300ms;
				        -moz-transition: padding 300ms, opacity 300ms;
				        -o-transition: padding 300ms, opacity 300ms;
				        -ms-transition: padding 300ms, opacity 300ms;
				        transition: padding 300ms, opacity 300ms;
				    }	

        	#Featured-Parks div.tiles.single div.tile{
                float: none;
                width: 100%;
                max-width: 640px;
                margin: 0px auto;
                padding: 6px 0px 6px 0px !important;
        	}

    #Featured-Parks span.clear-bar {
        clear: both;
        display: block;
        width: 100%;
    }
@media(max-width:540px) {
    #Featured-Parks div.tiles div.tile{
		float: none;
		width: 100%;
        padding: 8px 0px 0px 0px !important;
	}
        #Featured-Parks div.tiles div.tile:nth-child(2n) div.additional{
            left: 0px;
        }
        #Featured-Parks div.tiles div.tile:nth-child(2n + 1) div.additional{
            right: 0px;
        }
}	