/*
colours:
red     #c32c2c;
blue    #13135f;
off white #f3f7f7;	
*/
/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
html { height:100%; min-height:100%; }
body { min-height:100%; }
html,
body {
    background-color: #e0e0e0;
    color: #333333;
    font-size: 100%;
    font-family: 'Roboto', sans-serif;;
    font-weight: normal;
    text-rendering: optimizeLegibility;   
}
body, nav, ul, li, a  {
    margin: 0; 
    padding: 0; 
    }
li {
	list-style: none;
}
body a {
    text-decoration: none;
    color: #333333;
    }
.row {
    max-width: 1200px;
    margin: 0 auto;
}
.bold {
    font-weight: 700;   
	}
.clearfix {zoom:1}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.row {
    max-width: 1500px;
    margin: 0 auto;
}
.row800 {
    max-width: 800px;
    margin: 0 auto;
}
.row600 {
    max-width: 600px;
    margin: 0 auto;
    text-align: justify;
}
.row300 {
    max-width: 300px;
    margin: 0 auto;
}
section {
    padding: 2em 2%;
    line-height: 1.5em;
}
.red {
    color: #c32c2c;
    font-weight: 400;
    font-size: .8em;
}

/***************************************/
/*************TOP BANNER****************/
/***************************************/
.top {
    position: relative;
}
.top img{
    width: 100%;
    height: auto;
}
.callbutton {
    position: absolute;
    top: 1em;
    color: #ffffff;
    /* font-size: 1.5em; */
    background-color: rgb(19, 19, 95,0.5);
    padding: 10px;
    border-radius: 0 10px 10px 0;
    z-index: 9999;
}

#button {
  display: inline-block;
  background-color: #c32c2c;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}


.callbutton i {

    font-size: 1.5em;

}
/***************************************/
/*************NAVIGATION****************/
/***************************************/
.container {
  margin: 0 auto;
    width: 100%;
    padding: 0 2% 0 2%;
}

header {
  background: #C32C2C;
  color: #EBEBD3;
  padding:  0;
  position: relative;
}
/******clearfix - to allow container to be height of contents**************/
header::after {
  content: '';
  clear: both;
  display: block;
}
.logo {
    float: left;
    font-size: 1.25rem;
    color: #ffffff;
    font-weight: 400;
    padding: 10px 0;
}

.site-nav {
  position: absolute;
  top: 100%;
  right: 0%;
  background: #13135f;
  clip-path: circle(0px at top right);
  transition: clip-path ease-in-out 700ms;
}

.site-nav--open {
  clip-path: circle(250% at top right);
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  border-bottom: 1px solid #575766;
    
}

.site-nav li:last-child {
  border-bottom: none;
}

.site-nav a {
  color: #EBEBD3;
  display: block;
  padding: 1.5em 4em 1.5em 1.5em;
/*  text-transform: uppercase;*/
  text-decoration: none;
    font-size: .8em;
}

.site-nav a:hover,
.site-nav a:focus {
  background: #999999;
  color: #464655;
}

.site-nav--icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 1em;
  width: 1.1em;
  text-align: right;
/*  color: rgba(255,255,255,.4);*/
}

.menu-toggle {
  padding: 1em;
  margin-top: 10px;
  position: absolute;
/*  top: .5em;*/
  right: .5em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: #EBEBD3;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}
a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}
.anytaxi {
    background-color: #f4f1f1;	
}
.anycontainer {
    padding: 2em 0;
    display: flex;
    align-items:center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.anytaxi {
    font-size: .75em;
}
.anytaxi h1 {
    text-align:  left;
    padding: .5em 0;
}
.anytaxi h2 {
    text-align: left;
    padding: .5em 0;
}
.anytaxi-where  {
    color:#13135f;
    font-size: 1.5em;   
    font-weight: 100;
    text-align: center;
    background-color: #ffffff;
    padding: 10px;
    max-width: 120px;
    margin-bottom: 20px;
}
.anytaxi-where p  {
    padding: 5px;
    font-size: .75em;
}
.anytaxi-where img {
    width: 100%;
}

.anycontainer i {
    font-size: 1em;
    padding:0em;
    opacity: .5;
}
.sixcarunit img {
    width: 100%;
    padding: 5px;
} 
.anytaxi h3 {
    font-size: 2em;
    text-align: center;
}
.anytaxi.dates {
    font-size: 1em;
    line-height: 1.5em;
    padding-top:  50px;  
}
.anytaxi.dates h4 {
    padding-top: 15px;
}
/* .sixcarunit.dates {
    padding-bottom: 50px;
} */
.sixcarunit.dates h4 {
    color: #c32c2c;
    font-size: 1.5em;
    padding-top: 20px;
}
.anytaxi.dates h3{
    line-height: 1.5em;
}
/************************************/

.portunit {
    padding: 1em;
    font-size: .8em;
    flex: 1;
}
.portunit h2 {
    padding: 1em 0;
    font-size: 2em;
    color: #13135f;

}
.portpiccontainer {
    display: flex;
}
.portpics {
    flex:1;
}
/*************************************/
.exampleprices {
    text-align: center;
    padding-bottom: 2em;
}
.prices li {
    font-size: 1.5em;
    padding: 0 5px 5px;
    color:#c32c2c;
    text-align: center;
}
.getquote {
    background-color: #ffffff;
    text-align: justify;
}
.getquote p {
    padding: 1em; 0;
}

.quotebox {
    text-align: center;
    color: #ffffff;
    background:#13135f; 
    padding: 2em;
/*    margin: 2em;*/
    border-radius: 30px 30px 30px 30px;
}
.quotebox a{
    color: #ffffff;
}
.quotebox a:hover{
    color: #d6d0d0;
}
.reviews {
    background-image:url(../../img/review-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: none;
/*    background-attachment: fixed;*/
    font-weight: 400;    
}
.reference {
    background-color: rgb(250, 250, 250,0.5);
    color: #13135f;
/*    color: #ffffff;*/
    padding: 20px 20px 2em 20px;
    margin: 1em auto;
    border-radius: 30px 30px 30px 30px;
}
.reference h2 {
    font-size: 2.5em;
    padding: 1em 0;
    line-height: 1.42em;
}
.customer {
    text-align: right;
    padding: 1.5em 0;
}
.bournemouth-airport-prices {
    background-color: #ffffff;
}
.bournemouth-airport-prices ul{
    padding-top: 1em;
}
.bournemouth-airport-prices li{
    list-style: disc;
    list-style-position: inside;
    padding-left: 3em;
}
.any-airport  {
    color:#c32c2c;
    font-size: 1.5em;   
    font-weight: 400;
/*    text-align: center;*/
    background-color: #f0f0f0;
    margin: 15px;
    max-width: 150px;
    margin-bottom: 20px;
    text-align: center;
/*    border: 1px solid #333333;*/
}
.font5em {
    font-size: .5em;
}

.pricequote {
    background-color: #f0f0f0;
}
.pricequote p{
    padding: 20px 0;
}
.quotes{
        background-image:url(../../img/ukmap.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: none;
/*    background-attachment: fixed;*/
    font-weight: 400; 
/*    display: flex;*/
}
.quotes h1{
    text-align: center;
    font-size: 2.5em;
    margin:  2em auto; 
}
.quotesunit {
/*    flex: 1;*/
    padding: 10px;
}
.quotesunit h3 {
    padding: 1em 2em;
    font-size: 1em;
}
.quotethanks{
    text-align: center;
}
.formrow {
    display: flex;
    padding: 5px;
}
.formrow label {
    flex:1;
}
.formrow input {
    flex:2;
    background-color: #d3d2d2;
    border-radius: 25px;
    border: none;
    padding: 5px;
}

.formrow input:focus {
    flex:2;
    background-color: rgba(173, 179, 245, 0.78);
    border-radius: 25px;
    border: none;
    padding: 5px;
}

.formrow select {
    flex:2;
        background-color: #d3d2d2;
    border-radius: 25px;
    border: none;
    margin: 2px;
}
.formrow p {
    flex:.34;
}
.formrow.date select{
    max-width: 80px;
/*    text-align: right;*/
    flex:.67;
}
.formrow.time select{
    max-width: 60px;
/*    flex:1;*/
}

.formrow.return label {
    color: #ffffff;
    font-weight: 100;
    flex: 1;
}
.sinret {
    flex:2;
}
.sinret label {
    padding: 5px;
}
textarea {
    flex: 2;
    outline: none;
        background-color: #d3d2d2;
    border-radius: 25px;
    border: none;
    padding: 10px;
}
.quotecontainer h1 {
    color: #13135f;;
}
.quotecontainer h2 {
    color: #ffffff;
    font-size: 1.25em;
    font-weight: 400;
}
.quotecontainer p {
    color: #ffffff;
    font-size: 1.25em;
    font-weight: 100;
}
.quotecontainer  {
    background-color: #13135f;
    padding: 10px;
}
.send {
    background-color: #c32c2c;
    padding: 10px;
    border-radius: 15%;
    color: #ffffff;
    
}
.send:hover{
    background-color: #13135f;
    padding: 10px;
    border-radius: 15%;
    color: #ffffff;
    
}

/*
placeholder {
    background-color: #999999;
}*/
footer {
    background-color: #c32c2c;
    padding: 1em 2%;
    color: #e2e2e2;  
}
footer p {
    padding:  .5em 0;
    text-align: center;
    font-size: .75em;
}
.hiddenlink a {
    color: #e2e2e2;
}



/* add site nav */
site-nav {
    height: auto;
    position: relative;
    background: transparent;
    float: right;
    clip-path: initial;
    padding-top: 15px;    
  } 
  .site-nav li {
    display: inline-block;
    margin-left: 20px;
    padding-top: 15px;
    border: none;
    position: relative;
  }
.site-nav a::before {
    content: '';
    display: block;
    height: 5px;
    background-color: #13135f;
    position: absolute;
    top: 0;
    width: 0%;
    transition: all ease-in-out 250ms;
}      
.site-nav a:active,
.site-nav a:link {
    background: transparent;
    border-bottom: none;
    padding: 5px;
}  
.site-nav a:hover::before{
    width: 100%;
} 
.site-nav i  {
    font-size: 1em;
    } 










/****************** 700px *********88*/
/****************** 700px *********88*/
/****************** 700px *********88*/
/****************** 700px *********88*/
/* @media (min-width: 700px) { */
  /* .callbutton {
    position: absolute;
    top: 1em;;
    left: 0;
    color: #ffffff;
    font-size: 1.5em;
    background-color: rgb(19, 19, 95,0.5);
    margin: 0;
    padding: 2%;
    border-radius: 10px;
    z-index: 9999;
} */
.logo {
    font-size: 2em;
    padding: 20px 0;
 }
.animate__animated.animate__fadeInLeft {
  --animate-duration: 2s;
  padding-left: 20px;
}
  /* .menu-toggle {
    display: none;
  } */
  
.site-nav {
    height: auto;
    position: relative;
    background: transparent;
    float: right;
    clip-path: initial;
    padding-top: 15px;    
  } 
  .site-nav li {
    display: inline-block;
    /* margin-left: 30px; */
    padding-top: 15px;
    border: none;
/*********this allows posi of  hover over */
    position: relative;
  }
.site-nav a::before {
    content: '';
    display: block;
    height: 5px;
    background-color: #13135f;
    position: absolute;
    top: 0;
    width: 0%;
    transition: all ease-in-out 250ms;
}      
.site-nav a:active,
.site-nav a:link {
    background: transparent;
    border-bottom: none;
    padding: 5px;
}  
.site-nav a:hover::before{
    width: 100%;
} 
.site-nav i  {
    font-size: 1em;
    } 
.sixcarcontainer  {
    display: flex;
    } 
.sixcarunit  {
    flex:1;
    }
     
.sixcarunit li {
    text-align: center;
    }
 .sixcarunit img {
     width: 100%;
 }   
.exampleprices {
    text-align: center;
    padding-bottom: 2em;
}
.exampleprices i {
    padding: 10px;
    font-size: 2em;
    color:#c32c2c; 
}
.prices li i{
/*
    font-size: 1em;
    padding:  0px;
*/
    color:#c32c2c;
}
.anytaxi h1 {
    text-align: center;
    padding: 1.5em;
}    
.anytaxi h2 {
    text-align: center;
    padding: 1.5em 0;
}
.anycontainer {
    padding: 2em 0;
    display: flex;
    align-items:center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.anytaxi {
    font-size: .75em;
}
.anytaxi h1 {
    text-align: center;
    padding: 1.5em;
}
.anytaxi h2 {
    text-align: center;
    padding: 1.5em;
}
.row175{
    text-align: center;
}    
.anytaxi-where  {
    color:#13135f;
    font-size: 1.5em;   
    font-weight: 100;
    text-align: center;
    background-color: #ffffff;
    margin: 10px;
    max-width: 150px;
    margin-bottom: 20px;
}    
.any-airport  {
    color:#c32c2c;
    font-size: 1.5em;   
    font-weight: 400;
/*    text-align: center;*/
    background-color: #f5f3f3;
    margin: 20px;
    max-width: 150px;
    margin-bottom: 20px;
    text-align: center;
}
.anytaxi-where p  {
    padding: 10px;
}
.anytaxi-where img {
    width: 100%;
}
.any-airport img {
    width: 100%;
}

.anycontainer i {
    font-size: 1em;
    padding: .5em;
    opacity: .5;
}
.reviews {
    background-image:url(../../img/review-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: none;
    background-attachment: fixed;
    font-weight: 400;    
}
.reference {
    background-color: rgb(250, 250, 250,0.8);
    color: #13135f;
/*    color: #ffffff;*/
    padding: 20px 20px 2em 20px;
    margin: 10em auto;
    border-radius: 30px 30px 30px 30px;
} 
.bournemouth-airport-prices h1 {
    font-size: 2em;
    text-align: center;
}
.portcontainer {
    display: flex;
}
.quotes{
    background-color: #ffffff;
    background-image:url(../../img/ukmap.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: none;
    background-attachment: fixed;
    font-weight: 400;
    display: flex;
}


.quotesunit {
    flex: 1;
    padding: 10px;
}
.quick {
    max-width: 300px;
}
@media (max-width: 700px) {
  .site-nav {
      float: left;
      padding-top: 0px;
  } 
  .logo {
    font-size: 1.25em;
    padding-bottom: 0;
 } 
 .callbutton: {
     font-size: 1;
 }
 .sixcarcontainer  {
    display: flex;
    } 
.sixcarcontainer  {
    flex-direction: column;
    }
.anycontainer {
    flex-direction: column;
}
.anytaxi-where {
    max-width: 350px;
}
}