
#homeSection1, #Weather
{
    width:100%;
    max-width:1217px;
    margin:0 auto;
    padding:75px 0;
}
    #homeSection1
    {
        padding:75px 0 50px 0;
    }
    #homeSection1 h2
    {
        text-align:center;
        line-height: 33px;
    }
    
    #homeSection1 a.featureItem
    {
        width:285px;
        margin-left:25px;
        display:inline-block;
        vertical-align:top;
        text-decoration:none;
        position:relative;
        overflow:hidden;
        text-align:left;
        margin-bottom:25px;
    }
        #homeSection1 a.featureItem.first, #homeSection1 a.featureItem.item4
        {
            margin-left:0;
        }
        #homeSection1 a.featureItem img
        {
            display:block;
            width:100%;
        }
        #homeSection1 a.featureItem > span
        {
            background:#2761AB;
            color:#fff;
            display:block;
            padding:16px 20px;     
            font-size:1.7em;
            font-weight:bold;   
            position:relative;
            z-index:1;
        }
        #homeSection1 a.featureItem p
        {
                transition: all 0.5s ease;
                position: absolute;
                top: 235px;
                height: 0px;
                width: 235px;
                padding: 0px 25px;
                color: #fff;
                /* display: none; */
                z-index: 0;
                background: #2761AB;   
                font-size: 1.5em;
                line-height: 1.4em;                        
        }
            #homeSection1 a.featureItem:hover p
            {           
                display:block;     
                top:0;
                height:175px;
                padding:30px 25px;                
            }
                #homeSection1 a.featureItem p > span
                {
                    display:block;
                    margin-bottom:30px;
                    color:#fff;                        
                    font-size: 2.8em;
                }
        #homeSection1 a.featureItem.Harbours > span
        {
            background:#2761AB;
        }
        #homeSection1 a.featureItem.Harbours p
        {
            background:rgba(38, 97, 170, 1);
        }
        #homeSection1 a.featureItem.Marinas >  span
        {
            background:#58A8B5;
        }
        #homeSection1 a.featureItem.Marinas p
        {
            background:#58A8B5;
        }
        #homeSection1 a.featureItem.Coastguard >  span
        {
            background:#88ABC2;
        }
        #homeSection1 a.featureItem.Coastguard p
        {
            background:rgba(136, 171, 194, 1);
        }
        #homeSection1 a.featureItem.CruiseShips >  span
        {
            background:#182B40;
        }
        #homeSection1 a.featureItem.CruiseShips p
        {
            background:rgba(28, 44, 63, 1);
        }
        #homeSection1 a.featureItem.VisitMarina > span{
            background:#3b7b85;
        }   
        #homeSection1 a.featureItem.VisitMarina p
        {
            background:rgba(59, 123, 133, 1);
        }     
        #homeSection1 a.featureItem.Commercial > span
        {
            background:#4987d5;
        }
        #homeSection1 a.featureItem.Commercial p
        {
            background:rgba(73, 135, 213, 1);
        }  
        #homeSection1 a.featureItem.Estate > span
        {
            background:#41677f;
        }
        #homeSection1 a.featureItem.Estate p
        {
            background:rgba(65, 103, 127, 1);
        }  
        #homeSection1 a.featureItem.Registry > span
        {
            background:#28486b;
        }
        #homeSection1 a.featureItem.Registry p
        {
            background:rgba(40, 72, 107, 1);
        }  
#News
{
    width:100%;
    max-width:1080px;
    display:block;
    padding:75px 0;
    margin:0 auto;
    text-align:center;
}
    #News h2
    {
        text-align:center;
    }
    
        #News ul li
        {
            width:340px;
            display:inline-block;
            vertical-align:top;
            margin-left:30px;            
            height:500px;            
            color:#222;
            text-align:left;
        }
            #News ul li:first-child
            {
                margin-left:0px;
            }    
        #News ul li a
        {
            text-decoration:none;
            display:block;
            height:100%;
            position:relative;
            padding:30px 25px;
            box-sizing:border-box;
            border-bottom:15px solid #2661AA;
        }
            #News ul li a > span.icon-wave
            {
                display:block;
                font-size:4em;
                color:#E5E9EE;
                margin-bottom:60px;
                transition:all 0.3s ease;
            }    
            #News ul li a > span.newsDate
            {
                margin-bottom:30px;
                display:block;
                color:#222;
                font-size:1.4em;
                transition:all 0.3s ease;
            }
            #News ul li a p
            {
                color: #646464;
                font-size: 1.4em;                
                line-height: 1.5em;
                transition:all 0.3s ease;
            }
            #News ul li h3
            {
                transition:all 0.3s ease;
            }
            
            #News ul li a:after {
            content: "";
            position:absolute;
            bottom:0; left:0;
            width:100%; height:0px;
            background:#2661AA;
            z-index:-1;
            transition: height 0.3s;
            }
            #News ul li a:hover:after { height:100%; }
            #News ul li a:hover > span.newsDate, #News ul li a:hover > span.icon-wave, #News ul li a:hover p, #News ul li a:hover h3 { color:#fff; }

            #News ul li a.Harbours:after
            {
                background:rgba(38, 97, 170, 1);
            }            
            #News ul li a.Harbours
            {
                border-bottom:15px solid #2761AB;
            }
            #News ul li a.Marinas:after
            {
                background:#58A8B5;
            }            
            #News ul li a.Marinas
            {
                border-bottom:15px solid #58A8B5;
            }
            #News ul li a.Coastguard:after
            {
                background:rgba(136, 171, 194, 1);
            }           
            #News ul li a.Coastguard
            {
                border-bottom:15px solid #88ABC2;
            } 
            #News ul li a.CruiseShips:after
            {
                background:rgba(28, 44, 63, 1);
            }
            #News ul li a.CruiseShips
            {
                border-bottom:15px solid #182B40;
            }
            #News ul li a.VisitMarina:after{
                background:#3b7b85;
            }   
            #News ul li a.VisitMarina{
                border-bottom:15px solid #3b7b85;
            } 
            #News ul li a.Commercial:after{
                background:#4987d5;
            }   
            #News ul li a.Commercial{
                border-bottom:15px solid #4987d5;
            } 
            #News ul li a.Estate:after{
                background:#41677f;
            }   
            #News ul li a.Estate{
                border-bottom:15px solid #41677f;
            } 
            #News ul li a.Registry:after{
                background:#28486b;
            }   
            #News ul li a.Registry{
                border-bottom:15px solid #28486b;
            } 


            
#Weather #weatherContainer
{
    width:730px;
    float:left;
}
    #Weather #weatherContainer #left
    {
        float:left;
        width:385px;
    }
        #Weather #weatherContainer:before, #Weather #tideContainer:before
        {
            content:'Weather';
            display:block;
            text-align:center;
            font-size:2em;
            font-weight:bold;
            padding-bottom:20px;
            border-bottom:1px solid #E5E9EE;            
            margin-bottom:50px;
        }
        #Weather #tideContainer:before
        {
            content:'Tides (+1hr during BST)';
            margin-bottom:0;
        }
        #Weather #weatherContainer:after
        {
            content:'';
            clear:both;
            display:block;            
        }
    #Weather #weatherContainer #Right
    {
        float:right;
        width:290px;
    }
    #Weather h2
    {
        text-align:center;
    }
    #Weather #weatherContainer h4
    {
        font-size:1.4em;
        font-weight:bold;
        color:#222;
        margin-top:35px;
        margin-bottom:10px;
    }
    #Weather #weatherContainer p
    {
        font-size:1.4em;
        color:#646464;
        line-height:1.4em;
    }
    span#weatherSummary {
        font-size: 2em;
        font-weight: bold;
        display: block;
        margin-bottom: 35px;
        color:#222;
    }
    span#highTemp {
        font-size: 2em;
        font-weight: bold;
        color:#F9D447;
        margin-right:30px;
    }
        span#highTemp > span, span#lowTemp > span, span#UV > span
        {
            color:#222;
            margin-right:10px;
        }
    span#lowTemp
    {
        font-size: 2em;
        font-weight: bold;
        color:#88ABC2;
        margin-right:30px;
    }
    span#UV
    {
        font-size: 2em;
        font-weight: bold;
        color:#75B75F;
    }
    div#windForceContainer
    {
        position:relative;
    }
        div#windForceContainer img
        {
            display:inline-block;
            vertical-align:middle;
        }
        div#windForceContainer span
        {
            display:inline-block;
            vertical-align:middle;
            font-size:2em;
            color:#222;
            font-weight:bold;
        }
        div#windForceContainer span#force
        {
            position: absolute;
            color: #fff;
            left: 53px;
            top: 56px;            
        }
#Weather #tideContainer
{
    float:right;
    width:400px;
}
    #Weather:after
    {
        content:'';
        clear:both;
        display:block;
    }
    #Weather #tideContainer table
    {
        width:100%;
    }
    #Weather #tideContainer table tr.High
    {
        font-weight:bold;
    }
    #Weather #tideContainer table td
    {
        font-size:2em;
        padding:25px 0;
        text-align:left;
        border-bottom:1px solid #E5E9EE;
    }
        #Weather #tideContainer table td:last-child
        {
            text-align:right;
        }
    #tideContainer a.Button
    {
        margin:25px auto 0 auto;
    }
    
       

            #tideContainer a#weatherForecast {
                    margin-top: 50px;
                }
        



#KeyButtons
{
    background:#E7EAEF;
    padding:75px 0;
    text-align:center;
}
    #KeyButtons a.Button
    {
        display:inline-block;
        margin:0 10px 0 10px;
        vertical-align:top;
    }
    
.bxslider p
{
    color:#fff;
    position:absolute;
    left:75px;
    right: 50%;
    bottom:155px;        
    font-size: 3.6em;
    text-shadow: 0 0 5px #222;
    font-weight: bold;
        line-height: 1.2em;
}
.bxslider a
{
    position:absolute;
    background:#88ABC2;
    padding:15px 20px;
    color:#fff;
    left:75px;
    bottom:75px;
    text-decoration:none;
    font-size:1.4em;
    text-transform:uppercase;
    font-weight:bold;
    border:2px solid #88ABC2;
    border-radius: 3px;
}
    .bxslider a:hover
    {
        color:#88ABC2;
        background:#fff;
    }

tr.Low
{
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight:100;
}

.recordContainer .recordRow span:nth-child(2), .recordContainer .recordRow span:nth-child(3), .recordContainer .recordRow span:nth-child(4)
{
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight:100;
}


div#slideshow img
{
    width:auto;
}

div#slideshow .bx-wrapper img
{
    max-width:inherit;
}

@media(max-width:768px) 
{
    body .bxslider p
    {
        font-size: 2em;
    }
}

@media(max-width:425px) {
    #slideshow
    {
        display:none;
    }
}
