/*============================================================================*/
/* css for displaying the sponsors logos on the Home page and Supporters page */
/*============================================================================*/
hr.hr_sponsor { height: 2px;
border: 0;
background-color: #004080;
}
p.sponsor_heading { margin: 15px 5px 25px 5px;
text-align: center;
font-size: 10px;
font-weight: bold;
}
/*** Major sponsors ***/
/* Two options - flex_container1 for the 'square' logos or flex_container_sails for the 'sail' shaped logos */
/**********************************************************************/
/* flex_container1 used for the 'square' logos on the Supporters page */
/**********************************************************************/
.flex_container1 { display: flex;
flex-wrap: wrap;
justify-content: center; /* center the flex boxes across the horizontal axis */
margin-top: 20px;
margin-bottom: 40px;
}
/* outer_div flex box - sets the absolute width and height */
.flex_container1 .outer_div { box-sizing: border-box;
width: 150px;
height: 150px;
margin: 1%;
border: 2px solid #ffffff; /* invisible white border */
border-radius: 5px;
box-shadow: 1px 1px 1px #65696c, -1px -1px 1px #65696c;
}
/* container to hold the and ensure the whole container is clickable */
.flex_container1 .link_container { height: 150px; /* same as outer_div */
display: flex; /* declare this 'parent' container as 'flex' */
align-items: center; /* any child elements will be centered (ie. the img ) */
box-sizing: border-box;
}
.flex_container1 .link_container:hover img { max-width: 100%; }
/* image must be 'square' or 'landscape' (not 'portrait') */
.flex_container1 img { box-sizing: border-box;
max-width: 95%;
margin: 0 auto;
display: block;
}
/*******************************************************************/
/* flex_container_sails used for the 'sail' logos on the Home page */
/*******************************************************************/
.flex_container_sails { display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
margin-bottom: 40px;
}
/* outer div (within sponsor_flex_container) - sets the absolute width and height */
.flex_container_sails .outer_div { box-sizing: border-box;
width: 150px;
height: 176px;
margin: 1%;
border: 2px solid #ffffff;
border-radius: 5px;
/* set the position and size of the two background images (plain sail and sail number) */
/* the two images are declared in the relevant class (.sailx) */
background-position: left 55% top 14%, left top; /* comma separated for each image */
background-size: 17%, contain; /* comma separated for each image */
background-repeat: no-repeat, no-repeat; /* comma separated for each image */
position: relative; /* allows the sponsor images to be positioned absolutely */
}
.flex_container_sails .outer_div:hover { border: none;
}
/* container to hold the and ensure the whole container is clickable */
.flex_container_sails .link_container { width: 100%;
height: 176px; /* same as outer_div */
display: block;
box-sizing: border-box;
}
/* image must be 'square' or 'landscape' (not 'portrait') */
.flex_container_sails img { box-sizing: border-box;
/* max-width: 83%; max-width is set in html for each logo */
margin: 0 auto;
position: absolute;
bottom: 7%;
right: 50%; /* horizontally */
transform: translate(50%); /* centred */
}
/*** Funding bodies ***/
/* create the flex container to hold all the flex boxes */
/* use 'justify-content' to evenly distribute the flex boxes */
.funding_flex_container { display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
margin-bottom: 10px;
}
/* funding_outer_div flex box - sets the absolute width and height */
div.funding_outer_div { box-sizing: border-box;
width: 300px;
margin: 1%;
border: 2px solid #ffffff; /* invisible white border */
border-radius: 5px;
position: relative; /* to allow image to be absolutely postioned */
}
/* container to hold the and ensure the whole container is clickable */
.funding_link_container { height: 100px;
display: block;
box-sizing: border-box;
}
.funding_link_container:hover img { max-width: 100%; }
.funding_flex_container img { box-sizing: border-box;
max-width: 95%;
margin: 0 auto;
display: block;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
/* declare the two 'outer_div' background images, depending on the sail number */
.sail1 { background-image: url('images/sponsors_logos/number1.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail2 { background-image: url('images/sponsors_logos/number2.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail3 { background-image: url('images/sponsors_logos/number3.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail4 { background-image: url('images/sponsors_logos/number4.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail5 { background-image: url('images/sponsors_logos/number5.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail6 { background-image: url('images/sponsors_logos/number6.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail7 { background-image: url('images/sponsors_logos/number7.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail8 { background-image: url('images/sponsors_logos/number8.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail9 { background-image: url('images/sponsors_logos/number9.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail10 { background-image: url('images/sponsors_logos/number10.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail11 { background-image: url('images/sponsors_logos/number11.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail12 { background-image: url('images/sponsors_logos/number12.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail13 { background-image: url('images/sponsors_logos/number13.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail14 { background-image: url('images/sponsors_logos/number14.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
.sail15 { background-image: url('images/sponsors_logos/number15.png'), url('images/sponsors_logos/sail_plain_no_bg.png'); }
/*** Partners - small logos ***/
.partner_flex_container { display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 50px auto 20px auto;
}
.partner_flex_container .partner_div {
width: 100px;
height: 70px;
}
.partner_div a { display: block;
width: 94px; /* same as total width of logo img, including border */
margin: 0 auto;
}
.partner_div img { display: block;
height: 50px;
margin: 0 auto;
border: 2px solid #ffffff;
border-radius: 5px;
}
.partner_small { width: 50px; }
.partner_large { width: 90px; }
.partner_div a:hover img { border: 2px solid #88bbdd;
opacity:1;
}
/*=============================================================*/
/* Media Query for screens 340px and above */
/*=============================================================*/
@media only screen and (min-width: 340px)
{
.flex_container1 .outer_div { margin: 10px 2% 10px 2%;
box-shadow: 2px 2px 2px #65696c, -1px -1px 1px #65696c;
}
.flex_container_sails .outer_div { margin: 10px 2% 10px 2%;
}
}
/*=============================================================*/
/* Media Query for screens 450px and above */
/*=============================================================*/
@media only screen and (min-width: 450px)
{
p.sponsor_heading { font-size: 11px; }
}
/*=============================================================*/
/* Media Query for screens 550px and above */
/*=============================================================*/
@media only screen and (min-width: 550px)
{
.flex_container1 .outer_div { width: 160px;
height: 160px;
}
.flex_container1 .link_container { height: 160px;
}
.flex_container_sails .outer_div { width: 160px;
height: 188px;
}
.flex_container_sails .link_container { height: 188px; /* same as outer_div */
}
p.sponsor_heading { font-size: 12px; margin-bottom: 35px;}
}
/*=============================================================*/
/* Media Query for screens 620px and above */
/*=============================================================*/
@media only screen and (min-width: 620px)
{
.flex_container1 .outer_div { width: 180px;
height: 180px;
}
.flex_container1 .link_container { height: 180px;
}
.flex_container_sails .outer_div { width: 180px;
height: 212px;
}
.flex_container_sails .link_container { height: 212px; /* same as outer_div */
}
p.sponsor_heading { font-size: 14px; }
}
/*==========================================*/
/* Media Query for screens 700px and above */
/*==========================================*/
@media only screen and (min-width: 700px)
{
.flex_container1 .outer_div { width: 200px;
height: 200px;
margin: 10px 15px 10px 15px;
}
.flex_container1 .link_container { height: 200px;
}
.flex_container_sails .outer_div { width: 200px;
height: 235px;
margin: 10px 15px 10px 15px;
}
.flex_container_sails .link_container { height: 235px; /* same as outer_div */
}
p.sponsor_heading { font-size: 16px;
margin-bottom: 50px;
}
}
/*==========================================*/
/* Media Query for screens 800px and above */
/*==========================================*/
@media only screen and (min-width: 800px)
{
p.sponsor_heading { font-size: 18px; }
}
/*==========================================*/
/* Media Query for screens 900px and above */
/*==========================================*/
@media only screen and (min-width: 900px)
{
p.sponsor_heading { font-size: 20px; }
}
/*==================== END ==================*/