* {
	box-sizing: border-box;
}
html {
		background-color: #6A6CA1;
		background-image: url(images/Seamless_pattern.jpg);
		background-repeat: repeat;
		background-size: 137%;
	}
body {
	background: transparent !important;
	padding: 0px 10px;
	margin: 0;
	font-family: 'Ubuntu', sans-serif !important;
	color: #3a342c;
}
.outer-frame {
	margin: 22px auto 22px auto;
	width: 100%;
	max-width: 960px;
    /*z-index: 0;*/
}
.header {
	margin-bottom: 18px;
}
.video-frame {
	position: relative;
	background-color: white;
	width: 100%;
	/*padding: 10px;*/
	/*margin-bottom: 15px;*/
}
.video-frame iframe {
	margin: 0;
	padding: 0;
	border: none;
	width: 100%;
}

img.main{
	width: 100%;
}
.content {
	/*margin-bottom: 5em;*/
}
.footer {
	width: 100%;
	margin: 0 auto 6em;
	color: #3a342c;
	border: none;
/*  border: 1px solid #fff;*/
	background-color: #a6ce39;
    padding: 4em 0 1em;
}

.recipe{
	margin-top: -10px;
}

.recipe-card {
	width: 100%;
	position: relative;
	margin: 10px auto 0 auto;
	background: #fff;
	padding: 0 15px 0 15px;
}

.recipe-top {
	
	background: url(images/HEC_Bread_Pudding.png) no-repeat right;
	 background-size: 350px;
    background-position-y: 30%;
    background-position-x: 90%;
     border-bottom: 2px dashed #2ecc71;

}

.recipe-title p{
	font-size:24px;
	font-weight: 700;
	color:#37246B;
	line-height: 1.2;

}
.recipe-bottom {
	/*text-align: center;*/
	padding:0 35px;
}
.responsive {
  width: 99.9%;
  max-width: 962px;
  height: auto;
  /*border: 1px solid #fff;
 border-bottom: none;*/
}
.recipe-share-btns {
	background-color: #ffffff;
    text-align: center;
    height: 50px;
    padding-top: 2px;
}
.recipe-share-btns span {
	color: #37246a;
	font-weight: 600;
}
.recipe-share-btns a ,
.recipe-share-btns span {
	margin-right: 14px;
}


.recipe-title {
	padding: 40px 0px 0px 62px !important;
    z-index: 1;
}

.recipe-bottom .recipe-title {
	padding: 40px 0px 40px 22px !important;
    z-index: 1;

}
.recipe-bottom .recipe-title h1{
	/*padding-left:12px;*/
}

.recipe-bottom ol,
.recipe-bottom ul{
	padding-inline-start: 25px;
	font-size: 18px;
}

.recipe-title h1 {
    color: #37246B;
	margin: 0px;
	margin-bottom: .85em;
    margin-top: .18em;
	font-family: 'Ubuntu', sans-serif;
	line-height: 1.1em;
	font-weight: 700;
	/*font-size: 45px;
	width: 115%;*/
	font-size: 54px;
	/*width: 120%;*/
}
.recipe-image {
    padding: 0px 15px 0 0 !important;
    height: 385px;
}

.ingredients, .instructions {
	padding: 0px 0px 45px 0px !important;
}
.instructions {
	border:none;
	padding-right: 15px!important;
	
}
.ingredients p,
.instructions p {
	font-size: 18px;
	line-height: 25px;
	font-weight: 200;

}
.wrap {width: 50%;}

.instructions p {
    line-height: 27px;
    padding-bottom: 20px;
}
.instructions ol {
    padding-left: 27px;
}
.instructions ol li {
    font-size: 18px;
    font-weight: 200;
    padding-bottom: 10px;
}
h2 {
	display: inline;
	margin: 0;
	text-transform: uppercase;
	font-size: 24px !important;
	color: #f58e6e !important;
	font-weight: bold;
}
p {
	margin-top: 0.8em;
	font-size: 17px;
	line-height: 23px;
	color: #3a342c;
}
.clear-float {
	clear: both;
}
.explore {
    margin: 0 auto;
    color: #ffffff;
    display: block;
    text-align: center;
    font-size: 1.65em;
    text-transform: capitalize;
    text-decoration: underline;
	font-weight: 800;
	margin-bottom: 1em;
    padding-top:15px;

}
.explore:hover {
	color: #fff;
	text-decoration: none;
}
.connect {
	text-align: center;
    color: #3a342c;
	padding-bottom: 1.5em;
}
.connect a {
	color: #ffffff;
	text-decoration: none;
    margin: 0px 10px;
    font-size: 17px;
}
.connect .line1 {
	font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #3a342c;
}
.connect .line2 {
	font-size: 14px;
    color: #ffffff;
    text-decoration: underline;
}
.connect .line2 a:hover {
	color: #fff;
}
.connect .line3 {
	font-size: 13px;
    color: #ffffff;
    padding-bottom: .75em;
}
.bottom-tab {
	/*margin-right: 10px;*/
	/*float: left;*/
	width: 78px;
	height: 77px;
	background-position: center top;
	background-repeat: no-repeat;
	/*background-size: cover;*/
}
.side-tab {
	width: 37px;
	height: 37px;
	background-repeat: no-repeat;
}
.share {
	margin-left: 3px;
}
#recipe h2 {
    display: inline-block;
    margin-top: 15px;
    font-size: 22px !important;
    margin-bottom: 20px;
	font-weight: 700;
	color:#37246B!important;
	text-transform: capitalize;
}
.row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.video-frame .share-btns {
	position: absolute;
    right: 7px;
    top: -50px;
    height: 50px;
    overflow: hidden;
}
.video-frame .share-btns a,
.video-frame .share-btns p {
    float: left;
}
.video-frame .share-btns a {
	margin-left: 15px;
}
.video-frame .share-btns p {
    color: #fff;
	/*color:#37246b;*/
    font-weight: 400;
    text-align: center;
    margin-bottom: 0px;
    font-size: 12px;
	line-height: 14px;
}
.social-networks {
	display: table;
	overflow: hidden;
    height: 69px;
    text-align: center;
    width: 100%;
}
.social-networks .icon-wrapper {
	display: inline-block;
	padding: 0px 5px;
}

.bottom-tab.facebook { background-image: url('images/Facebook.png'); background-size: contain;}
.bottom-tab.twitter-hwn { background-image: url('images/HawaiianElectric.png'); background-size: contain;}
.bottom-tab.twitter-maui { background-image: url('images/MauiElectric.png'); background-size: contain;}
.bottom-tab.twitter-hi { background-image: url('images/HiElectricLight.png');background-size: contain; }
.bottom-tab.instagram { background-image: url('images/Instagram.png');background-size: contain; }
.bottom-tab.youtube { background-image: url('images/Youtube.png'); background-size: contain;}
.bottom-tab.flickr { background-image: url('images/Flickr.png'); background-size: contain;}
.bottom-tab.medium { background-image: url('images/Medium.png'); background-size: contain;}

.bottom-tab.facebook:hover { background-image: url('images/Facebook-rollover.png'); background-size: contain;}
.bottom-tab.twitter-hwn:hover { background-image: url('images/HawaiianElectric-rollover.png'); background-size: contain;}
.bottom-tab.twitter-maui:hover { background-image: url('images/MauiElectric-rollover.png'); background-size: contain;}
.bottom-tab.twitter-hi:hover { background-image: url('images/HiElectricLight-rollover.png'); background-size: contain;}
.bottom-tab.instagram:hover { background-image: url('images/Insta-rollover.png'); background-size: contain;}
.bottom-tab.youtube:hover { background-image: url('images/Youtube-rollover.png'); background-size: contain;}
.bottom-tab.flickr:hover { background-image: url('images/Flickr-rollover.png'); background-size: contain;}
.bottom-tab.medium:hover { background-image: url('images/Medium-rollover.png'); background-size: contain;}

.side-tab.facebook { background-image: url('images/Top-Facebook.png');background-size: contain; }
.side-tab.twitter { background-image: url('images/Top-X.png'); background-size: contain;}
.side-tab.pinterest { background-image: url('images/Top-Pinterst.png'); background-size: contain;}

.side-tab.facebook:hover { background-image: url('images/Top-Facebook-rollover.png'); }
.side-tab.twitter:hover { background-image: url('images/btn-tw-top_hover.png'); }
.side-tab.pinterest:hover { background-image: url('images/Top-X-rollover.png'); }


.video-frame iframe {
	height: 530px;
}

img.logo {
    width: 100%;
    max-width: 250px;
    padding:15px 0;
}


@media screen and (max-width: 900px) {
	.video-frame iframe {
		height: 374px;
	}
	html {
		/*background-image: none;
		background-size: cover;*/
		letter-sapcing:0;
	}
	.footer {
        /*margin: 60px auto 0 auto;*/
	}
	.recipe-title {
		padding: 10px 0px 0 10px !important;
	}
	.recipe-title h1 {
		/*font-size: 65px;
		font-size: 51px;
		line-height: 1.1em;*/
	}
/*  .recipe-top {
		background-position-y: 15% !important;
    background-size: 80%;
	}*/
		.recipe-top {
		
        background-position-x: 95% !important;
  
	}
/*was this needed } */
}


@media screen and (max-width: 835px) {
	/*.recipe-title h1 {
		font-size: 59px;
	}*/
	.recipe-top {
		background-position-y: 19% !important;
        background-position-x: 95% !important;
        background-size: 47%;
	}
}
@media screen and (max-width: 790px) {
	.instructions {
		border-left: none;
	/*	border-top: 10px solid #fff;*/
	}
	.recipe-image {
		height: 360px;
	}

	.recipe-top {
		background-position-y: 21% !important;
	    background-size: 50%;
	}
}

.img.logo {
   /* width:100%;*/
    max-width: 225px;
}

@media screen and (max-width: 730px) {
	.recipe-title h1 {
		font-size: 47px;
		line-height: 1.1em;
		margin-bottom: 8em;
		text-align: center;
  /*  margin-left: 1.5em;*/
	}
	.recipe-top {
      /*  background: url(images/MacadamiaNutBrittle.jpg) no-repeat center;
    	padding-bottom: 20px;*/
		background-position-y: 15% !important;
		background-position-x: center !important;
	   background-size: 50%;
	   padding-top: 20px;
	 }

	 .social-networks {
	/* width: 80%;*/
	 margin: auto;
	 line-height: 4em;
	 padding: 10px 100px;
 }
 .social-networks .icon-wrapper{
	 padding: 0px 10px 15px;
	}
.wrap {width: 90%;}
}

}
@media screen and (max-width: 700px) {
	.recipe-image {
		height: 290px;
	}
	.recipe-title h1 {
		font-size: 51px;
		text-align: center;
         margin-left:0;
	}
	.recipe-title {
		padding-top: 20px !important;
	}
}


@media screen and (max-width: 650px) {
	.video-frame iframe {
		height: 290px;
	}

	.recipe-image {
		height: 290px;
	}
	.social-networks {
		padding: 0px 40px;
}
	.recipe-top {
		background-position-y: 12% !important;
		background-position-x: center;
	  background-size: 50%;
	}
	.recipe-title h1 {
		font-size: 43px;
		line-height: 1.1em;
		margin-bottom:7em;
		}
	.explore {padding:0px 15px;}

}
@media screen and (max-width: 573px) {
	.connect a {
	    margin: 12px 24px;
	    display: inline-block;
	}
	.hidden_separator {
		display: none;
	}
}
@media screen and (max-width: 570px) {
	.video-frame .share-btns p {
		display: none;
	}
		.recipe-top {
		background-position-y: 10% !important;
		background-position-x: center;
	  background-size: 50%;
	}
	.recipe-title h1 {
		font-size: 43px;
		line-height: 1.1em;
		margin-bottom:6em;
		}
	.wrap {width:95%;}
}
/*@media screen and (max-width: 562px) {
	.recipe-title h1 {
		font-size: 43px;
	}
}*/
@media screen and (max-width: 550px) {
	.header {
			margin-bottom: -20px;
	}
	.video-frame {
		margin-top: 80px;
	}
}
@media screen and (max-width: 500px) {
	.video-frame iframe {
		height: 229px;
	}
	.recipe-title h1 {
		font-size: 38px;
		margin-bottom: 6em;
	}
	.recipe-top {
	    background-position-y: 10% !important; /*last one we changed */
	    background-size: 50%;
	}
}
@media screen and (max-width: 445px) {

	.recipe-top {
	    background-position-y: 9% !important;
	    background-size: 53%;
	}
	
	.recipe-title h1 {
		font-size: 35px;
		margin-bottom:9em;
		text-align: left;
	}

	.recipe-bottom .recipe-title h1 {
		font-size: 35px;
		margin-bottom:1em;
		text-align: left;
	}
	.recipe-bottom .recipe-title {
	    padding: 10px 0 !important;
	    z-index: 1;
	}
	.recipe-title {
        padding: 10px 10px !important;
    }
}
@media screen and (max-width: 380px) {
	.video-frame iframe {
		height: 174px;
	}
	.recipe-top {
	    background-position-y: 9.5% !important;
        background-size: 53%;
	}
		.recipe-title h1 {
		font-size: 35px;
	    margin-bottom: 9em;
     
	}
}
@media screen and (max-width: 360px) {
	.recipe-share-btns span {
		display: none;
	}
	.recipe-title h1 {
		font-size: 35px;
		margin-bottom: 9em;
	}
}
@media screen and (max-width: 320px) {

	.recipe-top {
	    background-position-y: 9.5% !important;
        background-size: 60%;
	}

	.video-frame iframe {
		height: 128px;
		
	}
}