/*
 Theme Name:     Divi Child
 Theme URI:      http://tet.tetrobeta.com/divi-child
 Description:    Divi Child Theme
 Author:         Tetro Design
 Author URI:     http://tetrodesign.com
 Template:       Divi
 Version:        1.0.0
*/

/* Colours
---------------------------------------- */
body { color: #353839; }

.grey { color: #929497; }

.light-grey { color: #aeafb0; }

.green { color: #78cac4; }

div.footer-copy-home h5, div.footer-copy-home p, h3.client.white, h2.client.white { color: #ffffff; }


/* Typography 
---------------------------------------- */
body { 
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal; }

h1.margin3 { margin-bottom: 3%; }

h1, h4.case-sub, div.next-case-nav h3, div#case-content-wrapper h1, .careers-toggle h2 { 
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal; }

h3.client, .footer-copy h5, ul.et-menu.nav li a, div.next-case-nav h4, div h2.client, ul#tetro-nav li a, h3 { 
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal; }

ul.et-menu.nav li a, ul#tetro-nav li a {
    font-size: 18px; }

h3.client, div h2.client, .next-case-nav h4, ul.career-list li { padding: 10px 0px; }

div#case-content-wrapper h2 { padding: 3% 0; }

h3.client, div.next-case-nav h4, div h2.client { 
	text-transform: uppercase;
    letter-spacing: 2px; }

h4.case-sub { line-height: 1.1em; }

div.footer-copy h5, div.footer-copy p {
	padding-bottom: 0; 
	line-height: 1.4em; }

/* Need this for nav menu to be visible in Safari */
nav ul.et-menu.nav li a { display: inline !important; }

ul#tetro-nav li {
    list-style-type: none; }

/* Studio team titles */
.et_pb_team_member_description h2 {
    background-color: #000;
    margin-bottom: -2px;
    padding: 5px 10px;
    font-weight: 600;
	display: table-cell; }

/* Icons 
---------------------------------------- */
.mobile_nav.opened .mobile_menu_bar:before {
 	content: "\4d";}

/* Scroll to top button */
span.et_pb_scroll_top::before {
    content: "\21"; }

span.et_pb_scroll_top.et-pb-icon {
    background: rgba(0,0,0,0);
    color: #78cac4;
    border: 2px solid #78cac4;
    border-radius: 0;
    bottom: 15px;
    right: 15px; 
	-webkit-transition: transform 250ms ease-in-out;
	-moz-transition: transform 250ms ease-in-out;
	-o-transition: transform 250ms ease-in-out;
	transition: transform 250ms ease-in-out; }

span.et_pb_scroll_top.et-pb-icon:hover {
    -webkit-transform: scale(1.1);
	-ms-transform: scale(1.1); 
	-o-transform: scale(1.1); 
 	transform: scale(1.1); }

/* Home Case Study Grid 
---------------------------------------- */
.listing-col div a {
    display: block;
    width: 100%; }

/* Single Case Study Grid
---------------------------------------- */
div#case-content-wrapper { margin-bottom: 12%; }

div.case-responsive {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat; }

.case-full-video video {
    width: 100%;
    height: auto; }

.owl-slide .slide-item img, div.case-full-image, div.case-full-image img { 
    display: block;
    width: 100%;
    height: auto; }

.list-square a img, .list-rectangle a img { 
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out; 
	-o-transition: all 1s ease-in-out; 
	transition: all 1s ease-in-out; }

.list-square a img:hover, .list-square a img:focus, .list-rectangle a img:hover, .list-rectangle a img:focus {
	opacity: 0.85;
	-webkit-transform: scale(0.985);
	-o-transform: scale(0.985);
	-ms-transform: scale(0.985);
	transform: scale(0.985);
	cursor: pointer; }

.next-case-nav {
    display: block;
    width: 100%;
    border-top: 1px solid #929497;
    padding-top: 20px;
    margin-top: 3%; }

.case-margin { margin-bottom: 9%; }

div.rotator-col1 .case-rotator, div.rotator-col2 .case-rotator { 
	margin-bottom: 6%; }

.rectangle-listing a, .square-listing a { 
	width: 100%;
    display: block;
    height: 100%; }

.case-full-video, div.case-full-image { margin-bottom: 3%; }

/* TABLET AND DESKTOP */
@media all and (min-width: 768px) {
	/*Single Case Study
	---------------------------------------- */
	div.case-two-col-grid, div#footer-wrapper { 
		display: flex; 
		display: -webkit-box;
  		display: -webkit-flex;
  		display: -ms-flexbox;
    	justify-content: space-between;
		flex-wrap: wrap; }

	div.case-half, div.case-half2, div.list-col1, div.list-col2, div.half-rotator-flex {
		-webkit-flex: 0 48.5%;  
		-webkit-box-flex: 0 48.5%;
  		-ms-flex: 0 48.5%;
		flex: 0 48.5%; }
	
	div.half-rotator-flex { overflow: hidden; }
		
	div.list-col1-pad { padding-top: 20%; }
	
	video#tetro-header { 
		width: 100%;
		min-width: 100%; }
	
	/* Footer 
	----------------------------------------*/
	div#footer-wrapper { 
		justify-content: space-between;
		flex-wrap: -ms-flex-wrap;
		flex-wrap: wrap; }
  
  	div.footer-col1 {
		-webkit-box-flex: 0 40%; /* OLD - iOS 6-, Safari 3.1-6 */
		width: 40%; /* For old syntax, otherwise collapses. */
		-webkit-flex: 0 40%; /* Safari 6.1+. iOS 7.1+, BB10 */
		-ms-flex: 0 40%; /* IE 10 */
		flex: 0 40%; 
		border-right: 1px solid #929497;
		padding-bottom: 0px;
		padding-right: 20px;
		margin-bottom: 0px; }
  
	  div.footer-col2 { 
		-webkit-box-flex: 0 55%; /* OLD - iOS 6-, Safari 3.1-6 */
		width: 55%; /* For old syntax, otherwise collapses. */
		-webkit-flex: 0 55%; /* Safari 6.1+. iOS 7.1+, BB10 */
		-ms-flex: 0 55%; /* IE 10 */
		flex: 0 55%;
		align-self: center; }
	
	.footer-copy { padding-bottom: 9%; }
}

/* Desktop
---------------------------------------- */
@media all and (min-width: 981px) {
	
	/*Team members */
	.et_pb_team_member .et_pb_team_member_description{ opacity: 0;}
	.et_pb_team_member:hover .et_pb_team_member_description { opacity: 1!important; }
	.et_pb_team_member_description .et_pb_member_position { top: -7px; }
	
	/*Navigation */
	ul#tetro-nav li.mobile-contact { display: none; }
	
	.et_pb_menu__wrap { margin-left: 4%; }
	
	div.et_pb_menu__logo img[src$=".svg"] { min-height: 40px!important; }
	
	.hamburger-lines { display: none; }
	
	ul#tetro-nav { 
		padding-top: 20px;
		margin-left: 20%; }
	
	ul#tetro-nav li { display: inline-block; }
	
	ul#tetro-nav li a { padding: 10px 10px 0px 25px; }
	
	ul#tetro-nav.home-nav-black li a, div.footer-copy.footer-copy-home a {
		background: -o-linear-gradient(to right, #aeafb0, #aeafb0 50%, #ffffff 50%);
		background: -moz-linear-gradient(to right, #aeafb0, #aeafb0 50%, #ffffff 50%); 
		background: -ms-linear-gradient(to right, #aeafb0, #aeafb0 50%, #ffffff 50%); 
		background: -webkit-linear-gradient(to right, #aeafb0, #aeafb0 50%, #ffffff 50%);
		background: linear-gradient(to right, #aeafb0, #aeafb0 50%, #ffffff 50%); 
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 200% 100%;
		background-position: 100%;
		transition: background-position 275ms ease; }
	
	div.footer-copy p a, div.footer-copy a, ul.et-menu.nav li a, div.next-case-nav h3 a, ul#tetro-nav li a { 
		background: -o-linear-gradient(to right, #aeafb0, #aeafb0 50%, #353839 50%);
		background: -moz-linear-gradient(to right, #aeafb0, #aeafb0 50%, #353839 50%); 
		background: -ms-linear-gradient(to right, #aeafb0, #aeafb0 50%, #353839 50%); 
		background: -webkit-linear-gradient(to right, #aeafb0, #aeafb0 50%, #353839 50%);
		background: linear-gradient(to right, #aeafb0, #aeafb0 50%, #353839 50%); 
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 200% 100%;
		background-position: 100%;
		transition: background-position 275ms ease; }
	
	ul#tetro-nav li a.active-page {
		background: none!important;
		color: #929497!important;
		background-clip: unset!important;
		-webkit-background-clip: unset!important;
    	-webkit-text-fill-color: unset!important; }

	/* link colour animation*/
	div.footer-copy p a:hover, div.footer-copy a:hover, 
	nav ul.et-menu.nav li a:hover, div.next-case-nav h3 a:hover, 
	div.next-case-nav h3 a:focus, ul#tetro-nav li a:hover, ul#tetro-nav li a:focus { 
		background-position: 0 100%; }
	
	/* Typography 
	---------------------------------------- */
	/*NEW STYLE FOR BUTTON*/
	body, div.footer-copy h5, button.loadmore, h3 { 
		font-size: 24px; }
	
	div#case-content-wrapper h1, .careers-toggle h2 { 
		font-size: 75px; }
	
	h3.client, div h2.client, .next-case-nav h4, h2.client { font-size: 18px; }
	
	h4.case-sub, div.next-case-nav h3, h3.case-sub { font-size: 32px; }
	
	.row70 { width: 70%; max-width: 70%; }
	
	div#case-content-wrapper {
		max-width: 95%;
    	width: 1000px; }
	
	/*.square-image, .rectangle-image {
		width: 100%;
		min-height: 150px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		margin: 0; }*/
	
	/*.rectangle-image > img, .square-image > img {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		min-height: 100%;
		min-width: 100%;
		transform: translate(-50%, -50%); }*/
	
	.case-square div, div#case-listings div.case-half, div#case-listings .case-half2 { margin-bottom: 6%; }
	
	.case-full, .case-half-img, div.grid-margin  { 
		margin-bottom: 3%; }
	
	/*div.square-image {
		padding: 48.5% 0; }*/
	
	/* Horizontal rectangle */
	/*div.rectangle-image { padding: 30% 0; }*/
	
	.case-full {
		width: 100%;
		padding: 25%; }
	
	.case-half-img {
    	padding: 15% 0; }
	
	div.list-rectangle, div.list-square { 
		padding-bottom: 15%; }
}

@media screen and (max-width: 980px){
	/* Typography 
	---------------------------------------- */
	body, div.footer-copy h5, button.loadmore /*NEW STYLE FOR BUTTON*/ { 
		font-size: 18px; }
	
	h3.client, div h2.client, .next-case-nav h4, h2.client {
    	font-size: 13px; }
	
	div#case-content-wrapper h1 { 
		font-size: 35px; }
	
	h4.case-sub, div.next-case-nav h3, h3.case-sub { font-size: 24px; }
	
	.et_pb_team_member_description .et_pb_member_position { top: -4px; }
	
	.case-retangle div { width: 100%; }
	
	.case-half-img, .case-full {
		width: 100%;
		padding: 50% 0%;
		margin-bottom: 6%; }
	
	.case-full-video, div.case-full-image { margin-bottom: 6%; }
	
	/*div#case-listings .case-half, div.list-rectangle, div.list-square { 
		padding-bottom: 9%; }*/
	
	div.list-square, div.list-rectangle { 
		padding-bottom: 12%; }
	
	div.grid-margin { margin-bottom: 6%; }
	
	/* Mobile Menu
	----------------------------------------  */
	.no-scroll { overflow: hidden; }
	
	div#nav-wrapper, ul#tetro-nav {
		padding-left: 5%;
		padding-right: 5%; }
	
	div#tetro-nav { 
		padding: 10px 0px 20px 0px;
		width: 100%;
   		max-width: 100%;}
	
	/*.et_mobile_nav_menu { margin-right: 0!important; }
	
	div#tetro-nav .et_pb_menu_inner_container { padding: 0 5%; }
	
	ul.et_mobile_menu li a { padding-left: 0; }
	
	div.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before{
    	font-size: 40px;
    	color: #fff;
    	background: #333548; }
	
	ul#mobile_menu1 {
    	height: 100vh;
    	padding-top: 10%; }
	
	ul.et_mobile_menu {
    	border: none;
    	box-shadow: none; }*/
	
	ul#tetro-nav.home-nav-black li a { color: #fff; }
	
	ul#tetro-nav li a {
    	color: #353839;
    	font-size: 30px;
    	line-height: 46px;
    	display: block; }
	
	ul#tetro-nav a.active-page { color: #929497; }
	
	.nav-closed ul { display: none; }
	
	.nav-col {
		display: inline-block;
  		float: right; }
  
  	.nav-col:after { clear: both; }
	
	.is-active ul.home-nav-black { 
		background-color: #000; }
	
  .is-active ul {
    display: block;
	transition: display 500ms linear;
    width: 100%;
    position: absolute;
    left: 0;
    min-height: 400px;
    background: #fff;
    height: 100vh;
    z-index: 9999;
    padding: 50px 0 0 0;
    text-align: left; }
  
	#nav-wrapper{
		width: 100%;
		max-width: 100%; }

	/*.nav-row .nav-three {
	  padding: 80px 30px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  background-color: #2c3e50;
	  color: #ecf0f1;
	  text-align: center; }*/
	
	.hamburger .home-lines .line { background-color: #fff; }
	
	.hamburger .line{
	  width: 50px;
	  height: 5px;
	  background-color: #353839;
	  display: block;
	  margin: 8px auto;
	  -webkit-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out; }

	.hamburger:hover{
	  cursor: pointer; }

	/* Rotate hamburger to X */
	#hamburger-icon.is-active div{
	  -webkit-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out;
	  -webkit-transition-delay: 0.6s;
	  -o-transition-delay: 0.6s;
	  transition-delay: 0.6s;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  -o-transform: rotate(45deg);
	  transform: rotate(45deg); }

	#hamburger-icon.is-active .line:nth-child(2) {
	  width: 0px; }

	#hamburger-icon.is-active .line:nth-child(1),
	#hamburger-icon.is-active .line:nth-child(3) {
	  -webkit-transition-delay: 0.3s;
	  -o-transition-delay: 0.3s;
	  transition-delay: 0.3s; }

	#hamburger-icon.is-active .line:nth-child(1) {
	  -webkit-transform: translateY(13px);
	  -ms-transform: translateY(13px);
	  -o-transform: translateY(13px);
	  transform: translateY(13px); }

	#hamburger-icon.is-active .line:nth-child(3) {
	  -webkit-transform: translateY(-13px) rotate(90deg);
	  -ms-transform: translateY(-13px) rotate(90deg);
	  -o-transform: translateY(-13px) rotate(90deg);
	  transform: translateY(-13px) rotate(90deg); }	
	
	ul#tetro-nav li.mobile-contact a {
		font-weight: 400;
		font-size: 18px;
		line-height: 24px; }
	
	ul#tetro-nav li.mobile-contact { padding-top: 50px; }
	
	div.section-padding { padding: 0 0; }
	
	/*Studio page
	---------------------------------------- */
	.gallery-row .et_pb_column {
    	margin-bottom: 0; }
	
	/* Footer
	----------------------------------------  */
	div.et_pb_row.et_pb_row_0_tb_footer {
    	padding-bottom: 0; }
	
	.footer-copy { padding-bottom: 25px; }
	.footer-col2 { margin-top: 25px; }
	
	.footer-copy-home a { color: #fff; }
	
	video#tetro-header{ 
		min-height: 350px;
		object-fit: cover; }
}

@keyframes smallbig{
  0%, 100%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50%{
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}

/*IE10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	div.footer-copy p a, div.footer-copy a, ul.et-menu.nav li a, div.next-case-nav h3 a, ul#tetro-nav li a {
		background: none!important; }
	
	div.footer-copy p a, div.footer-copy a, ul.et-menu.nav li a, div.next-case-nav h3 a,ul#tetro-nav.home-nav-black li a { 
		color: #fff!important; }
}

@media screen and (max-width: 320px) { 
	.et_pb_team_member_description .et_pb_member_position { letter-spacing: 2px!important; font-size: 10px!important; }
}