/*
   ======================================

   Written by: Steve Beeston
   Date:       1st November 2016
   Purpose:    Style sheet for stevebeeston.co.uk

   ======================================
*/






/*
   ======================================
   STYLES
   ======================================
*/


@import url(grid.css);
@import url(menu.css);









/*
   ======================================
   FONTS
   ======================================
*/


/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v24-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}









* {
   padding: 0;
   margin: 0;
}

body {
   background: #444;
   font-family: 'Open Sans', arial, sans-serif;
}


/* For debugging only */
.column, .columns {border: 0px solid red;}



/*
   ======
   LAYOUT
   ======
*/

.outer-wrapper {
   position: relative;
   float: left;
   width: 100%;
   min-height: 100%;
   background: #333;
}

header, footer {
	width:100%;
}


.top-row .columns {
   padding-top: 0;
}

.inner-wrapper {
   position: relative;
	margin: 0 auto;
   width: 100%;
   max-width: 1000px; /* Note: banner and carousel images are currently 1000px wode so this cannot be larger without compromising quality */
}

header {
   width: 100%;
   height: 36px;
   background: #eee;
   background: -moz-linear-gradient(top, #f4f4f4, #dbdbdb);
   background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#dbdbdb));
   border-top: 4px solid #ce992e;
}

footer {
   float: left;
   width: 100%;
   background: #066;
}

.header .columns {
   padding-bottom: 5px;
}


a.footer-social-icon img {
   max-width: 48px;
   text-decoration: none;
}

a.footer-social-icon {
   border-width: 0;
   margin-left: 3px;
}


#footer ul {
    list-style-type: none;
    margin-left: 0;
}

footer .column,
footer .columns {
   padding-bottom: 5px;
}

.top-bar {
   padding: 0;
}

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

.text-left {
   text-align: left;
}

.center {
   text-align: center;
}

.more-padding {
   padding: 15px 110px;
}

.no-padding-top {
   padding-top: 0;
}

/* SRB 13/6/25
	Narrow column introduced for newer galleries */

.narrow-column-700 {
	max-width: 700px;
	margin: auto; 
	text-align: left
}

/* SRB 05/01/20 */
div.paypal-button-container {
   width: 100%;
   max-width: 290px;
   margin: 10px auto 20px;
}

.spacer {
    float: left;
    height: 30px;
    width: 100%;
    background: #333;
}

/*
   ==========
   TYPOGRAPHY
   ==========
*/

h1, h2, p, a, li, td, label {
   color: #ccc; 
}

p, a {
   padding: 10px 0;
}

h1, h2, h3, h4 {
   font-family: montserrat, arvo, serif; 
   font-weight: 600; /* replaced with line below SRB 31/12/19 */
   font-weight: 400; 
   color: rgba(255, 255, 255, 0.8);
   letter-spacing: 0.1em;
   text-shadow: #444 1px 1px 3px;
}

h1 {
   font-size: 50px; 
   padding: 8px 0;
   text-transform: uppercase;
}

h2 {
   font-size: 40px;    
   padding: 10px 0; /* was 30px SRB 28/7/19 */
   text-transform: uppercase;
}

#gallery h2 {
   font-size: 30px;
}

h3 {
   font-size: 30px; 
   padding: 10px 0; /* was 20px SRB 28/7/19 */
   font-smoothing: antialiased !important;
}

h4 {
   font-size: 24px; 
   padding: 16px 0;
   font-smoothing: antialiased !important;
   text-transform: uppercase;
}

p, a, li, td, label, input, .input {
   font-family: 'Open Sans', sans-serif; 
   /* ----- SRB 14/7/19
   font-size: 17px; 
   line-height: 28px; */
   /* font-size: 16px; --- SRB 9/10/21 --- replaced with line below ecause Open Sanes was suddenly looking very jagged on Windows */
   font-size: 16.1px; 
   line-height: 26px;
}

a { 
   text-decoration: none;
   border-bottom: 1px dotted #888;
   padding-bottom: 0;
}


#footer a {
   border-bottom: none;
}

/* SRB 11/7/24 */
#footer {
   background-color: #066;
}

/* SRB 11/7/24 */
#web-d #footer {
   background-color: #222;
}

header.social-icons {
   text-align: right;
}

.home-tricolumn p,
.home-tricolumn a {
   font-size: 15px;
}

p.first::first-letter, p.first:first-letter {
    font-family: Arvo, verdana, arial, "sans serif";
    font-size: 200%;
    margin-right: 0.2rem;
    line-height: 2rem;
    float: left;
    font-size: 3.2rem;
    margin-top: 0.8rem;
}

/*
	Magazine layout SRB June 2025
*/

article.magazine h1 {
	font: 40px 'Anton'; 
	color: gray; 
	text-shadow:none; 
	letter-spacing: 1px; 
	text-align: left;
	margin-top:0;
}

article.magazine p {
	font-family: 'Roboto Serif'; 
	font-size: 1rem; 
	line-height: 1.7rem; 
	text-align: left; 
	margin: 20px 0px
}

/*
   ============
   CONTACT FORM
   ============
*/

label {
   /* display: block; SRB 4/11/16 */
	margin-top: 5px;
   margin-right:10px;
   text-align: center;
   width: 80px;
   line-height: 25px;
}
		
.input {
   padding: 5px;
   margin: 5px 0px;
   border: 1px solid #b9bdc1;
   width: 400px;
   color: #333;
   background: #eee;
   margin-bottom: 15px;
}

input[type="submit"] {
   padding: 5px 15px;
}   

input[type="submit"]:hover {
   background: #fff;
   transition-duration: 200ms;
}   


div.url {
   display: none;
}

div.nav-panel {
   position: relative;
   width: 100%;
}

div.nav-panel h2 {
   position: absolute;
   top: 40%;
   width: 100%;
   color: rgba(255, 255, 255, 0.8);
   font-size: 35px;
   text-transform: uppercase;
   text-shadow: #444 3px 3px 3px;
}


/*
   ================================
   GALLERIES
   ================================
*/

#galleries li {
   list-style: none;
}

.gallery {
   /* SRB 28/12/19
   float: left;
   width: 280px; 
   */
   margin-bottom: 0px;
	text-align: center;
   padding: 5px 10px;
   border: 0px solid blue;
   margin: 0 auto;
}

.gallery h2 {
   font-size: 16px;
   padding: 2px 0;
}

.gallery p {
   font-size: 14px;
   line-height: 20px;
   padding: 4px 0 10px;
}

.gallery a {
   border-bottom: none;
}

.gallery-button a {
   background: #006658;
   padding: 5px; 
	color: #eee; 
	border: #666 2px solid;
	border-radius: 5px;
   font-size: 14px;
}

.gallery-button a:hover {
   background: #ff6633;
   text-decoration:none;
   transition: all 300ms ease;
}

.gallery-image a {
   border: none;
}

.pan-gallery-caption {
   border-top: 1px solid silver;
   margin-top: 15px;
}

p.publication-date {
    font-style: italic;
    color: silver;
    text-align: center;
}

.small {
   font-size: 0.9rem;
   line-height: 1.4rem; 
}



/* 
   ================================
   BUTTONS
   ================================
*/

a.button {
   padding-top: 0.875rem;
   padding-right: 1.75rem;
   padding-bottom: 0.9375rem;
   padding-left: 1.75rem;
   background: #066;
   border-color: #055;
   color: #ddd;
   transition: background-color 300ms ease-out;
   border-width: 0;
}

a.small-button {
   font-size: 14px;
   padding: 6px 10px;
}

a.button:hover {
   background: #f63;
   border-color: #f52;
}

input[type=submit].button {
   background: #BD1E2C;
   background: #066; /* SRB 12/1/21 00644 */
   padding: 5px;
   color: #bbb;
   border: #888 2px solid;
   border-radius: 5px;
   font-size: 14px;
   cursor: pointer;
}

input[type=submit].button:hover {
   color: #ccc;
   border-color: #aaa;
   background-color: #f63; /* SRB 12/1/21 00644 */
}

/* 
   ================================
   PRICING TABLE
   ================================
*/

.pricing-table {
   border: solid 1px #666;
   margin-left: 0;
   margin-bottom: 1.25rem;
   margin: 5px 10px;
}

.pricing-table>.title {
   background:#006658!important; 
   font-size: 18px;
   line-height: 1.3rem; 
   padding: 0.9375rem 1rem;
}

.pricing-table>.price {
   color: #eee;
   background-color: #555;
}

.pricing-table>.description {
   font-size: 14px;
   color: #eee;
   background-color: #3b3b3b;
   border-bottom: dotted 1px #666;
}

.pricing-table>.description table {
   background-color: #3b3b3b;
   font-size: 14px;
}

.pricing-table>.bullet-item {
   font-size: 14px;
   color: #eee;
   background-color: #3b3b3b;
   border-bottom: dotted 1px #666;
}

.pricing-table>.cta-button {
   padding: 1.25rem 1.25rem 0;
}

.pricing-table>.cta-button a {
   display: inline-block;
   margin-bottom: 15px;
}


/* 
   ================================
   MESSAGES 
   ================================
*/

.success, 
.failure {
   font-weight: bold;
   font-size: 13px;
   display: inline; 
   padding: 6px; 
   border-radius: 4px; 
   border-width: 2px; 
   border-style: solid; 
   margin: 3px;
   background: #066;
}

.success {
   color: white; 
}

.failure {
   color: white; 
   background-color: #f63
}

.error {
   font-family: verdana, arial, sans-serif;
   font-size: 11px;
   color: white; 
   background-color: red; 
   margin: 0 5px; 
   padding: 2px 10px; 
   border-radius: 10px;
}



/*
   ===============================
   FLEX STUFF
   ===============================
*/



.flex-container {
   padding: 0;
   margin: 0;
   list-style: none;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   -webkit-flex-flow: row wrap;
   justify-content: flex-start;
}

.flex-item, .flex-item50 {
   /* background: white; SRB 28/12/19 */
   /* padding-right: 10px; SRB 28/12/19 */
   width: 33.3%;
   height: 100%;
   margin-top: 10px;
   color: white;
}

/* SRB 7/6/25 */
.flex-item50 {
	width: 50%;
}

.flex-item50 .gallery a img {
		width: 100%;
}



/*
   ===============================
   BOTTOM PROMO PANEL 3/11/25
   ===============================
*/

div.bottom-promo-panel {
	background-color: #066
}

.bottom-promo-panel p {
	color: white
}

.bottom-promo-panel p a {
	color: inherit; padding: 0
}
	
.bottom-promo-panel p.large {
	font-size: 1.5rem;
	font-weight: 200;
	font-family: questrial;
	letter-spacing: 1px;
}





.testimonial {
   padding: 30px 10%;
   font-family: georgia, serif;
   font-size: 26px;
   font-style: italic;
   width: 80%;
   border: 1px solid #666;
   border-radius: 20px;
   color: #bbb;
   line-height: 40px;
   margin: 20px auto;
}



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

   div.nav-panel h2 {
      font-size: 25px;
   }

   .more-padding {
      padding: 15px;
   }

}


/*
   ===========================================================
   F L E X   R E L A T E D   R E S P O N S I V E   S T U F F
   ===========================================================
*/

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

   h4 {
      font-size: 22px;
   }

}


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

   .flex-item, .flex-item50 {
      width: 100%;
   }
   
   h4 {
      font-size: 22px;
   }

}


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


   .text-right,
   .text-left,
   .social-icons {
      text-align: center;
   }

   li {
      list-style-type: none;
   }

   #contactform {
      width: 100%;
      max-width: none;
   }

   .testimonial {
      padding: 20px 4%;
      font-size: 22px;  
      line-height: 32px;
      width: 94%;
      margin: 10px auto;
   }

   h2 {
      font-size: 28px;
   }

   h3{
      font-size: 24px;
   }

}


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


   .featurebox {
      width: 100%;
      text-align: center;
   }


}



@media only screen and (max-width: 530px) {
   label {
      text-align: center;
      width: 100%;
   }

   .input {
      width: 100%;
   }
}