@font-face {
font-family: GoldanaBase;
src: url("fonts/ttnooks.ttf") format("truetype");
font-weight: lighter;
}

body {
background: #b2c3d3;
padding: 0;
margin: 0;
overflow: -moz-scrollbars-none;
}

.wrapper {
width: 3840px;
margin: 0 auto;
font-family: GoldanaBase, Helvetica, Arial, sans-serif;
display:block;
color: #fff;
margin-top: 262px;
text-rendering: auto;
text-align: center;
margin-left:0px;
}



.item {
width: 232px;
float:none;
display:inline-block;
height:360px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 0px;
margin: 0px;
background: none;
    margin-right: 15px;
}

.sixrow .item {
width: 223px;
}


.sixrow .horsename {
padding: 10px 10px;
height: 36px;
}

.sixrow .horsesilk {
height: 160px;
}

.sixrow .horsesilk img {
max-height: 144px;
}

/* SEVEN ROW */

.sevenrow .wrapper {
margin-top: 190px;
width: 1800px;
}

.sevenrow .item {
width: 223px;
height: 376px;
}


.sevenrow .horsename {
padding: 8px 4px 5px 4px;
height: 90px;
font-size: 22px;
line-height: 28px;
}

.sevenrow .horsesilk {
height: 116px;
}

.sevenrow .horsesilk img {
max-height: 454px;
height: 355px;
}

.sevenrow .barriernumber {
    margin: 168px 0 0 27px;
}

/* EIGHT ROW */

.eightrow .item {
width: 248px;
margin-right: 0px;
}


.eightrow .horsename {
padding: 8px 4px 5px 4px;
height: 90px;
font-size: 22px;
line-height: 28px;
}

.eightrow .horsesilk {
height: 128px;
}

.eightrow .horsesilk img {
max-height: 402px;
margin:0px;
}

.eightrow .barriernumber {
    margin: 254px 0 0 0px;
}

/* NINE ROW */

.ninerow .item {
width: 190px;
}


.ninerow .horsename {
padding: 8px 4px 5px 4px;
height: 90px;
font-size: 22px;
line-height: 28px;
}

.ninerow .horsesilk {
height: 140px;
}

.ninerow .horsesilk img {
max-height: 310px;
}

.ninerow .barriernumber {
    margin: 105px 0 0 27px;
}


/* TEN ROW */

.tenrow .item {
width: 178px;
}


.tenrow .horsename {
padding: 8px 4px 5px 4px;
height: 90px;
font-size: 22px;
line-height: 28px;
}

.tenrow .horsesilk {
height: 128px;
}

.tenrow .horsesilk img {
max-height: 290px;
}


.horsename {
height: 54px;
font-size: 15px;
background: #efefef;
padding: 10px 0px;
text-transform: uppercase;
font-family: GoldanaBase,Helvetica, Arial, sans-serif;
font-weight: bold;
}

.horsesilk {
height: 146px;
z-index: -1;
    position: relative;
}

.charityname {
text-transform: uppercase;
font-size: 22px;
font-family: GoldanaBase,Helvetica, Arial, sans-serif;
color: #000032;
padding: 15px 2px;

}

.horsesilk img{
width: auto !important;
max-height: 130px;
margin: 10px;
margin-bottom: 0;
}



h1 {
color: #001652;
font-family:GoldanaBase, Helvetica, Arial, sans-serif;
text-transform: uppercase;
margin-top: 0px;
margin-bottom: 0;
font-weight: normal;
font-size: 24px;
}

h2 {
color: #37316f;
font-family: GoldanaBase, Helvetica, Arial, sans-serif;
text-transform: uppercase;
margin: 0;
font-weight: normal;
font-size: 20px;
}

.sponsorlogo {
max-height: 80px;
display: inline-block;
margin: 14px 1.5%;
width: 310px;
}

.sponsorlogo.becklogo {
margin-left: 25%;
}

.header {
background: #74c3ee;
background-repeat: no-repeat;
background-position: top center;
padding-top: 160px;
color: #001652;
}

.headergroup {
    display: block;
    vertical-align: top;
    padding: 20px 0 20px 88px;
    text-align: center;
}

.barriernumber {
    font-size: 108px;
    color: #000032;
    display: block;
    width: 100%;
    text-align: center;
    margin: 100px 0 0 27px;
    background: none;
    border: none;
    font-family: GoldanaBase,Helvetica, Arial, sans-serif;
    line-height: 1;
    height: 130px;
    resize: none;
    text-transform: uppercase;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
}

.fullscreen-bg-img {
    background: #b2c3d3;
   background-image: url("img/asm-bg.png");
   background-repeat: no-repeat;
   
}

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}



/* Zoom/Enlarge Styles */


    .zoom {
        transition: transform .6s;
    }

    .zoom:focus-within {
        transform: scale(2.5);
        background: rgb(178,195,211,0.9);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 370px;

        
    }

     

     .zoom:focus-within .barriernumber {
        margin: 100px 0 0 -10px;
        border: none;
        color: transparent;
        text-shadow: 0 0 0 #000032;
        outline: none;
     }


    
    .sevenrow .zoom:focus-within {
        transform: scale(2);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 330px;
        
    }


    .sevenrow .zoom:focus-within .barriernumber {
        margin: 170px 0 0 -10px;
        border: none;
        font-size: 100px;
     }


     .eightrow .zoom:focus-within {
        transform: scale(1.5);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 400px;
        
    }

    .eightrow .zoom:focus-within .barriernumber {
        margin: 235px 0 0 -10px;
        border: none;
        font-size: 120px;
     }


     .ninerow .zoom:focus-within {
        transform: scale(2.2);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 350px;
        
    }

     .ninerow .zoom:focus-within .barriernumber {
        margin: 105px 0 0 -10px;
        border: none;
     }


     .tenrow .zoom:focus-within {
        transform: scale(2.5);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 370px;
        
    }

      .tenrow .zoom:focus-within .barriernumber {
        margin: 100px 0 0 -10px;
        border: none;
     }