/*
 Theme Name:   Enfold Child
 Theme URI:    http://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990
 Description:  Enfold Child Theme
 Author:       Gumpo
 Author URI:   http://www.gumpo.co.uk/
 Template:     enfold
 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:  enfold-child
*/

@import '../enfold/style.css';



/****************************************
			  CORE STYLES
****************************************/

html {
	font-size: 62.5%;
}

.main_color p,
.main_color li,
.main_color a,
.main_color span,
.main_color table,
.main_color td,
.main_color th {
	color: #666;
}

.main_color p {
	line-height: 180%;
}

/************ HEADINGS ************/

body h1,
body .av-special-heading h1.av-special-heading-tag {
	color: #666;
	font-size: 38px;
	font-size: 3.8rem;
	font-weight: 600;
	line-height: 140%;
}

body h2,
body .av-special-heading h2.av-special-heading-tag {
	font-weight: 400;
	line-height: 140%;
}

.av-special-heading h2 + .av-subheading p {
	font-size: 22px;
	font-size: 2.2rem;
	color: #fff !important;
	margin-top: 24px;
	margin-top: 2.4rem;
}

@media all and (max-width: 639px) {
	body h1,
	body .av-special-heading h1.av-special-heading-tag {
		font-size: 30px;
		font-size: 3rem;
	}
}

/************ BUTTONS ************/

/* Reset */
#top .avia-button.avia-size-x-large,
body .btn,
body .wpcf7-form-control.wpcf7-submit {
  	min-width: 200px;
    border-radius: 3px;
    font-size: 16px;
    font-size: 1.6rem;
  	padding: 25px 50px 23px;
  	padding: 2.5rem 5rem 2.3rem;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    margin: 0.3rem 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
 	color: #fff !important;
}

#top .avia-button.avia-size-x-large span,
body .btn span{
	color: #fff;
}

#top .avia-button.avia-size-x-large:hover,
body .btn:hover {
	color: #fff;
  	cursor: pointer;
  	opacity: 0.9;
}

#top .avia-button.avia-size-x-large,
body .btn {
	background-color: #46CC65 !important;
  	border-bottom: 4px solid #3ead56 !important;
  	color: #fff !important;
}

p .btn {
 	margin-left: 48px; 
}

/************ LISTS ************/

.avia_textblock ul li {
	margin-bottom: 8px;
	margin-bottom: 0.8rem;
}

.posh-list {
	margin-top: 32px;
	margin-top: 3.2rem;
}

.posh-list li {
	font-size: 30px;
	font-size: 3rem;
	color: #46CE66;
	padding-left: 10px;
	padding-left: 1rem;
}

.posh-list li span {
	font-size: 16px;
	font-size: 1.6rem;
	position: relative;
	bottom: 5px;
	color: #666;
}

@media all and (max-width: 1023px) {
	.posh-list li span { /* Colour Overide */
		color: #fff;
	}
}




/****************************************
			   	 HEADER
****************************************/

/************ META ************/

#header_meta {
	background-color: #51AEEB;
}

.phone-info {
	font-size: 14px;
	font-size: 1.4rem;
}

.social_bookmarks li {
    border: none !important;
}

.phone-info span,
.social_bookmarks a {
	color: #fff !important;
}


/************ NAVIGATION ************/

.header_color .main_menu ul li a {
	padding: 0 16px;
	padding: 0 1.6rem;
}

.header_color .main_menu ul li a span {
	color: #999;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	text-transform: uppercase;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: 600;
}

.header_color .main_menu ul li a:hover span {
	color: #4CABEA;
}

.header_color .main_menu .current-menu-item span {
	color: #CF3A33;
}

.header_color .avia-menu-fx { /* Remove nasty looking hover effect */
	display: none;
}

/*********** SUBMENU ***********/

body .sub-menu {
	border: none !important;
}

.header_color .main_menu .menu ul li a {
	padding: 12px 15px !important;
}


.header_color .main_menu .menu ul li a:hover {
	background-color: transparent !important;
}

body .sub-menu a span {
	font-size: 14px !important;
	font-size: 1.4rem !important;
}

/*********** MOBILE MENU ***********/

#advanced_menu_toggle:hover {
	background-color: #51AEEB !important;
	border: none !important;
}

body #mobile-advanced li > a:hover {
	background-color: #51AEEB;
}

body #mobile-advanced li > a:before {
	display: none;
}


/****************************************
			   	  HERO
****************************************/

.page-id-530 main {
	padding: 0;
}

#hero > .container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

#hero-con {
	display: block;
	width: 100%;
	height: auto;
	float: left;
}

.hero-section {
	position: relative;
	display: inline-block;
	width: 33.333333%;
	height: 400px;
	float: left;
	text-align: center;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 99;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
}

.hero-section:hover .hero-overlay {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	opacity: 0;
}

/* Coloured Triangle */
.hero-overlay::before {
	content: '';
	position: absolute;
	bottom: 27px;
    right: 3px;
	display: block;
	width: 0;
	height: 0;
	border-bottom: 50px solid #242424;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	z-index: 999;
	opacity: 0.1;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* White Triangle */
.hero-overlay::after {
	content: '';
	position: absolute;
    bottom: -8px;
    right: -33px;
	display: block;
	width: 0;
	height: 0;
	border-bottom: 50px solid #fff;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	z-index: 999;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}

.gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 100;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.3+0,0.15+27,0+65 */
	background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 27%, rgba(0,0,0,0) 65%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 27%,rgba(0,0,0,0) 65%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 27%,rgba(0,0,0,0) 65%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.hero-section h2 {
	position: relative;
	font-size: 34px;
	font-size: 3.4rem;
	font-weight: 600;
	color: #242424;
	margin-top: 56px;
	margin-top: 5.6rem;
	z-index: 999;
	opacity: 0.25;
}

.hero-section .pointer {
	width: 200px;
	position: absolute;
	top: -webkit-calc(50% - 50px);
	top: -moz-calc(50% - 50px);
	top: calc(50% - 50px);
	left: -webkit-calc(50% - 100px);
	left: -moz-calc(50% - 100px);
	left: calc(50% - 100px);
	z-index: 999;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
	opacity: 0.1;
}

.hero-section:hover .pointer {
	opacity: 0;
}

.hero-section .corner {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 999;
}

.hero-section .btn {
	position: absolute;
	bottom: 48px;
	bottom: 4.8rem;
	left: -webkit-calc(50% - 100px);
	left: -moz-calc(50% - 100px);
	left: -o-calc(50% - 100px);
	left: calc(50% - 100px);
	z-index: 9;
}

.hero-section .btn:hover {
	opacity: 1;
}

/************ FLUGELHORN ************/

#flugelhorn .hero-overlay { /* Cube Colour */
	background-color: #51AEEB;
}

#flugelhorn { /* Product Image */
	cursor: pointer;
	background: url('/wp-content/uploads/2016/04/flugelhorn.jpg') no-repeat;
}

/************ BB TRUMPET ************/

#bb-trumpet .hero-overlay { /* Cube Colour */
	background-color: #5E68EB;
}

#bb-trumpet { /* Product Image */
	cursor: pointer;
	background: url('/wp-content/uploads/2016/04/bb-trumpet.jpg') no-repeat;
}

/************ C-TRUMPET ************/

#c-trumpet .hero-overlay { /* Cube Colour */
	background-color: #E78F44;
}

#c-trumpet { /* Product Image */
	cursor: pointer;
	background: url('/wp-content/uploads/2016/04/c-trumpet.jpg') no-repeat;
}

/************ CORNET ************/

#cornet .hero-overlay { /* Cube Colour */
	background-color: #CF3A33;
}

#cornet { /* Product Image */
	cursor: pointer;
	background: url('/wp-content/uploads/2016/04/cornet.jpg') no-repeat;
}

/************ PRO TROMBONE ************/

#pro-trombone .hero-overlay { /* Cube Colour */
	background-color: #46CC65;
}

#pro-trombone { /* Product Image */
	cursor: pointer;
	background: url('/wp-content/uploads/2016/04/pro-trombone.jpg') no-repeat;
}

/************ JAZZBONE ************/

#jazzbone .hero-overlay { /* Cube Colour */
	background-color: #ecd014;
}

#jazzbone { /* Product Image */
	cursor: pointer;
	background: url('/wp-content/uploads/2016/04/jazzbone.jpg') no-repeat;
}


/*************** RESPONSIVE ***************/

@media all and (max-width: 1500px) {
	.hero-section {
		width: 33.333333%;
		height: 300px;
	}

	.hero-section h2 {
		font-size: 30px;
		font-size: 3rem;
		margin-top: 40px;
		margin-top: 4rem;
	}

	.hero-section .pointer {
		width: 150px;
		top: -webkit-calc(50% - 40px);
		top: -moz-calc(50% - 40px);
		top: calc(50% - 40px);
		left: -webkit-calc(50% - 75px);
		left: -moz-calc(50% - 75px);
		left: calc(50% - 75px);
	}
}

@media all and (max-width: 1365px) {
	.hero-section h2 {
		font-size: 26px;
		font-size: 2.6rem;
	}

	/* Triangles */
	.hero-overlay::before { /* Coloured */
    	bottom: 23px;
    	right: 3px;
		border-bottom: 40px solid #242424;
		border-left: 40px solid transparent;
		border-right: 40px solid transparent;
	}

	.hero-overlay::after { /* White */
    	bottom: -6px;
    	right: -26px;
		border-bottom: 40px solid #fff;
		border-left: 40px solid transparent;
		border-right: 40px solid transparent;
	}
}

@media all and (max-width: 1270px) {
	.hero-section h2 {
		font-size: 24px;
		font-size: 2.4rem;
	}

	.hero-section {
		height: 270px;
	}

	.hero-section .pointer {
		width: 120px;
		top: -webkit-calc(50% - 25px);
		top: -moz-calc(50% - 25px);
		top: calc(50% - 25px);
		left: -webkit-calc(50% - 60px);
		left: -moz-calc(50% - 60px);
		left: calc(50% - 60px);
	}
}

@media all and (max-width: 1100px) {
	.hero-section h2 {
		font-size: 28px;
		font-size: 2.8rem;
	}

	.hero-section {
		width: 50%;
	}
}

@media all and (max-width: 950px) {
	.hero-section h2 {
		font-size: 26px;
		font-size: 2.6rem;
	}
}

@media all and (max-width: 880px) {
	.hero-section h2 {
		font-size: 24px;
		font-size: 2.4rem;
	}
}

@media all and (max-width: 767px) {
	#hero > .container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.hero-section {
		display: block;
		width: 100%;
	}
}


/****************************************
			   	 FOOTER
****************************************/

#gumpo {
	display: inline-block;
	float: left;
	color: #fff;
	font-size: 20px;
	font-size: 2rem;
	margin: 32px 20px 0 0;
	margin: 3.2rem 2rem 0 0;
}

#gumpo + a img {
	width: 120px;
	position: relative;
	top: 20px;
	display: inline-block;
	float: left;
}

#tromba-footer {
	display: inline-block;
	float: right;
	width: 110px;
}


/****************************************
			   	  HOME
****************************************/

#home-6 h2 {
	font-weight: 600;
}

/*********** Bottom Section (CTA / Links)  ***********/

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

	#home-2,
	#home-3,
	#home-4,
	#home-5 {
		position: relative;		
		text-align: center;
		background-image: none !important;
	}

	#home-2 .flex_column,
	#home-3 .flex_column,
	#home-4 .flex_column,
	#home-5 .flex_column {
		table-layout: auto;
		display: block;
		width: 100%;
		margin: 0;
	}


	/* Shared */
	#home-2 p,
	#home-3 p,
	#home-4 p,
	#home-5 p {
		text-align: center !important;
		font-size: 17px;
		font-size: 1.7rem;
	}

	#home-3 ul,
	#home-4 ul,
	#home-5 ul {
		margin-left: 0;
	}

	#home-3 ul li,
	#home-4 ul li,
	#home-5 ul li {
		list-style-type: none;
		font-size: 17px;
		font-size: 1.7rem;
		margin-bottom: 16px;
		margin-bottom: 1.6rem;
		margin-left: 0;
		margin-left: 0;
	}


	/* Section 2 */
	#home-2 {
		background-color: #E99044;	
	}

	#home-2 h2,
	#home-2 p {
		color: #fff !important;
	}

	/* Section 3 */
	#home-3 {
		background-color: #6972ED;	
	}

	#home-3 h2,
	#home-3 p,
	#home-3 ul li {
		color: #fff !important;
	}

	/* Section 4 */
	#home-4 {
		background-color: #56D072;	
	}

	#home-4 h2,
	#home-4 p,
	#home-4 ul li {
		color: #fff !important;
	}

	/* Section 5 */
	#home-5 {
		background-color: #CF3B34;	
	}

	#home-5 h2,
	#home-5 p,
	#home-5 ul li {
		color: #fff !important;
	}

	/* Section 6 */
	#home-6 h2 {
		font-size: 36px;
		font-size: 3.6rem;
	}

	#home-6 .av_one_fourth {
		width: 100%;
		margin: 0 0 16px 0;
		clear: none;
	}

    /*
	#home-2:after,
	#home-3:after,
	#home-4:after,
	#home-5:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to bottom right,#000,#777);
		opacity: .2; 
	}
	*/

}

@media all and (max-width: 560px) {

	/* Section 6 */
	#home-6 h2 {
		font-size: 28px;
		font-size: 2.8rem;
	}
}


/****************************************
			  PRODUCT PAGES
****************************************/

/********** SHARED **********/

@media all and (max-width: 900px) {
	#product-main .flex_column {
		display: block;
		width: 100%;
		margin: 0 0 40px 0;
		margin: 0 0 4rem 0;
	}

	#product-additional .avia-image-container {
		display: none;
	}

	#product-question p {
		text-align: center;
	}

	#product-question a {
		max-width: 200px;
		display: block;
		margin: 0 auto;
		margin-top: 24px;
		margin-top: 2.4rem;
	}
}

/********** PRO TROMBONE **********/

@media all and (max-width: 900px) {
	#trombone-1 .flex_column,
	#trombone-2 .flex_column,
	#trombone-3 .flex_column {
		display: block;
		width: 100%;
		margin: 0;
		margin: 0;
		text-align: center;
	}

	#trombone-1 h2,
	#trombone-2 h2,
	#trombone-3 h2 {
		width: 100%;
		text-align: center !important;
		margin-bottom: 32px;
		margin-bottom: 3.2rem;
	}

	#trombone-1 .avia-image-container,
	#trombone-2 .avia-image-container,
	#trombone-3 .avia-image-container {
		display: none;
	}
}


/****************************************
			    CONTACT
****************************************/

.wpcf7-form input:not([type="submit"]),
.wpcf7-form select {
	max-width: 400px;
	padding: 0 16px !important;
	padding: 0 1.6rem !important;
    height: 45px;
    margin-top: 12px !important;
    margin-top: 1.2rem !important;
}

.wpcf7-form textarea {
	margin-top: 12px !important;
    margin-top: 1.2rem !important;
    padding: 12px 16px !important;
	padding: 1.2rem 1.6rem !important;
}

.wpcf7-form p {
	font-size: 17px;
	font-size: 1.7rem;
}

.wpcf7-form .wpcf7-form-control.wpcf7-submit {
	background-color: #46CC65;
	border-bottom: 4px solid #3ead56 !important;
}

.wpcf7-form .wpcf7-form-control.wpcf7-submit:hover {
	background-color: #46CC65;
	opacity: .8;
}

@media all and (min-width: 1100px) {
	.wpcf7-form p:nth-of-type(1),
	.wpcf7-form p:nth-of-type(2),
	.wpcf7-form p:nth-of-type(3),
	.wpcf7-form p:nth-of-type(4) {
		display: inline-block;
		width: 47.5%;
		float: left;
	}

	.wpcf7-form p:nth-of-type(1),
	.wpcf7-form p:nth-of-type(2) {
		margin-bottom: 0;
	}

	.wpcf7-form p:nth-of-type(1),
	.wpcf7-form p:nth-of-type(3) {
		margin-right: 5%;
	}
}