/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css?family=Raleway:200');
@import url('https://fonts.googleapis.com/css?family=Roboto:400');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

/* GENERAL */
body {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
  animation: fadein 0.6s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.logo {
  float: left;
  margin-top: -12px;
  padding-left: 1%;
}

#brand-logo{
  width: 110px;
}

#brand-logo:hover{
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari 3-8 */
  transform: scale(1.01); 
  animation: shake 2s;
  animation-iteration-count: infinite;
}

.navbar{
  overflow-x:hidden;
  overflow-y:hidden;
  background: #202020;
  height: 75px;
  padding-top: 5x;
  position: fixed; /* Set the navbar to fixed position */
  width: 100%; /* Full width */
  border-bottom: 1px solid #BE1E2E;
}

.navbar a{
  float:right;
  display:block;
  color:#fff;
  text-align:center;
  padding:20px 22px;
  text-decoration:none;
  font-size:16px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

.navbar ul{
  margin:8px 20px 0 0;
  list-style:none;
}

.navbar a:hover{
  color: #BE1E2E;
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05);
  cursor: pointer;
}

.side-nav{
  height:100%;
  width:0;
  position:fixed;
  top:0;
  right:0;
  background-color:#111;
  opacity:0.9;
  overflow-x:hidden;
  padding-top:60px;
  transition:0.7s;
}

.side-nav a{
  padding:10px 10px 10px 30px;
  text-decoration:none;
  font-size:22px;
  color:#ccc;
  display:block;
  transition:0.3s;
}

.side-nav a:hover{
  color:#fff;
}

.side-nav .btn-close{
  position:absolute;
  top:0;
  right:22px;
  font-size:36px;
  margin-left:50px;
  cursor: pointer;
}

@media(max-width:860px){
  .navbar-nav{display:none}
}

@media(min-width:860px){
  .open-slide{display:none}

  #who hr{
  float: left;
}

}

@media screen and (min-width: 885px){

.banner-info h1, .banner-info2 h1 {
  font-size: 20px;
}

}

/* Banner */
#banner {
  padding-top: 100px;
  background: 
  linear-gradient(
        rgba(0, 0, 0, 0.01),
        rgba(0, 0, 0, 0.01)
      ),
      url("../images/big.jpeg");
  background-size: cover;
  background-position: top;
  background-attachment: scroll;
  /*height: 85vh;*/
  padding-bottom:175px;
  border-bottom: 1px solid #BE1E2E;
}

.banner-info{
  background-color: transparent;
  /*width:340px;*/
  margin:auto;
  padding-top: 10px;
  padding-bottom:10px;
  text-align: center;
}

.banner-info2 {
    background-color: #fff;
    width:50%;
    margin:auto;
    padding:5px;
   /* margin-right: 23%;
    margin-left: 23%;
    padding-top: 1%;
    padding-bottom: 1%;*/
    text-align: center;
}

.banner-info h1,.banner-info2 h1 {
  margin: 0;
  font-size: 50px;
  font-family: Roboto;
  font-weight: bolder;
}

    .banner-info2 h1 {
        font-size: 20px;
       
    }

    .banner-info2 h3 {
        font-size: 15px;
        font-weight: bolder;
    }

    .banner-info2 ul {
        text-align: center;
        padding:5px;
        margin: auto;
        /*width: 90%;*/
        margin-top: 2%;
        margin-bottom: 2%;
        font-weight: bolder;
    }

.red {
    color: #BE1E2E;
}

.banner-info h2,.banner-info2 h2 {
  font-size: 30px;
  font-family: Raleway;
}

.ubereats-info {
    background-color: #BE1E2E;
    width: 340px;
    margin: auto;
    padding-top: 10px;
    /*padding-bottom: 5px;*/
    text-align: center;
    margin-bottom:200px;
    visibility:hidden;
}

.ubereats-info2 {
    background-color: #BE1E2E;
    margin-right: 7%;
    margin-left: 5%;
    padding-top: 1%;
    padding-bottom: 0.5%;
    text-align: center;
}

.harrow {
    background-color: #000;
    color: #fff;
    width: 340px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.harrow2 {
    background-color: #000;
    color: #fff;
    margin-right: 7%;
    margin-left: 5%;
    padding-top: 0.9%;
    padding-bottom: 0.7%;
    text-align: center;
}

.harrow a, .harrow2 a{
  margin-top: 0;
  font-size: 17px;
  text-decoration: none;
  color: #fff;
}

#ubereats{
  margin-bottom: 1%;
  width: 80%;
  height: auto;
  transition: transform .2s;
  border: 2px solid #fff;
  border-radius: 6px;
}

#ubereats:hover{
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
  background-color: #000;
  animation: shake 2s;
  animation-iteration-count: infinite;
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* ANIMATING BANNER TEXT */
#banner .animated{
  animation: fadeAndZoom 0.6s cubic-bezier(.37,.74,.7,1.41);
  transform-origin: left;
}

@keyframes fadeAndZoom {
  
  from {
    opacity: 0;
    transform: scale3d(.40, .40, 1);
  }

  to{
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }

}




/* ICONS */
#h{
  margin: 0;
  padding: 0;  
  background-color: #000;
  margin-bottom: 0;
  padding-bottom:4%;
}

.ht h1{
  color: #fff;
  text-align: center;
  font-family: Raleway;
  font-size: 2em;
  margin: 0;
  padding-top: 3.2%;
  padding-bottom: 1.1%;
}

#carlton{
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

#h .icon2{
  display: none;
}





/* CLUB */
#c{
  background-color: #BE1E2E;
  color: #fff;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* STORY */
#c .cstory{
  color: #fff;
  text-align: center;
}
.cstory h1{
  color: #fff;
  text-align: center;
  font-family: Raleway;
  font-size: 2.8em;
  margin-bottom: 0;
  padding-bottom: 0.6em;
  padding-top: 3em;
  margin-top: 0;
}

.cstory p{
  color: #fff;
  font-size: 1.2em;
  line-height: 1.5;
  margin-right: 1.5em;
  margin-left: 1.5em;
  padding-top: 0.2em;
  padding-bottom: 0;
}

#c .row{
  padding-left: 110px;
  padding-right: 110px;
}

#c .club-column {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

#c .club-card {
  padding-top: 4vh;
  padding-bottom: 8%;
  padding-left: 3vw;
  padding-right: 3vw;
  color: #fff;
  background-color: transparent;
  font-size: 1.1em;
  text-align: left;
}

#c h2{
  padding-left: 3vh;
  margin-top: 5vh;
}

#c .black{
  color: #000;
  font-weight: bolder;
}

#c .italics{
  font-style: italic;
  font-size: 20px;
}

#c .events{
  padding-bottom: 0.8em;
}


#c .row:after {
  content: "";
  display: table;
  clear: both;
}







/* ABOUT */
#about{
  color: #000;
  padding-bottom: 5%;
}

/* STORY */
#about .story{
  color: #000;
  text-align: center;
}
.story h1{
  color: #000;
  text-align: center;
  font-family: Raleway;
  font-size: 2.8em;
  margin-bottom: 0;
  padding-bottom: 0.6em;
  /*padding-top: 3em;*/
}

.story p{
  font-size: 1.2em;
  line-height: 1.5;
  margin-right: 1.5em;
  margin-left: 1.5em;
  padding-top: 0.8em;
  padding-bottom: 2.5em;
}

#c hr, #about hr, #g hr, #contact hr, #s hr {
  width: 10em;
}


#about .row{
  padding-left: 80px;
  padding-right: 80px;
  display:flex;
}

#about .about-column {
    float: left;
    width: 50%;
    box-sizing: border-box;
    flex: 1;
    border: 1px solid;
    background-color: #eee;
}

#who hr{
  width: 5em;
}


.about-card {
 /* padding-top: 2vh;*/
  /*padding-bottom: 2vh;*/
  padding-left: 2vw;
  padding-right: 2vw;
  color: #000;
  background-color: #eee;
  /*min-height: 40em;
  max-height: 40em;*/
  font-size: 1em;
  text-align: justify;
}

#about h2{
  padding-left: 3vh;
  margin-top: 5vh;
}

#about p span{
  font-size: 1.1em;
  /*background-color: #fff;*/
  line-height: 20px;
  font-weight:bolder;
}

#whopic{
  background: url("../images/team.png");
  background-size: cover;
  background-position: center;
  min-height:100%;
}

#about .row:after {
  content: "";
  display: table;
  clear: both;
}





/* GALLERY */
#g{
  padding-bottom: 3%;
  background-color: #BE1E2E;
  transition: background-color 1s ease;
  color: #fff;
  border-top: 1px solid #BE1E2E;
  border-bottom: 1px solid #BE1E2E;
}

#g:hover{
  background-color: #000;
}



#g .gstory{
  text-align: center;
}

.gstory h1{
  color: #fff;
  text-align: center;
  font-family: Raleway;
  font-size: 2.8em;
  margin-bottom: 0;
  /*padding-bottom: 0.6em;
  padding-top: 3.2em;*/
}

.gstory p{
  font-size: 1.2em;
  line-height: 1.5;
  margin-right: 1.5em;
  margin-left: 1.5em;
  padding-top: 0.8em;
  padding-bottom: 1.5em;
}

#g h1 {
  text-align: center;
  padding-left: 2%;
  padding-right: 2%;
}

#g p {
    text-align: justify;
    padding-left: 10%;
    padding-right: 10%;
    font-size: 1.1em;
    line-height: 20px;
}

#g .row{
  padding-left: 80px;
  padding-right: 80px;
}

#g .g-column {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

#g .g-card {
  padding-top: 2vh;
  padding-bottom: 0%;
  padding-left: 3vw;
  padding-right: 3vw;
  color: #fff;
  background-color: transparent;
  font-size: 1.3em;
  text-align: left;
}

#g .row:after {
  content: "";
  display: table;
  clear: both;
}

#g .italics{
  font-style: italic;
  font-weight: bolder;
}

#gbut{
  padding-top: 3em;
  text-align: center;
}

#g .btn {
  font-size: 1em;
  font-weight: bolder;
  text-decoration: none;
  background: transparent;
  border-radius: 8px;
  border: 3px solid #ffffff;
  color: #ffffff;
  letter-spacing: 2px;
  padding: 10px 20px;

}

#g .btn:hover {
  background: #ffffff;
  color: #202020;
}


#g a {
    color:#fff;
}


/* SIGNATURE ITEMS */

#signature {
  padding-top: 4%;
  background: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
        url("../images/back.jpeg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 8vh;
  text-align: center;
}

.signature-info h1 {
  text-transform: uppercase;
  margin: 0;
  color: #ffffff;
  font-size: 45px;
  font-weight: bold;
  font-family: Raleway;
  text-align:center;
  padding-top:30px;
}

.signature-info h2 {
  margin-top: 0;
  font-size: 16px;
  font-family: zapfino;
  color:#ffffff;
}

/* CONTACT */

#contact{
  background: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
        url("../images/back.jpeg");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  border-bottom: 1px solid #BE1E2E;
}

#contact .row{
  padding: 0;
}

#contact .contact-column {
  float: left;
  width: 33.3%;
  padding: 0% 0%;
  box-sizing: border-box;
}

#contact .contact-card {
  padding: 0 5%;
  text-align: center;
  color: #fff;
  font-size: 100%;
  font-weight: bolder;
  background-color: transparent;
  /*min-height: 15em;*/
  max-height: 15em;
}

#contact .contact-card h2{
  font-size: 160%;
}

#contact .contact-card li{
  font-size: 110%;
}

/* Clear floats after the columns */
#contact .row:after {
  content: "";
  display: table;
  clear: both;
}


/* CONTACT US */

#contact-us,
#opening-hours,
#location{
  margin-top: 3em;
  margin-bottom: 6em;
}

#contact-us ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
}

#contact-us li{
  text-align: center;
  padding: 0.2em 0 1em 0;
  font-weight: bolder;
}

#contact-us li a {
    color:#fff;
}

#contact-social-icons li{
  vertical-align: top;
  display: inline-block;
  padding-right: 0.6em;
}


/* OPENING HOURS */

#opening-hours ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
}

#opening-hours li{
  text-align: center;
  padding: 0.2em 0 1em 0;
}


/* LOCATION */

#location ul{
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
}

#location li{
  text-align: center;
  padding: 0.2em 0 1.2em 0;
}

#location a{
  text-decoration: none;
  color: #fff;
}

#location .btn {
  font-size: 16px;
  text-decoration: none;
  background: transparent;
  border-radius: 8px;
  border: 3px solid #ffffff;
  color: #ffffff;
  letter-spacing: 2px;
  padding: 10px 20px;
}

#location .btn:hover {
  background: #ffffff;
  color: #202020;
}




/* COPYRIGHT SECTION */

#copyright{
  margin: 0;
  /*width: 100%;*/
  height: auto;
 /* padding-top: 2em;*/
  color:#000;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size:60%;
  padding-left:1em;
  /*display:inline;
  float:left;*/
}

#author {
    margin: 0;
    /*width: 100%;*/
    height: auto;
   /* padding-top: 2px;
    padding-bottom: 1.5em;*/
    background: #fff;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 60%;
    padding-right: 1em;
    display: inline;
    float: right;
}


/* Mobile Devices */

@media screen and (max-width: 885px) {

  .column {
    width: 50%;
    display: block;
    margin-bottom: 3%;
  }

  #contact .contact-column {
    width: 100%;
    display: block;
  }


  #contact-us{
    margin-bottom: 0;
  }

  #opening-hours{
    margin-top: 0;
    margin-bottom: 0;
  }

  #location{
    margin-top: 0;
    margin-bottom: 4em;
  }

}



/* iPad */
@media screen and (max-width: 860px) {


#banner{
  /*padding-top: 225px;*/
  /*height: 80vh;*/
  /*background: url("../images/ipadbig.png");
  background-size: cover;*/

}

/*.banner-info{
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 7%;
  padding-left: 0;
  padding-bottom: 2.5%;
  text-align:center;
}

.banner-info h1{
  font-size: 3em;
}*/


/*.banner-info h2 {
  font-size: 1.5em;
}

.ubereats-info{
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 2%;
  padding-bottom: 3%;
  text-align:center;
}*/

/*.ubereats-info h3 {
  padding-top: 5%;
  padding-bottom: 7%;
  font-size: 33px;
}*/

/*#ubereats{
  margin-bottom: 5%;
  width: 55%;
}*/

#banner .animated{
  transform-origin: center;
}

#hpic{
  width: 80%;
  padding-top: 10px;
}



#about .row{
  padding-left: 5%;
  padding-right: 5%;
}

/*#about .about-column {
  width: 100%;
  padding-bottom: 1%;
}*/


/*#about .about-card {
  padding-top: 10%;
  padding-bottom: 20%;
  padding-left: 3%;
  padding-right: 3%;
  color: #000;
  background-color: #eee;
  min-height: 15em;
  max-height: 15em;
  font-size: 1.2em;
  text-align: center;
}*/

#about h1{
  padding-left: 0;
  /*margin-top: 2%;*/
}

/*#about p{
  font-size: 1.2em;
}*/

#about .row:after {
  content: "";
  display: table;
  clear: both;
}


#gpic{
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5%;
}



}

    /* iPhone */
    @media screen and (max-width: 600px) {

        #brand-logo {
            width: 110px;
        }

        .navbar {
            height: 70px;
            padding-top: 10px;
        }


        #banner {
            /* padding-top: 35vh;
  height: 70vh;*/
            background: url("../images/big.jpeg");
            background-size: auto;
            background-position: top;
            background-attachment: fixed;
        }

        /*.banner-info{
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 7%;
  padding-left: 0;
  padding-bottom: 2.5%;
  text-align:center;
}

.banner-info h1{
  font-size: 2.4em;
}*/


        .banner-info h2 {
            font-size: 1.5em;
        }

        /*.ubereats-info {
            margin-left: 10%;
            margin-right: 10%;
            padding-top: 3%;
            padding-bottom: 1%;
            text-align: center;
        }*/

        /*.harrow {
            margin-left: 10%;
            margin-right: 10%;
            padding-top: 2%;
            padding-bottom: 2%
        }*/

        #ubereats {
            margin-bottom: 1%;
            width: 92%;
        }

        #banner .animated {
            transform-origin: center;
        }




        /* ICONS */
        #h {
            padding-bottom: 6%;
            margin-bottom: 0;
        }

        .ht h1 {
            font-size: 1.5em;
            padding-top: 7%;
            padding-bottom: 3%;
        }

        #carlton {
            width: 70%;
        }


        /* CLUB NEWS */

        #c {
            padding-bottom: 8%;
        }


            #c .row {
                padding-left: 7%;
                padding-right: 7%;
            }

            #c .club-column {
                width: 100%;
                padding-bottom: 1%;
            }


            #c .club-card {
                padding-top: 10%;
                padding-bottom: 2%;
                padding-left: 3%;
                padding-right: 3%;
                color: #fff;
                background-color: transparent;
                font-size: 1em;
                text-align: center;
            }


            #c .row:after {
                content: "";
                display: table;
                clear: both;
            }




        /* STORY */
        #about {
            padding-bottom: 3em;
        }

            #about .story {
                color: #000;
                text-align: center;
            }

        .story h1 {
            color: #000;
            text-align: center;
            font-family: Raleway;
            font-size: 2.8em;
            margin-bottom: 0;
            padding-bottom: 0.6em;
            /*padding-top: 3em;*/
        }

        .story p {
            font-size: 1.2em;
            line-height: 1.5;
            margin-right: 1.5em;
            margin-left: 1.5em;
            padding-top: 0.8em;
            padding-bottom: 1.5em;
        }


        #about .row {
            padding-left: 7%;
            padding-right: 7%;
        }

       /* #about .about-column {
            width: 100%;
            padding-bottom: 1%;
        }*/


        /*#about .about-card {*/
            /*padding-top: 10%;
            padding-bottom: 25%;
            padding-left: 3%;
            padding-right: 3%;
            color: #000;
            background-color: #eee;*/
            /*min-height: 45em;
            max-height: 45em;*/
            /*font-size: 1em;*/
            /*text-align: center;
        }*/

        #about h1 {
            padding-left: 0;
            /*margin-top: 2%;*/
        }

        #whopic {
            background: url("../images/mteam.png");
        }


        #about .row:after {
            content: "";
            display: table;
            clear: both;
        }


        /* GALLERY */
        /*#g {
            background-color: #000;
            padding-bottom: 25%;
        }*/

        .gstory h1 {
            color: #fff;
            text-align: center;
            font-family: Raleway;
            font-size: 2.8em;
            margin-bottom: 0;
            padding-bottom: 0.6em;
            /*padding-top: 3em;*/
        }

        .gstory p {
            font-size: 1.2em;
            line-height: 1.5;
            margin-right: 1.5em;
            margin-left: 1.5em;
            padding-top: 0.8em;
            padding-bottom: 0.6em;
        }

        #gintro {
            font-size: 1.2em;
            padding-bottom: 0.6em;
        }

        #g .g-column {
            width: 100%;
            display: block;
        }

        #g .g-card {
            padding-top: 0;
            padding-bottom: 0;
            color: #fff;
            font-size: 1em;
            text-align: center;
        }

            #g .g-card p {
                margin-bottom: 0;
                padding-bottom: 0.5em;
            }

        #g .row {
            padding-left: 20px;
            padding-right: 20px;
        }

            #g .row:after {
                content: "";
                display: table;
                clear: both;
            }


        #signature h1 {
            margin-right: 1em;
            margin-left: 1em;
            margin-bottom: 0.7em;
            font-size: 2.2em;
        }

        #signature h2 {
            margin-bottom: 1em;
        }

        #contact {
            padding-top: 1.8em;
        }

            #contact .contact-column {
                width: 100%;
                display: block;
            }
    }

@media screen and (max-width: 505px) {
    #copyright {    
        padding-left: 0;
        display: block;
        float: none;
        clear:both;
    }

    #author {
        padding-right: 0;
        display: block;
        float: none;
        clear: both;       
    }
}

@media screen and (max-width: 767px) {
    .banner-info h1 {
        font-size: 40px;
    }

    .banner-info {
        /*width: 300px;*/
    }

    .ubereats-info {
        width: 300px;
    }

    .harrow {
        width: 300px;
    }

    .banner-info2 {
        width: 80%;
    }

    #about .row {
        display:block;
    }

    #about .about-column {
        width:100%;
        border:none;
    }
}

@media screen and (max-width: 625px) {
    .banner-info h1 {
        font-size: 30px;
    }

    .banner-info {
        /*width: 300px;*/
    }

    .ubereats-info {
        width: 300px;
    }

    .harrow {
        width: 300px;
    }
}

@media screen and (max-width: 500px) {
    .banner-info h1 {
        font-size: 20px;
    }

    .banner-info {
        /*width: 300px;*/
    }

    .banner-info2 {
        width: 95%;
    }

    .ubereats-info {
        width: 300px;
    }

    .harrow {
        width: 300px;
    }
}