/*
 Theme Name:   SSUK
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  SSUK
 Author:       Shelli Walsh
 Author URI:   http://shellshockuk.com
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  ssuk
*/





/*-----------------------------------------------------*/


* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}



/*-----------------------------------------------------*/


body, html { margin: 0px; }

		
.full-page {height: 100%;}
	
	
.clear { clear: both; }
	
	
.wrap {	width: 1024px; margin: 0px auto; }
.text-wrap { margin: 0px 50px; }

		
.underline { border-bottom: 1px solid #000;  clear: both; margin: 25px 0;}
.underline-white { border-bottom: 1px solid #fff;  clear: both; margin: 25px 0;}
.slide-blank>underline { color: #fff;}

/*-----------------------------------------------------*/
	

header {
	min-height: 150px;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
	background-color: #fff;
	padding-top: 25px;
	}
	
#logo {
	float: left;
	width: 350px;
	height: 100px;
	padding: 10px 0 25px 0;
	top: 25px;
	left: -1px;
	background-image: url('/images/logo-sprite.png'); background-position: 0px 0px; background-repeat: no-repeat;
	}
#logo:hover {background-image: url('/images/logo-sprite.png'); background-position: 0px -102px; background-repeat: no-repeat;} 

	
#twitter {
	float: right;
	margin: 0px 25px; 0px 0px;
	background: url('/images/spritely.png') -905px 0px no-repeat; 
	height: 35px; width: 35px;}
	
	
#twitter:hover { background-position: -905px -38px;}
	
	
/*-----------------------------------------------------*/

@font-face {
    font-family: 'farao_bookbold';
    src: url('/fonts/faraobook-bold-webfont.eot');
    src: url('/fonts/faraobook-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/faraobook-bold-webfont.woff2') format('woff2'),
         url('/fonts/faraobook-bold-webfont.woff') format('woff'),
         url('/fonts/faraobook-bold-webfont.ttf') format('truetype'),
         url('/fonts/faraobook-bold-webfont.svg#farao_bookbold') format('svg');
    font-weight: normal;
    font-style: normal;
}



body, p, ul, li  {font-family: helvetica, arial, sans-serif; font-size: 100%; line-height: 125%;}
p a { color: #f26536;}


h1, h2, h3 {font-family: 'farao_bookbold', helvetica, arial, sans-serif;  line-height: 100%; } 
/* h1 a:link { color: #f26536;} */


h1 { font-size: 2.5em; }   /* 40 */
h2 { font-size: 1.51em; }    /* 24 */

.text-01, .text-02, .text-03, .text-04, .text-05 {font-family: 'farao_bookbold', helvetica, arial, sans-serif; padding: 0px; line-height: 100%;} 
.text-01 { font-size: 1.8751em; }  /* 30 */
.text-02 { font-size: 1.8751em; }  /* 30 */
.text-03 { font-size: 1.8751em; }  /* 30 */
.text-04 { font-family: helvetica, arial, sans-serif; font-weight:bold; font-size: 1.51em; }    /* 24 */
.text-05 { font-family: helvetica, arial, sans-serif; font-weight:bold; font-size: 1.250em; }  /* 20 */

	
.slide-top h1 {font-size: 7em;  color: #fff; margin: 0px;	}	
.slide-top h2 {	  font-size: 2.2em;  margin: 0px;}
.slide-top h3 {font-size: 1.6em;  margin: 75px 150px 0px; padding: 25px 0px;
			border-top: 2px solid #fff; 
		border-bottom: 2px solid #fff;
}

.text-left p {font-family: 'farao_bookbold', helvetica, arial, sans-serif; font-size: 1.51em; margin-bottom: 0px; }    /* 24 */
.text-left h2 {margin-bottom: 0px; }



.quote {font-size: 16px; font-style: italic; 
		padding: 25px 50px 25px 0px;
		margin: 25px 0;
		border-top: 2px solid #e5e5e5; 
		border-bottom: 2px solid #e5e5e5;}
		
.text-align-center {text-align: center;}
.text-align-right {text-align: right;}

img.wpcf7-captchac, img.ajax-loader {
	width: auto;
}

/*-----------------------------------------------------*/



.headlines {
	position: relative;
	display: block;
	width: 100%;
	height: 125px;
	margin: 80px 0 25px 0;
	
}
	
.headline {
	position: absolute;
	text-align: center;
	width: 1024px;
	height: 125px;
	background-color: #f26536;
	}	
  /*-----------------------------------------------------*/
	
	
	
#menu {
	float: right;
	clear: right;
	text-align: right;
	}
#menu ul { 
    display: inline-block;
 	padding: 18px 25px 10px 0;
	font-size: 12px; 
	font-family: helvetica, arial, sans-serif;
	font-weight: bold;
	list-style-type: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 5px solid #333;
	}
#menu ul:hover {
	border-bottom: 5px solid #f26536;
	}
#menu ul a { 
	color: #000000;
	text-decoration: none;
	}
#menu ul a:hover { 
	color: #f26536;
	}
#menu li.current-menu-item a {
		color: #f26536;
}
#menu li { 
	display: inline; 
	text-align: right;
	}


/*-----------------------------------------------------*/

	
a,
p a,
p a:link,
li a:link { 
	color: #f26536;
	}

a:link { 
	color: #f26536;
	text-decoration: none;
	}
a:visited { 
	color: #f26536;
	text-decoration: none;
	}
a:hover,
li a:hover { 
	color: #64C9EA;
	}
a:active { 
	color: #64C9EA;
	}	

/*-----------------------------------------------------*/	

	
.button {
	display: inline-block;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	font-family: 'farao_bookbold', helvetica, arial, sans-serif;
	width: 175px;
	height: 50px;
	border: 4px solid #000;
	text-align: center;
	font-size: 0.75em;
	padding: 12px 0px;
	text-transform: uppercase;
	margin: 10px;
	}

.button:hover {
	background-color: #000;
	color: #fff;
}

.button.a:link { 
	color: #000 !important;
	text-decoration: none;
	}
	
.button-holder-center {
    top: 250px;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.button-holder-center a, .button-holder-center a:link, .button-holder-center a:active, .button-holder-center a:visited {
	color: #000;
}

.button-holder-center a:hover {
	color: #fff;
}

.button-holder-bottom {
    top: 50px;
    padding: 0;
    text-align: center;
    width: 100%;
}

.button-holder-bottom a.button {
	color: #000;
}

.button-holder-bottom a.button:hover {
	color: #FFF;
}

.button-holder-contact {
    padding: 0;
	float: left;
    text-align: center;
    width: 100%;
}

.social {
	margin-bottom: 20px;
	margin-right: 10px;
	display: inline-block;
	}
.twitter { background: url('/images/spritely.png') 0px 0px no-repeat; height: 30px; width: 32px;}
.twitter:hover { background-position: 0px -32px;}
.facebook { background: url('/images/spritely.png') -33px 0px no-repeat; height: 30px; width: 32px;}
.facebook:hover { background-position: -33px -32px;}
.linkedin { background: url('/images/spritely.png') -66px 0px no-repeat; height: 30px; width: 32px;}
.linkedin:hover { background-position: -66px -32px;}
.gplus { background: url('/images/spritely.png') -99px 0px no-repeat; height: 30px; width: 32px;}
.gplus:hover { background-position: -99px -32px;}
.pinterest { background: url('/images/spritely.png')-131px 0px no-repeat; height: 30px; width: 32px;}.pinterest:hover { background-position: -131px -32px;}


	
	
	


/*-----------------------------------------------------*/


.container {
	width: 100%;
	height: 100%;
	position: relative;
	padding-top: 50px;
	font-size: 18px; 
	}

	
.slide-top {
	width: 100%;
	height: 550px;
	position: relative;
	padding:  0;
	font-size: 18px; 
	}	
	
	
.slide-standard {
	width: 100%;
	height: 550px;
	position: relative;
	padding: 0px 0;
	font-size: 18px; 
	}
	
.slide-contact {
	width: 100%;
	height: 700px;
	position: relative;
	padding: 0px 0;
	font-size: 18px; 
	}
	
.slide-slim {
	width: 100%;
	height: 300px;
	position: relative;
	padding: 0px 0;
	font-size: 18px; 
	}
	
	

.slide-blank { overflow: hidden; padding: 50px; position: relative;}

.slide-blank .text-02 { padding: 50px 25px;}

	
	
 /*-----------------------------------------------------*/



	
.slide-text-left {
	float: left;
	width: 52%;
	margin: 150px 0 0 75px;
	}

.slide-text-right {
	float: right;
	width: 52%;
	margin: 150px 75px 0 0px;
	}
	
.slide-text-top {
	text-align: center;
	width: 100%;
	margin: 0px auto;
	}
	
.slide-text-slim {
	float: left;
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 85px 20px 0;
}

.slide-text-slim-2 {
	padding: 50px 20px;

}

.single-line-text { padding-top: 125px;}

  
.text-right {
	float: right;
	width: 40%;
	margin: 0px;
	}
	
	  
.text-left {
	float: left;
	width: 50%;
	margin: 0px;
	padding-left: 50px;
	}
	
.text-left h2 a:link { color: #f26536; }





 /*-----------------------------------------------------*/




.image-right {
  width: 300px;
  height: 300px;
  margin: 100px 100px 0px 10px;
  float: right;
  }	
  
 .image-right-2 {
  width: 300px;
  height: 550px;
  margin: 0px 100px 0px 10px;
  float: right;
  }	
  
.image-left {
  width: 300px;
  height: 300px;
  margin: 120px 10px 0px 100px;
  float: left;
  }
  
 .image-left-2 {
  width: 300px;
  height: 500px;
  margin: 0px 10px 0px 75px;
  float: left;
  }
  
  .image-center {
	 width: 300px;
	 height: 300px;
	 margin: 100px auto;
 }
  
  
.image-left-blank {
  width: 300px;
  height: 300px;
  margin: 0px 25px;
  float: left;
  }
  
.image-right-blank {
  width: 300px;
  height: 300px;
  margin: 0px 25px;
  float: right;
  }
  


 
.image-holder {
	position: relative;
	width: 100%;
	height: 550px;
	overflow: hidden;
}


.image-holder .mobile-image {
	display: none;
}

.image-full {
	position: absolute;
	width: 2000px;
	height: 550px;
	left: 50%;
	transform: translateX(-50%);
    -ms-transform: translateX(-50%); /* IE 9 */
    -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */

 }
 

  
  



  /*-----------------------------------------------------*/

.white {background-color: #fff;}
.white-text {color: #fff;}
.orange-text {color: #f26536;}
.cyan-text {color: #64C9EA;}



.color-1 {background-color: #f26536;}
.chex-1 {background-color: #f26536; background-image: url('/images/background-orange.png'); background-repeat: repeat;}

.color-2 {background-color: #ff9900;}
.color-3 {background-color: #FFD700;}
.color-4 {background-color: #64C9EA;}
.color-5 {background-color: #c4e16c;}

.image-01 { background: url('/images/blinking-mac.gif'); width: 300px; height: 300px; no-repeat;}


.image-02 { background:  url('/images/spritely.png') -315px -74px no-repeat;}
.image-02:hover { background-position: -618px -74px;}

.image-03 { background: url('/images/spritely.png') -323px -705px no-repeat;}

.image-04 { background:  url('/images/spritely.png') -640px -705px no-repeat;}
.image-04:hover { background-position: -640px -1015px;}

.image-05 { background:  url('/images/spritely.png') -640px -1360px no-repeat;}
.image-05:hover { background-position: -640px -1700px;}

.image-06 { background:  url('/images/spritely.png') -0px -2025px no-repeat;}
.image-06:hover { background-position: -323px -2025px;}

.image-07 { background:  url('/images/spritely.png') -0px -705px  no-repeat;}
.image-07:hover { background-position: -0px -1015px;}

.image-08 { background:  url('/images/spritely.png') -323px -1360px no-repeat;}
.image-08:hover { background-position: -323px -1700px;}

.image-09 { background:  url('/images/spritely.png') -0px -1360px no-repeat;}
.image-09:hover { background-position: -0px -1700px ;}

.image-10 { background-image: url('/images/shelli-walsh.jpg'); background-repeat: no-repeat;}

.image-11 { background-image: url('/images/what-is-creativity.png'); background-repeat: no-repeat;}
.image-12 { background-image: url('/images/work-flow.gif'); background-repeat: no-repeat; }

.image-13 { background:  url('/images/spritely.png') -323px -1360px no-repeat;}
.image-13:hover { background-position: -323px -1700px;}

.image-14 { background: url('/images/spritely.png') -323px -705px no-repeat;}
.image-14:hover { background-position: -323px -1015px;}




  /*-----------------------------------------------------*/




.image-horiz-left {
display: block;
  width: 900px;
  height: 80px;
  margin: 20px auto 0px ;
  }	
.image-horiz-right {
	display: block;
 width: 900px;
  height: 80px;
  margin: 20px auto 0px ;
  }	
  

/*-----------------------------------------------------*/

#footer {
	width: 100%;
	height: 250px;
	display: block;
	margin: 0 auto;
	background-color: #171717;
	}

#footer p {
	font-size: 16px; 
	line-height: 20px;
	color: #ff9900;
		margin-bottom: 10px;
	}
	
#footer a {
	color: #ff9900;
	text-decoration: underline;
}

#footer a:hover {
	color: #64C9EA;
}
	
.footer-left {
	float: left;
	margin: 50px 0px;
	width: 50%;
	overflow: hidden;
	}
	
.footer-right {
	float: right;
	margin: 50px 0px;
	width: 50%;
	}
	
.footer-text-left {
	clear: both;
	}


#footer-right p {
	text-align: right;

	}



/*--CONTACT FORM 7---------------------------------------------------*/

.contact-holder {
	display: block;
	Float: left;
	margin: 50px 0px 0px 100px;
    width: 350px;
    height: 600px;
}

.contact-image-right {
  width: 300px;
  height: 300px;
  margin: 100px 125px 0px 10px;
  float: right;
  }	


.contact-holder p {
	font-size: small;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 0;
	}


.wpcf7
{
    border: none;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
    background-color: #fff;
    padding: 5px;
    color: #000;
    width: 100%;
    border: 5px #fff;
}

.wpcf7-submit {	display: inline-block;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	width: 175px;
	height: 50px;
	border: 5px solid #000;
	text-align: center;
	font-size: 12pt;
	font-weight: bold;
	padding: 12px 0px;
	text-transform: uppercase;
	margin: 0px auto;
	background-color: #ff9900;
	}
	
.wpcf7-submit:hover {
	background-color: #000;
	color: #fff;
}

.wpcf7-captchar {
	width: 50%;
}

/*-----------------------------------------------------*/





/* Media queries ------------------------------------------------------------ */

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

body, html { width: 100%;	}



}

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

.wrap { width: 100%;  }
.text-wrap { margin-left: 30px; margin-right: 30px; }

img, .image-full 
 { width: 100%; }
	
#logo {
	position: absolute;
	width: 350px;
	height: 100px;
	left: 50%;
	transform: translateX(-50%);
    -ms-transform: translateX(-50%); /* IE 9 */
    -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
	background-image: url('/images/shellshock-uk-center.png'); background-repeat: no-repeat;
	}
	
#logo:hover {
	background-image: url('/images/shellshock-uk-center-roll.png'); background-repeat: no-repeat;
	}
	
	
#menu {
	width: 100%;
	margin: 75px auto 0;
	text-align: center;
	padding: 0 0 25px 0;
	}
	
.menu-shellshock-container {	clear: both;}
	
	
	
#menu ul { 
 	padding: 25px 0 10px 0;
	font-size: 12px; 
	}
	
#twitter { display: none;}

.headlines { width: 100%; margin: 25px auto;	padding: 0px; }
	
.headline {	width: 100%; margin: 25px auto; padding: 0px;	}	

	
p { font-size: 1em; }
	
h1 { font-size: 1.8751em; }  /* 30 */
h2 { font-size: 1.51em; padding-left: 25px; padding-right: 25px;}    /* 24 */

.text-01 { font-size: 1.8751em; }  /* 30 */
.text-02 { font-size: 1.51em; }    /* 24 */
.text-03 { font-size: 1.8751em; }  /* 30 */
.text-04 { font-size: 1.250em; }    /* 20 */
.text-05 { font-size: 100%; }  /* 16 */

.slide-top h1 {font-size: 5em; }	/* 80 */	
.slide-top h2 {font-size: 2.2em;  } /* 35 */	
.slide-top h3 {font-size: 1.6em;  margin: 75px 0px 0px; padding: 25px 0px; text-align: center;}


.slide-contact,
.slide-standard {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	padding: 50px;
	}
	
	
.slide-slim {
	width: 100%;
	height: auto;
overflow: hidden;
padding: 50px;
	}
	

.slide-text,
.slide-text-left,
.slide-text-right,
.slide-text-top,
.slide-text-center,
.slide-text-center-center,
.slide-text-slim
 {
	clear: both;
	float: left;
	text-align: left;
	width: 100%;
	margin:0;
	padding: 20px 0;
	}

.text-left,
.slide-blank { padding: 25px; }


 	
  
.image-left-2,
.image-right-2 { display: none;  }	
 
.image-right,
.image-left,
.image-left-blank,
.image-right-blank, 
.image-center,
.image-slide-top,
.contact-image-right {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  float: none;
  clear: both;
  }


.image-holder {
	position: relative;
	width: 100%;
    height: auto;
	overflow: hidden;
}


.image-12 {
	background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 53.71%;
    display:none;
}

.image-holder .mobile-image {
	display: block;
}

.image-holder .mobile-image img {
	width: 100%;
	height: auto;
}

.image-14 { background: url('/images/spritely.png') -323px -1015px no-repeat;}
.image-01:hover { background-position: 0px -74px;}
.image-07:hover { background-position: -0px -705px;}
.image-08 { background:  url('/images/spritely.png') -323px -1700px no-repeat;}
.image-05 { background:  url('/images/spritely.png') -640px -1700px no-repeat;}
.image-09 { background:  url('/images/spritely.png') -0px -1700px  no-repeat;}



.text-right, .text-left {
	float: left;
	width: 100%;
	margin: 0px;
	}

.contact-holder {
	display: block;
	Float: none;
	margin: 20px auto;
    width: 60%;}
    
    
.contact-image-right {
 clear: both;
  width: 300px;
  height: 300px;
  margin: 50px auto 25px ;
  float: none;}	

.button-holder-center {
	position: static;
}

	
}

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

iframe { width: 100%; }

.wrap { width: 100%; padding: 0 5px; }
.text-wrap { margin: 0px 20px; }


.headlines {width: 100%; margin: 25px auto;	}
	
.headline {	width: 100%; margin: 25px auto; 	}	




.text-01 { font-size: 1.51em; }    /* 24 */
.text-02 { font-size: 1.51em; }    /* 24 */
.text-03 { font-size: 1.51em; }    /* 24 */
.text-04 { font-size: 1.250em; }    /* 20 */
.text-05 { font-size: 100%; }  /* 16 */



.slide-top h1 {font-size: 6.250em; 	}		
.slide-top h2 {font-size: 1.875em; }
.slide-top h3 {font-size: 1.250em;  margin: 75px 0px 0px; padding: 25px 0px; }

h1 { font-size: 100%; }   


h1 { font-size: 1.875em; }   
h2 { font-size: 1.50em; padding-left: 10px; padding-right: 10px;} 

.text-left,
.slide-blank { padding: 10px; }




#footer {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	overflow: hidden;
	}

#footer p {
	font-size: 16px; 
	line-height: 20px;
	}
	
	
.footer-left {
	float: left;
	margin: 25px 0px 0;
	width: 100%;
	}
	
.footer-right {
	float: left;
	clear: both;
	margin: 25px 0px;
	width: 100%;
	}
	


#footer-right p {
	text-align: left;
	}

.contact-holder {
	display: block;
	Float: none;
	margin: 10px auto;
    width: 75%;}

.contact-image-right {
 clear: both;
  width: 300px;
  height: 300px;
  margin: 25px auto 25px;
  float: none;}	
  
.button-holder-center {
	position: static;
}


.slide-contact,
.slide-standard {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	padding: 25px;
	}
	
	
	
.slide-slim {
	width: 100%;
	height: auto;
overflow: hidden;
padding: 50px 10px;
	}
	
	
}

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

#logo {
	width: 80%;
	background-image: url('/images/shellshock-uk-center.png'); background-repeat: no-repeat;
	background-size: 100% auto;
	}

.text-wrap { margin: 0px 10px; }


.headlines {margin: 50px auto;	}
.headline { text-align: left;	}	


.slide-top h1 {font-size: 3.438em;  }		
.slide-top h2 {	  font-size: 1.5em; }
.slide-top h3 {font-size: 1.125em;  margin: 25px 0px 0px; padding: 25px 0px; text-align: left;}

.text-01 { font-size: 1.250em; }   
.text-02 { font-size: 1.250em; }  

.text-03 { font-size: 1.250em;  }    
.text-04 { font-size: 1.250em; }  
.text-05 { font-size: 1em; }  
p { font-size: 1em; } 


h1 { font-size: 1.250em; }   
h2 { font-size: 1.250em;} 

.contact-image-right {
 clear: both;
  width: 300px;
  height: 300px;
  margin: 25px auto 25px;
  float: none;}	
  
  .contact-holder {
	display: block;
	Float: none;
	margin: 0px auto;
    width: 100%;}  
    
    .slide-contact,
.slide-standard {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	padding: 10px;
	}

}