/*
 Theme Name:     The Toy Mascot Company
 Theme URI:      http://www.thetoymascotcompany.co.uk
 Description:    TTMC Theme
 Author:         Martin Favager
 Author URI:     https://www.theroiagency.co.uk
 Template:       Divi
 Version:        1.0.0
*/
 
@import url("../Divi/style.css");

/* 

TTMC Colours Current: 
Yellow: #F5D602 rgba(245,214,2,0.5)
Blue : #1A3881 rgba(26,56,129,0.5)

*/

footer#main-footer {
  display: none;
}

.et_pb_module_header {
  padding-bottom: 1.5em;
}

.entry-content ol {
  line-height: 2.1em;
}

.et_pb_post_content .et_pb_section {
  background-color: rgba(0,0,0,0);
  padding-top: 0;
}

.et_pb_post_title {
  margin-bottom: 0!important;
}

.single .et_pb_post {
    margin-bottom: 0;
}

.wp-block-separator .is-style-wide {
  padding-bottom: 2vw;
}

.imagine {
  background: #1A3881;
}

.et_pb_gallery_item img {
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.front-slider, .blog-featured img{
	border-radius: 0px;
/* 	height: 100vh; */
}

.front-slider {
  height: 100vh;
}

.full-width img{
	border-radius: 0px!important;
}


.et_portfolio_image:hover {
  box-shadow: none;
}

.et_pb_gallery_1.et_pb_gallery .et_pb_gallery_image, .et_pb_gallery_2.et_pb_gallery .et_pb_gallery_image, .et_pb_gallery_3.et_pb_gallery .et_pb_gallery_image {
  border-radius: 0!important;
  overflow: hidden;
}

.et_pb_gallery_items {
  display: flex!important;
  flex-wrap: wrap!important;
  justify-content: center!important;
}


/* ##### DROPDOWN MENU WIDTH ##### */

.nav li ul {
   width: 280px !important; /* Width of the dropdown menu */
}

.nav li li ul {
   left: 280px !important; /* Use the same size as above */
}

#top-menu li li a {
   width: 240px; /* Make this 40 less then the width of the dropdown menu */
}

/* Centre text in 2 column desktop */

.centred-text {
	display: table!important;
	height: 100%;
}

.centred-text .et_pb_text_inner {
	display: table-cell;
	vertical-align: middle;
}

.story-title {
	background-color: rgba(255,255,255,0.5);
    padding: 2em;
    border-radius: 20px;
}

.et_pb_fullwidth_menu_0.et_pb_fullwidth_menu {
    background-color: transparent!important;
}

#footer-bottom {
  display: none;
}

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

.mobile_menu_bar:before {
    position: relative;
    top: 0;
    left: -30px;
    font-size: 60px;
    content: "\61";
    cursor: pointer;
    color: #000!important;
}

/* .et_mobile_menu li {
	padding-bottom: 1em;
} */


/*  Slider Arrow Styling */

.et-pb-arrow-next, .et-pb-arrow-prev {
    position: absolute;
    z-index: 100;
    top: 50%;
    margin-top: -24px;
    opacity: 0;
    color: #000!important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


/*  Tabs Styling */

.et_pb_tabs_controls {
	background-color: #fff!important;
}

.et_pb_tabs_controls li {
    border-right: none;
    border-bottom: 2px solid #fff;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.et_pb_tabs_controls li:hover, .et_pb_tabs_controls li.et_pb_tab_active {
	border-bottom: 2px solid #eeebe3;
}


/* Portfolio Gallery Styles */

 .et_pb_portfolio_item {

	text-align: center;
}

/*
.et_pb_portfolio_grid .et_pb_portfolio_item h2 a {
  color: #ffffff;
}


.et_pb_portfolio_grid .et_overlay {
  border: none;
  background-color: rgba(26,56,129,0.7)!important;
}

.mfp-bg {
	background-color: rgba(26,56,129,0.8)!important;
}

.et_pb_portfolio_item {
  height: 20%!important;
} */

/* Set the spacing between images */

.et_pb_portfolio_grid_items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Gallery thumbnail sizing */

.et_pb_gallery_grid .et_pb_gallery_item {
	margin: 1%!important;
}


/*  Popup Form Styling */

.pum-theme-592 .pum-title, .pum-theme-cutting-edge .pum-title {
    text-align: center!important;
    font-size: 36px!important;
}

/* Form Styling*/

.wpcf7 h3, .wpcf7 p, .wpcf7-response-output {
  color: #fff!important;
}

#popmake-603 {
	border-radius: 20px!important;
}

.wpcf7-form {
	padding: 2em;
}

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

.wpcf7-submit {
	all: unset;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 'Slackey', cursive!important;
    border-radius: 20px;
    border:  2px solid #fff;
    padding: 0.5em;
    background-color:#000;
    color: #ffffff;
    text-align: center;
    transition: all ease-in-out 0.2s;
}

.wpcf7-submit:hover {
	background-color: #000;
	color: #ffffff;
	border:  2px solid #fff;
	cursor: pointer;
}

.nf-form-layout {
  padding-top: 1em;
}

textarea, input.text, input.title, input[type=email], input[type=password], input[type=date], input[type=tel], input[type=text], select, textarea {
    padding: 1.5rem;
    font-size: 1.2em;
    border-radius: 20px;
    font-family: "Montserrat",sans-serif!important;
    width: 100%;
    max-width: 100%;

}

.form-heading h2{
  padding-top: 3rem;
  padding-bottom: 2rem;
}

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

.submit-wrap input {
  border: none;
  box-shadow: none;
  padding: 16px 32px;
  color: #fff;
  font-size: 32px;
  font-family: "Montserrat",sans-serif!important;
  background: #a4a09e;
  transition: all ease-in-out 0.2s;
}


.submit-wrap input:hover {
  cursor:  pointer;
  background: #1B160F;
  -webkit-box-shadow: 0 10px 6px -6px #777;
     -moz-box-shadow: 0 10px 6px -6px #777;
          box-shadow: 0 10px 6px -6px #777;
}

.nf-form-fields-required {
  display: none;
}

.nf-response-msg {
  text-align: center;
  padding-top: 1rem;
  color: white;
    font-size: 2em;
}

.nf-response-msg h2 {
  color: white;
    font-size: 2em;
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  .building-image-row {
    min-height: 100vh;
  }

  /* Posts styling */

  figcaption {
      text-align: center;
      font-size: 0.8vw;
  }
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px)  {
  .header-content img {
    max-width: 75%!important;
  }

  /* Posts styling */

figcaption {
      text-align: center;
    font-size: 0.8vw;
}

  #et-top-navigation {
  	margin-top: 10px;
    border-radius: 30px;
    padding-right: 50px!important;
    padding-left: 50px!important;
}

.sub-menu {
	border-radius: 0 0 30px 30px;
}

  .et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a {
    font-size: 42px!important;
}
  
  .et_pb_tabs_controls {
	display: flex;
	justify-content: center;
	}

	/*  Slider Arrow Styling */

.et-pb-arrow-next, .et-pb-arrow-prev {
    position: absolute;
    z-index: 100;
    top: 50%;
    margin-top: -24px;
    opacity: 0;
    color: #000!important;
    font-size: 90px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  .header-content {
    width:  100%!important;
  }

  /* Posts styling */

figcaption {
      text-align: center;
    font-size: 1.5vw;
}

  .et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a {
    font-size: 24px!important;
}
  
  	
  .et_pb_tabs_controls, .et_pb_tabs_controls ul {
		display: flow-root;
		justify-content: center;
		justify-content: -webkit-center;
		text-align: center;
	}	
	.et_pb_tabs_controls li {
		display: inline-block;
	}
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .header-content {
    width:  100%!important;
  }

/* Posts styling */

figcaption {
      text-align: center;
    font-size: 1.5vw;
}

  .et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a {
    font-size: 24px!important;
}
  
  

	.et_pb_tabs_controls, .et_pb_tabs_controls ul {
		display: flow-root;
		justify-content: center;
		justify-content: -webkit-center;
		text-align: center;
	}

	.et_pb_tabs_controls li {
		display: inline-block;
	}

	/*  Slider Arrow Styling */

.et-pb-arrow-next, .et-pb-arrow-prev {
    position: absolute;
    z-index: 100;
    top: 50%;
    margin-top: -24px;
    opacity: 0;
    color: #000!important;
    font-size: 60px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  .header-content {
    width:  100%!important;
  }

  /* Posts styling */

figcaption {
      text-align: center;
    font-size: 1.9vw;
}

  .et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a {
    font-size: 24px!important;
}
  
	.et_pb_tabs_controls, .et_pb_tabs_controls ul {
	display: flow-root;
	justify-content: center;
	justify-content: -webkit-center;
	text-align: center;
	}

	.et_pb_tabs_controls li {
		display: inline-block;
	}
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

.front-slider .et_pb_slide_image img{
		margin-top: -45vh!important;
	}
  
  .strapline {
    margin-top: 2rem;
  }

  .header-content {
    width:  100%!important;
  }

    /* Posts styling */

figcaption {
      text-align: center;
    font-size: 1.9vw;
}

  .et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a {
    font-size: 24px;
}

  

	.et_pb_tabs_controls, .et_pb_tabs_controls ul {
		display: flow-root;
		justify-content: center;
		justify-content: -webkit-center;
		text-align: center;
	}

	.et_pb_tabs_controls li {
		display: inline-block;
	}

	/*  Slider Arrow Styling */

	.et-pb-arrow-next, .et-pb-arrow-prev {
	    position: absolute;
	    z-index: 100;
	    top: 50%;
	    margin-top: -24px;
	    opacity: 0;
	    color: #000!important;
	    font-size: 30px;
	    -webkit-transition: all .2s ease-in-out;
	    -moz-transition: all .2s ease-in-out;
	    transition: all .2s ease-in-out;
	}
}

.et_mobile_menu {
  padding-top: 30vh;
}

@media (min-width: 320px) and (max-width: 1024px) {



/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 10px;
    right: 35px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Menu slide-in with background image ******/

/* Font Awesome */
.fa {padding-top: 25vh;
    margin-right: 15px ;
  }

@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 60px !important;
}

/* .et_slide_in_menu_container {
    padding-top: 25vh;
} */

.et_mobile_menu li a {
    color: #fff !important;
    width: 100%;
    float: left;
    border: none !important;
    text-align: center;
    margin: 5px 10px;
    transition: .2s;
    text-transform: uppercase;
    font-size: 1.4em !important;
}
.sub-menu li a{
    font-size: 1em !important;
    }
.mobile_nav ul#mobile_menu .current_page_item > a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding-left: 20px;
}

.mobile_nav.closed #mobile_menu {
      -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
    ), /* ------ Here you can customize the overlay effect by adding the color you want in rgba format. NOTE: adding two colors you can create a gradient effect  ----- */

    url("https://www.needyesterday.com/wp-content/uploads/2018/07/bg_mobile_menu.jpg"); /* ----- Add here the url of the image you want as background ----- */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

.mobile_nav.opened #mobile_menu {
      -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
    ),
    url("/wp-content/uploads/2019/07/bg_mobile_menu.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_menu_bar:before {
    color: #000 !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
    z-index: 9999;
    color: #ED1D24!important;
    border: 1px solid #ED1D24;
    width: 30px;
    height: 30px;
    margin-right: 20px;
    border-radius: 50%;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, 
  .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }


}

@media (max-width: 980px) {
.et_header_style_left #logo, .et_header_style_split #logo {
    max-width: 75%;
}

@media only screen and (min-width: 481px)  {
  #mobile_menu {    
    width: 340px;    
    margin-left: calc(100% - 340px);
  }
}
@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 290px;    
    margin-left: calc(100% - 290px);
  }
}


}