html, body{overflow-x: hidden;}

body{font-family: 'brocha-book', sans-serif; line-height: 19px;color:#FFF!important; font-size: 19px!important; -moz-osx-font-smoothing: grayscale;text-rendering: optimizelegibility;}

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


/**********
Text
**********/

@font-face {
    font-family: 'brocha-black';
    src: url('../fonts/brocha-black-webfont.woff2') format('woff2'),
         url('../fonts/brocha-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'brocha-book';
    src: url('../fonts/brocha-book-webfont.woff2') format('woff2'),
         url('../fonts/brocha-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'brocha-regular';
    src: url('../fonts/brocha-regular-webfont.woff2') format('woff2'),
         url('../fonts/brocha-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('../fonts/sourcesanspro-bold-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*titles*/
h1, h2, h3, h4, h5, h6 {margin-bottom: 0px;margin-top: 0px;}

h1{font-family: 'brocha-black', serif;font-size: 55px;}
h2{font-family: 'brocha-regular', serif;font-size: 35px;color:#035560;}

p {margin: 0 0 15px;}

p:last-child {margin-bottom: 0;}

a{color: #fff; cursor: pointer;text-decoration: underline;
  -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
          transition: all .3s ease;
        }

a:hover{color: #035560;}

.dark-blue-txt{color:#035560}

.red-txt{color:#a33d41;} .blue-txt{color:#0a8eb2;}

.red-txt, .blue-txt{
-webkit-transition: color .3s ease;
   -moz-transition: color .3s ease;
        transition: color .3s ease;}

.bold{font-family: 'brocha-regular', serif;}

.black{font-family: 'brocha-black', serif;}

/**********
spacers
**********/
.pt-5{padding-top:5px!important;}
.pt-10{padding-top:10px;}
.pt-20{padding-top:20px;}
.pt-30{padding-top:30px;}
.pt-40{padding-top:40px;}
.pt-50{padding-top:50px;}
.pt-60{padding-top:60px;}
.pt-70{padding-top:70px;}
.pt-80{padding-top:80px;}
.pt-90{padding-top:90px;}
.pt-100{padding-top:100px;}

.pb-5{padding-bottom:5px!important;}
.pb-10{padding-bottom:10px;}
.pb-20{padding-bottom:20px;}
.pb-30{padding-bottom:30px;}
.pb-40{padding-bottom:40px;}
.pb-50{padding-bottom:50px;}
.pb-60{padding-bottom:60px;}
.pb-70{padding-bottom:70px;}
.pb-80{padding-bottom:80px;}
.pb-90{padding-bottom:90px;}
.pb-100{padding-bottom:100px;}

.mt-5{margin-top:5px!important;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.mt-60{margin-top:60px;}
.mt-70{margin-top:70px;}
.mt-80{margin-top:80px;}
.mt-90{margin-top:90px;}
.mt-100{margin-top:100px;}

.mb-5{margin-bottom:5px!important;}
.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}
.mb-60{margin-bottom:60px;}
.mb-70{margin-bottom:70px;}
.mb-80{margin-bottom:80px;}
.mb-90{margin-bottom:90px;}
.mb-100{margin-bottom:100px;}

/**********
header
**********/
header{line-height: 24px;}
.header-img img{width:520px;}

.fastest-bkg .header-icons{background-image: url('../img/header-fastest.svg'); background-size: cover;height: 175px;background-position: center;}
.slowest-bkg .header-icons{background-image: url('../img/header-slowest.svg'); background-size: cover;height: 175px;background-position: center;}

/**********
footer
**********/
footer{}
footer .logo img{width:100px;}
footer p {margin: 0 0 0 0;}


/**********
Wraps
**********/
.fastest-bkg{background: #2C85FB;
background-image: url('../img/blue-background.png'); background-size: cover;
}

.slowest-bkg{background: #E86545;
background-image: url('../img/red-background.png'); background-size: cover;
}


/**********
Switch
**********/
.switch-title{font-family: 'brocha-black', serif;font-size: 20px;}

.switch-title-left{background: url('../img/arrow-neutral.png') 197px 60px/ 40px no-repeat;}
.switch-title-right{background: url('../img/arrow-neutral.png') 37px 60px/ 40px no-repeat;}

.switch-title-left.blue-txt{background: url('../img/arrow-fastest.png')  197px 60px/ 40px no-repeat;}

.switch-title-right.red-txt{background: url('../img/arrow-slowest.png') 37px 60px/ 40px no-repeat;}

.switch-title-left, .switch-title-right{font-family: 'brocha-black', serif;font-size: 22px;padding-top: 110px!important;}

.switch{background:#FFF;height:32px;width:60px;border-radius:60px;position: relative;margin:-35px auto 0 auto;}

.switch-btn{cursor: pointer;top:1px;position: absolute;width:30px; height:30px}

.switch-btn-fastest{right:1px;background: url('../img/btn-fastest.png')0px/30px;
  -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
          transition: all .2s ease;}

.switch-btn-slowest{right:29px;background: url('../img/btn-slowest.png')0px/30px;
  -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
          transition: all .2s ease;}


.bits{position: absolute;width: 102px;top: -23px;left: -22px;}

/**********
Map
**********/
.map{background: url('../img/map.png');width: 100%;height: 975px;background-repeat: no-repeat;background-size: 640px;position: relative;}

.pin{position: absolute;cursor: pointer;background: url('../img/pin.svg');background-size: 150% auto;  background-position: center center;height: 60px;
    width: 36px;color: #000;text-align: center;padding-top: 15px;font-family: 'SourceSansPro-Bold', serif;
  -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
          transition: all .2s ease;}

.pin:hover{background-size: 60px auto;height: 60px;
    width: 36px;font-size: 115%;z-index: 100;}

.show{opacity:1; visibility:visible;
  -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
          transition: all .2s ease;}

.hide{opacity:0; visibility: hidden;
  -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
          transition: all .2s ease;}

/**********
Locations
**********/

.york{top:485px;left:375px;}
.nelincolnshire{top: 536px;left: 440px;}
.wdunbartonshire{top: 262px;left: 165px;}
.stevenage{top: 715px;left: 435px;}
.harlow{top: 735px;left: 455px;}
.lincoln{top: 568px;left: 415px;}
.gloucester{top: 712px;left: 306px;}
.hartlepool{top: 426px;left: 379px;}
.rushmoor{top: 792px;left: 390px;}
.broxtowe{top: 602px;left: 360px;}
.plymouth{top: 842px;left: 225px;}
.stockton-on-tees{top: 444px;left: 359px;}
.redcar{top: 447px;left: 400px;}
.crawley{top: 810px;left: 427px;}
.dundee{top: 209px;left: 258px;}
.luton{top: 709px;left: 410px;}
.bristol{top: 759px;left: 289px;}
.adur{top: 829px;left: 414px;}
.portsmouth{top: 829px;left: 388px;}
.ashfield{top: 599px;left: 388px;}
.middlesbrough{top: 419px;left: 364px;}
.brighton{top: 827px;left: 440px;}
.falkirk{top: 258px;left: 206px;}


.london{top:755px;left: 440px;}
.orkney{top: 30px;left: 400px;}
.powys{top: 665px;left: 215px;}
.argyll{top: 249px;left: 110px;}
.ceredigion{top: 675px;left: 187px;}
.shetland {top: 35px;left: 530px;}
.gwynedd {top: 585px;left: 187px;}
.siar{top: 60px;left: 30px;}
.highland {top: 40px;left: 160px;}
.west-devon {top: 850px;left: 160px;}
.forest-dean {top: 720px;left: 290px;}
.mid-devon {top: 830px;left: 200px;}
.carmarthenshire {top: 710px;left: 160px;}
.dumfries {top: 360px;left: 210px;}
.denbighshire {top: 580px;left: 230px;}
.mid-suffolk {top: 660px;left: 520px;}
.derbyshire{top: 590px;left: 330px;}
.west-somerset{top: 800px;left: 200px;}
.boston {top: 590px;left: 445px;}
.taunton-deane {top: 820px;left: 230px;}
.aberdeenshire{top: 130px;left: 280px;}
.holland{top: 610px;left: 4345px;}
.anglesey{top: 557px;left: 163px;}
.maldon{top: 747px;left: 493px;}


/**********
Results
**********/
.result .bits {top: 161px;left: 49px;}

.result{position: absolute;right: 120px;top: 170px;padding: 10px;width: 200px;}

.result .number{background: url('../img/pin.svg');width: 60px;height: 60px;color: #000;background-size: 100% auto;background-position: center center;text-align: center;padding-top: 15px;margin: 0 auto;font-family: 'SourceSansPro-Bold', serif;font-size: 125%;}

.location{font-family: 'brocha-black', serif;font-size: 20px;min-height: 48px;}
.msg-download-speed{font-family: 'brocha-regular', serif;font-size: 14px;}

input.dial {margin-top: 25px!important;font-family: 'brocha-black', serif!important;font-size: 26px!important;width: 74px!important;}

.msg-mbps{font-family: 'brocha-regular', serif;font-size: 14px;margin-top: -145px;}
.msg-hd{font-family: 'brocha-regular', serif;font-size: 14px;}
.download{font-family: 'brocha-black', serif;font-size: 20px;}

/**********
Mobile Results
**********/
.modal-dialog {max-width: 350px;}

.modal-content {border: none;border-radius: 35px;}
.modal-content .close {opacity: 1;padding: 10px 20px 20px 0;}
.modal-content .close img{width: 20px;}

.mobile-result{padding: 40px 50px;}

.mobile-result .bits {top: 188px;left: 123px;}

.mobile-result .number{background: url('../img/pin-shadow.png');width: 60px;height: 75px;color: #000;background-size: 100% auto;background-position: center center;text-align: center;padding-top: 25px;margin: 0 auto;font-family: 'SourceSansPro-Bold', serif;font-size: 125%;}

.mobile-result .location{font-family: 'brocha-black', serif;font-size: 20px;color:#00aff4;min-height: unset;}

.mobile-result .msg-download-speed{font-family: 'brocha-regular', serif;font-size: 14px;color:#000;}

input.dial {margin-top: 25px!important;font-family: 'brocha-black', serif!important;font-size: 26px!important;width: 74px!important;}

.mobile-result .msg-mbps{font-family: 'brocha-regular', serif;font-size: 14px;margin-top: -123px;;color:#000;}
.mobile-result .msg-hd{font-family: 'brocha-regular', serif;font-size: 14px;color:#000;}

.mobile-result .download{font-family: 'brocha-black', serif;font-size: 20px;color:#00aff4;}

.slowest-bkg .mobile-result .location, .slowest-bkg .mobile-result .download, .slowest-bkg .mobile-result input{color:#a33d41!important;}


/* The animation code */
@keyframes show {
  from {opacity: 0;} to {opacity: 1;}
}


@media (min-width: 1365px) {


}

/* Large devices (large desktops, 1200px and smaller) */
@media (max-width : 1200px) {

.result {right: 0px;}

.switch-title-left.blue-txt {background-position: 154px 60px;}

/* Medium Devices, Desktops Menu changes here, col-md-12 stacks here */
@media  (max-width : 992px) {

.modal-dialog {margin: 10px auto!important;}

.result {right: 0px;}

.switch-title-left.blue-txt {background-position: 94px 60px ;}

.map {background-size: 500px;}

.york {top: 375px;left: 285px;}
.nelincolnshire {top: 405px;left: 340px;}
.wdunbartonshire {top: 192px;left: 125px;}
.harlow {top: 566px;left: 350px;}
.stevenage {top: 545px;left: 339px;}
.falkirk {top: 188px;left: 157px;}
.dundee {top: 149px;left: 197px;}
.hartlepool {top: 326px;left: 299px;}
.middlesbrough {top: 316px;left: 282px;}
.stockton-on-tees {top: 336px;left: 272px;}
.redcar {top: 337px;left: 296px;}
.lincoln {top: 445px;left: 321px;}
.ashfield {top: 469px;left: 294px;}
.broxtowe {top: 473px;left: 267px;}
.gloucester {top: 530px;left: 230px;}
.bristol {top: 579px;left: 226px;}
.plymouth {top: 645px;left: 175px;}
.luton {top: 541px;left: 315px;}
.portsmouth {top: 634px;left: 298px;}
.adur {top: 634px;left: 324px;}
.rushmoor {top: 600px;left: 310px;}
.crawley {top: 613px;left: 343px;}
.brighton {top: 632px;left: 348px;}

.london {top: 575px;left: 348px;}
.orkney{top: 10px;left: 310px;}
.powys {top: 505px;left: 174px;}
.argyll{top: 180px;left: 85px;}
.ceredigion {top: 515px;left: 143px;}
.shetland {top: 15px;left: 405px;}
.gwynedd {top: 445px;left: 151px;}
.siar{top: 60px;left: 30px;}
.highland {top: 20px;left: 120px;}
.west-devon {top: 660px;left: 125px;}
.forest-dean {top: 547px;left: 219px;}
.mid-devon {top: 630px;left: 163px;}
.carmarthenshire {top: 540px;left: 120px;}
.dumfries {top: 280px;left: 150px;}
.denbighshire {top: 440px;left: 185px;}
.mid-suffolk {top: 500px;left: 405px;}
.derbyshire {top: 445px;left: 255px;}
.west-somerset {top: 610px;left: 142px;}
.boston {top: 448px;left: 343px;}
.taunton-deane {top: 622px;left: 190px;}
.aberdeenshire{top: 90px;left: 210px;}
.holland{top: 610px;left: 4345px;}
.anglesey {top: 425px;left: 126px;}
.maldon {top: 567px;left: 381px;}


}

/* Small Devices, Tablets col-xs*/
@media (max-width : 768px) {
.modal-dialog {margin: 10px auto!important;}
.switch-title-left.blue-txt {background-position: 42px 60px}
.switch-title-left {background-position: 42px 60px}

}

/* Extra Small Devices, Landscape */
@media (max-width : 568px) {

.map {background-size: 380px;}

.york {top: 285px;left: 208px;z-index: 1;}
.nelincolnshire {top: 298px;left: 253px;}
.wdunbartonshire {top: 132px;left: 95px;}
.harlow {top: 416px;left: 284px;}
.stevenage {top: 408px;left: 262px;}
.falkirk {top: 128px;left: 117px;}
.dundee {top: 99px;left: 147px;}
.hartlepool {top: 246px;left: 230px;}
.middlesbrough {top: 232px;left: 212px;}
.stockton-on-tees {top: 256px;left: 200px;}
.redcar {top: 269px;left: 230px;}
.lincoln {top: 315px;left: 237px;}
.ashfield {top: 339px;left: 225px;z-index: 1;}
.broxtowe {top: 343px;left: 200px;}
.gloucester {top: 400px;left: 180px;}
.bristol {top: 427px;left: 166px;}
.plymouth {top: 475px;left: 125px;}
.luton {top: 401px;left: 245px;}
.portsmouth {top: 464px;left: 221px;}
.adur {top: 464px;left: 246px;z-index: 1;}
.rushmoor {top: 430px;left: 230px;}
.crawley {top: 434px;left: 251px;z-index: 1;}
.brighton {top: 466px;left: 268px;}

.london {top: 425px;left: 258px;}
.orkney {top: -5px;left: 240px;}
.powys {top: 375px;left: 134px;}
.argyll {top: 120px;left: 65px;}
.ceredigion {top: 385px;left: 110px;}
.shetland {top: 0px;left: 310px;}
.gwynedd {top: 325px;left: 113px;}
.siar{top: 60px;left: 30px;}
.highland {top: 0px;left: 90px;}
.west-devon {top: 480px;left: 85px;}
.forest-dean {top: 405px;left: 160px;}
.mid-devon {top: 470px;left: 129px;}
.carmarthenshire {top: 400px;left: 87px;}
.dumfries {top: 190px;left: 115px;}
.denbighshire {top: 320px;left: 140px;}
.mid-suffolk {top: 370px;left: 295px;}
.derbyshire {top: 335px;left: 185px;}
.west-somerset {top: 450px;left: 107px;}
.boston {top: 328px;left: 253px;}
.taunton-deane {top: 462px;left: 153px;}
.aberdeenshire {top: 60px;left: 160px;}
.holland{top: 610px;left: 4345px;}
.anglesey {top: 310px;left: 93px;}
.maldon {top: 417px;left: 288px;}

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

.switch-title-left, .switch-title-right {font-size: 19px;}
.map {height: 595px;margin-left: -15px;    width: 110%;}

.switch-title-right {
    background: url(../img/arrow-neutral.png) 19px 60px/ 40px no-repeat;
    padding-left: 0;
}

.switch-title-right.red-txt {
    background: url(../img/arrow-slowest.png) 19px 60px/ 40px no-repeat;
    padding-left: 0;
}


/* Extra Small Devices, Small Phones, we dont really use this anymore*/
@media only screen and (max-width : 320px) {

}