/*
Theme Name: Ecoreef Theme
Theme URI: https://www.ecoreef.co.nz
Version: 3.0
Description: A custom theme for Ecoreef
Author: Dave Murray at Satellite Design
Template: Divi
*/


@import url("../Divi/style.css");

@font-face {font-family: 'Gustan-Black';src: url('webfonts/Gustan-Black.eot');src: url('webfonts/Gustan-Black.eot?#iefix') format('embedded-opentype'),url('webfonts/Gustan-Black.woff2') format('woff2'),url('webfonts/Gustan-Black.woff') format('woff');}
 
@font-face {font-family: 'Gustan-Book';src: url('webfonts/Gustan-Book.eot');src: url('webfonts/Gustan-Book.eot?#iefix') format('embedded-opentype'),url('webfonts/Gustan-Book.woff2') format('woff2'),url('webfonts/Gustan-Book.woff') format('woff');}
 
@font-face {font-family: 'Gustan-Medium';src: url('webfonts/Gustan-Medium.eot');src: url('webfonts/Gustan-Medium.eot?#iefix') format('embedded-opentype'),url('webfonts/Gustan-Medium.woff2') format('woff2'),url('webfonts/Gustan-Medium.woff') format('woff');}




*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; }

html { font-size: 62.5%; }

body { line-height: 1.7; color: #777; padding: 0; box-sizing: border-box; background-color: #4c4c4c; }


/*
Grey = #4c4c4c
Aqua = #00acbc
*/

.heroSection {
	padding: 6rem 0 !important;
}

.heroRow {
	min-width: 50%;
	padding: 0 !important;
}

.heroLogo {
	width: 50%;
	margin: 0 auto 3rem auto !important;
	
}

.ecoreefVideo {
	margin-bottom: 5rem !important;
}

.et_pb_video_box {
	border-radius: 5px;
	overflow: hidden;
}

p {
	font-family: 'Gustan-Medium';
	font-size: 2.5rem;
	color: #FFF;
	text-align: center;
	line-height: 1.2;
}

p a {
	background-color: #00acbc;
	color: #FFF;
	padding: 0.5rem 4rem;
	border-radius: 10px;
	overflow: hidden;
	transition: all ease-in-out 0.2s;
	-webkit-box-shadow: 3px 3px 3px 0px rgba(42,42,42,1);
	-moz-box-shadow: 3px 3px 3px 0px rgba(42,42,42,1);
	box-shadow: 3px 3px 3px 0px rgba(42,42,42,1);
}

p a:hover {
	background-color: #009ebb;
	letter-spacing: 1px;
	padding: 0.5rem 5rem;
	-webkit-box-shadow: 7px 7px 10px 0px rgba(42,42,42,0.5);
	-moz-box-shadow: 7px 7px 10px 0px rgba(42,42,42,0.5);
	box-shadow: 7px 7px 10px 0px rgba(42,42,42,0.5);
}

/*---------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------[RESPONSIVE STYLES SECTION]----------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/



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

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

/* body { background-color: Wheat !important; } */





}

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

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

/* body { background-color: Lavender !important; } */
	
	
}


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

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

/* body { background-color: LightGreen !important; } */



}


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

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

/* body { background-color: Gold !important; } */






}





/*-----------------------------------------------[iPAD LANDSCAPE]------------------------------------------------------*/

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

/* body { background-color: MediumSeaGreen !important; } */




}





/*-----------------------------------------------[iPAD PORTRAIT]------------------------------------------------------*/

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

/* body { background-color: Plum !important; } */


.heroSection { padding: 3rem 0 !important; }

.heroRow { min-width: 90%; }

.heroLogo { width: 60%; margin: 0 auto 2rem auto !important; }

.ecoreefVideo { margin-bottom: 3rem !important; }

p { font-size: 2rem; }

p a { padding: 0.5rem 3rem; }

p a:hover { padding: 0.5rem 3rem; }


}	




	
/*---------------------------------------------[iPHONE LANDSCAPE]-----------------------------------------------------*/

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


/* body { background-color: CornflowerBlue !important; } */




}



/*---------------------------------------------[iPHONE PORTRAIT]-----------------------------------------------------*/

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

/* body { background-color: LightSalmon !important; } */


.heroSection { padding: 2rem 0 !important; }

.heroLogo { width: 70%; }

p { font-size: 1.8rem; }

p a { padding: 0.5rem 3rem; }

p a:hover { padding: 0.5rem 3rem; }


}