/******************************************************************
Theme Name: Simpsons Creative Grid 2020
Description: A responsive theme for WordPress, developed by Simpsons Creative, allowing for development of responsive websites - through the use of a dynamic grid system.
Author: Alex Wells
Version: 3.0
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support
******************************************************************/


@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto:wght@400;700&display=swap');


/*
font-family: 'Lato', sans-serif; - BODY COPY
font-family: 'Roboto', sans-serif; - HEADINGS
 */


/* Site Structure */
body
{
	font-family: 'Lato',Arial, Helvetica, sans-serif;
	font-size: calc(12px + 0.5vw); /* Responsive base font size */

}

/* Website Maximum Width - Default: 1920px */
.site-width { max-width: 1280px; }

/*Website Inner Width - Default: 1280px*/
.inner-width { max-width: 1280px; }

/*Post Maximum Width - Default: 960px*/
.single-post article.post { max-width: 960px; margin:0 auto; }

/*Header*/

/*Footer*/
#footer {background-color: pink;}
.inner-footer { background-color: purple; }

.right { float: right; }




/*==================== Standards ====================*/
	/* 'Standards' contains all of the code that you're likely to change - font sizes, colors, buttons, etc. */

	/*Text*/
		h1, h2, h3, h4, h5, h6, p { margin: 0 0 5px 0; color: #000; }
		h1, h2, h3, h4, h5, h6 { font-family: Lato, sans-serif; font-style: normal; }

		a { color: #00A5DD; text-decoration: none; }
		a:hover { text-decoration: underline; color :#00A5DD; }
		a:visited { color: #0095C7; }
		h1 { font-size: 2.2em; color: white; font-weight:100; width: 100%; text-align:center; padding:1em 0; text-transform: capitalize;}
		h2 { font-size: 1.8em; padding-bottom: 0.8em; padding-top: 0.8em; font-weight: 300; text-align: center; }
		h3 { font-size: 1.3em; padding-bottom: 0.8em; }
		h4 { font-size: 1.1em; }
		h5 { font-size: 1.243em; }
		h6 { font-size: 1.132em; }
		p, #content li { font-family: 'Lato', sans-serif;  font-size: 0.9em; line-height: 1.6em;padding-bottom: 1.5em; font-weight: 200; }

		#content { clear: both; }
		#content li { margin-left:20px; padding-bottom: 1.1em; }
		#content ul { margin-bottom: 1.5em; }



.single-post h1 {color: #0E4EA3;}


	/*Gallery Caption*/
		.wp-caption-text, .gallery-caption { text-align: center; }

	/*Bullet Points/Numbered Lists*/
		.entry-content ul > li { list-style-type: disc; color: #000; padding-bottom: 5px; }
		.entry-content ol > li { list-style-type: decimal; padding-bottom: 5px; }


/*==================== Header ====================*/


.header {

background-color: #004EA2;


padding: 20px 0;
	/*min-height: 900px;
	height: 100vh;*/ width: 100%;


    border-bottom: solid 3px white;

    position: relative;

    }





body.page .header {

background: rgb(41,169,225);
background: linear-gradient(0deg, rgba(14,71,115,1) 0%, rgba(41,169,225,1) 100%);


    background-image: linear-gradient(to bottom, #194491 0, #37a6d2 100%);




    background: linear-gradient(-45deg, #ee7752, #FF4141, #194491, #37a6d2);



   background-size: 400% 400%;
    animation: gradient 15s ease infinite;



}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}




.blueBG {
background: rgb(41,169,225);
background: linear-gradient(0deg, rgba(14,71,115,1) 0%, rgba(41,169,225,1) 100%);
background-image: linear-gradient(to bottom, #194491 0, #37a6d2 100%);
}


.blueBG p { color: white; }


 .article-header { width: 100%; display: block; clear:both; }

/*==================== Nav ====================*/
	.nav { float: right; background: none; margin-top: 60px; }
	.nav ul { background: none; }
	.nav ul a { color: #fff; }
	.nav ul a:hover { color: #fff; text-decoration:underline; }
	.nav ul li:last-of-type a { padding-right: 0px; }

/*==================== Body ====================*/
	.wp-block-image figcaption { color: #888888; margin-bottom: 30px; }
	.wp-block-image.size-full { margin-bottom: 30px;  }
	.wp-block-image.size-full figcaption { text-align: center; color: #fff; margin-bottom: 10px; }
	.article-header img { padding-bottom: 1.5em; }






/**
 * Reusable bits
 */

a.cta { background-color: #FF7600; padding: 20px; color: white; border-radius: 5px;

margin:10px auto;
display: inline-block;




display: block;
width:25%;
text-align:center;


}


a.ctaCenter{display: block;
width:25%;
text-align:center;}

a.CTABlue { background-color: #1C7CD5; }
/*==================== Home Page ====================*/

h2.blueBGH2 { color: white; }


	.frontPageImage { width: 70%; height: auto; margin:0 15%; }

	.frontPageImage img{width: 100%; height: auto;}



#content { background-color: white;  clear: both; display: block;

	  background-image: url('https://www.alex-wells.co.uk/wp-content/themes/SCGrid-2020/library/images/LogoBackground.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
padding-top:40px;

  }


.whatIDo {  justify-content: space-between; margin-bottom:50px;}
.whatIDo div {
   padding: 20px; width: 32%;   background-color: white;

display:flex; flex-direction:column;

margin-bottom: 50px;

}



.whatIDo img {margin:0 auto 20px auto; display: block;}

.whatIDo h3, .whatIDo p{text-align: center;}

.whatIDo p {font-weight:300; color:#000;}
.whatIDo a.cta  {margin: 0 auto; display: block; width: 70%; text-align: center; background-color: #FAD24D; color: #373A3C; border:solid 1px #1C7CD5;


margin-top: auto;

}

.whatIDo a.cta:hover {color: #FAD24D; background-color: #1C7CD5; text-decoration:none;}



.section {margin: 50px 0px; width: 100%; clear: both;display: block;}



.homeHeader {display:flex; flex-direction: row; justify-content: space-between; padding: 5vh 0; flex-wrap: wrap; }
.homeHeaderCopy { flex-basis: 40%;}
.homeHeaderImage { flex-basis: 50%; }
.homeHeaderImage img { width: 100%; height: auto; }
.homeHeader h1 {text-align: left; padding-bottom: 10px; font-size:3em;}
.homeHeader p, .homeHeader p a {color: white;}


a.homeFICTA { margin-bottom: 40px; background-color: #FAD24D; color: #004EA2;margin:10px 0; width: 60%;
 }



/**
 * Home blog posts
 */

.homeBlog {}

.blog-post {display:flex; flex-direction:column;

margin-bottom: 50px;}
.blog-post h3{padding-bottom:0px; padding-top: 10px;}
.blog-post p{padding-bottom:10px;}
.blog-post p.post-date{font-size: 70%; }
.blog-post p{font-weight:300;}







/*==================== Latest News ====================*/
	#news.inner-content { padding-top: 0px; }
	.latest-news { background-color: #F5F5F5; padding: 30px 20px; }
	.latest-news .news-post { padding: 0px 10px; }
	.latest-news h1 { padding-top: 0px; padding-left: 10px; }
	.latest-news img.post-image { margin-bottom: 20px; }
	.latest-news .post-text a:hover { text-decoration: none; }
	.latest-news h3.post-title { font-size: 1em; font-weight: 700; padding-bottom: 0px; }
	.latest-news p.post-date { font-size: 0.8em; line-height: normal; padding-bottom: 5px; }
	.latest-news p.post-excerpt { font-size: 0.8em; }
	.latest-news a.button, #content .latest-news a.button { margin-bottom: 0px; }


/*==================== News/Blog Page ====================*/
	.blog .inner-content { padding: 30px 10px; }
	.blog h1.page-title, .category h1.page-title { padding-left: 10px; }
	.all-news { justify-content: flex-start; margin-bottom: 0px; }
	.all-news .news-post { padding: 0px 10px; margin-bottom: 40px; }
	.news-post img { margin-bottom: 20px; }
	.news-post h3.post-title, #content .news-post h3.post-title { font-size: 1em; font-weight: 700; text-align: left; padding-bottom: 0px; margin-bottom: 10px; }
	.news-post p.post-date, #content .news-post p.post-date { font-size: 0.8em; line-height: normal; margin-bottom: 10px; padding-bottom: 0px; }
	.news-post p.post-excerpt, #content .news-post p.post-excerpt { font-size: 0.8em; padding-bottom: 0px; }
	.inner-content .news-post a { word-break: break-word; font-size: 0.8em; font-weight:bold; color: #1a4a95;  }

	/* Flexbox Changes */
	.latest-news { justify-content: flex-start; }
	.latest-news h1 { width: 100%; }
	.news-post { display: flex; }
	.news-post .post-wrap { display: flex; flex-direction: column; }
	.news-post .post-wrap p { flex: 1 0 auto; }
	.news-post a.button, #content .all-news .news-post a.button { width: fit-content;  }




/*==================== Pagination ====================*/
	.pagination, #content .pagination { text-align: center; width: 100%; clear: both; padding: 20px 0px; }
	.pagination ul, #content .pagination ul {display: inline-block;background-color: white;white-space: nowrap;padding: 0;margin: 0;clear: both;border-radius: 3px;}
	.pagination li, #content .pagination li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; }
	.pagination a, .pagination span, #content .pagination a, #content .pagination span { margin: 0; text-decoration: none; padding: 0; line-height: 14px; font-size: 14px; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #2592E9; }
	.pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: #2592E9 !important; color: white !important; }
	.pagination .current, #content .pagination .current { cursor: default; color: #fff !important; background-color: #2592E9; }
	.pagination .current:hover, .pagination .current:focus { background-color: #2592E9; color: white !important; }


/*==================== Landing page  - Home page ====================*/



/*==================== Footer ====================*/
#footer {background-color: #004EA2; padding:40px 0;}
.inner-footer {background:none;}

#footer img { margin:0 auto; display:block; width: 75px; }

#footer .nav { margin:0 auto; margin-top:20px; float: none; width: 700px;}
 #footer .nav a { font-weight:300; color: white; font-size: 14px; }




p.byline{ font-weight: bold; }

/**
 * Blog sign off section
 */

.signoff {display: flex; justify-content: space-between; border-top: 3px #0E4EA3 solid; padding: 30px 0px; margin-top: 30px;}
.signoff .image { flex-basis: 30%; }
	.signoff .image img{border-radius: 125px;}
.signoff .message { flex-basis: 65%; display: flex; flex-direction:column; padding-top: 20px;}
	.signoff .message h3 { padding-bottom: 0; }
	.signoff .message p { padding-bottom: 0; }
	.signoff .message img.linkedIn { margin: 0 auto; width: 50%; }


body.page-id-2725 #content {display: none;}
/*==================== Media Queries ====================*/
	@media (max-width:1340px)
	{
		.inner-width, .inner-header, .section  { padding:0 20px; }
	}

	@media (max-width: 1280px)
	{
		/*Small Desktop*/
	}
	@media (max-width: 1029px)
	{
		/*Tablet*/


		.whatIDo img {

			width: 90%; margin-left: 5%; margin-right:5%;
		}


		.inner-content {padding-left: 20px; padding-right: 20px;}
	}
	@media (max-width: 960px)
	{
 		.blog-grid .d-1of3 { width: 50%; flex-basis: 49%; }

 		a.cta {  width: 90%;}

		.homeHeaderCopy { flex-basis: 50%;}
		.homeHeaderImage { flex-basis: 50%;  padding-top: 5%;}



	}
	@media (max-width: 767px)
	{

		#logo { width: 100%; padding:0 15%; }
		a.homeFICTA {width: 60%;}
		/*Mobile*/
		.blog-grid .d-1of3 {width: 100%; flex-basis: 100%;}

		/*=== Landing page  - Home page===*/
		 .intro h1 { font-size: 3em; }


		.homeHeader {  }
		.homeHeaderCopy { flex-basis: 100%; clear: both;}
		.homeHeaderImage { flex-basis: 100%;  padding: 0%; order: -1;}
		.homeHeaderImage img {  padding: 0% 20%; }


		a.homeFICTA {  margin:10px auto; width: 50%;}

		.homeHeader h1,
		.homeHeader p {text-align: center;}

}


	}
	@media (max-width: 480px)
	{
		/*Small Mobile*/
		a.homeFICTA {width:80%;}

		/*=== Landing page  - Home page===*/
		.intro { padding: 200px 12%; }
		.intro p.seemore { font-size: 2em; }




		#footer .nav, #footer .nav li {width:100%; text-align: center;}




	}


/*==================== Animation Styles ====================*/

/* ScrollMagic Animation */
.scrollMagic
{
	opacity: 0;
	-webkit-transform: scale(0.9);
		 -moz-transform: scale(0.9);
			-ms-transform: scale(0.9);
			 -o-transform: scale(0.9);
					transform: scale(0.9);
	-webkit-transition: all 1s ease-in-out;
		 -moz-transition: all 1s ease-in-out;
			-ms-transition: all 1s ease-in-out;
			 -o-transition: all 1s ease-in-out;
					transition: all 1s ease-in-out;
}

.scrollMagic.show
{
	opacity: 1;
	-webkit-transform: none;
		 -moz-transform: none;
			-ms-transform: none;
			 -o-transform: none;
					transform: none;
}

 .fadeInTop
 {
 }

 .fadeInTop.show
 {
 	-webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.25s both;
	        animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.25s both;
 }


/* Animista.net Generated */

/* ----------------------------------------------
 * Generated by Animista on 2020-6-15 17:18:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}