/* Cascading Style Sheet document -- Created by Codify Design Studio */

body { margin: 0; padding: 0; font-family: "proxima-nova",sans-serif; font-size: 18px; background-color: #343433; }
h1 {  }
h2 { font-family: "museo-slab",serif; font-size: 2.5em; font-weight: normal; margin: 0px 0px -5px 0px; }
h3 { font-size: 1.4em; font-weight: bold; margin: 0px; }
p { font-size: 1.15em; }
a { text-decoration: none; }

article { margin: 0px; background-color: #fff; padding-top: 20px; }

header { text-align: center; }
header h1 { margin: 0; }
header h1 span { display: none; }
header h1 a { display: inline-block; width: 350px; height: 62px; background: url(/assets/images/logo_2x.png) no-repeat 0px 0px; background-size: 350px 124px; }
/* header h1 a:hover { background-position: 0px -62px;  } */


/* frenzy */
section.frenzy { text-align: center; }
section.frenzy { display: block; height: 550px; background: #0ea59f url(/assets/images/photo_large.jpg) no-repeat center 0px; }
section.frenzy > div { text-align: left; display: inline-block; width: 440px; min-height: 370px; margin: 60px 0px 0px 0px; padding: 60px 0px 0px 265px; background: url(/assets/images/icon_phone.png) no-repeat left 0px; }
section.frenzy h2 { color: #fff; }
section.frenzy p { color: #fff; margin: 10px 0px 15px 0px; line-height: 24px; }
section.frenzy a.sample { display: inline-block; width: 95px; height: 120px;  margin: 10px 10px 0px 0px; background-repeat: no-repeat; background-size: contain; }
section.frenzy a.sample span { display: none; }
section.frenzy a.sample.sample_adim14 { background-image: url(/assets/images/thumb_adim14.png); }
section.frenzy a.sample.sample_adim13 { background-image: url(/assets/images/thumb_adim13.png); }
section.frenzy a.sample.sample_how14 { background-image: url(/assets/images/thumb_how14.png); }
section.frenzy a.sample.sample_howidc12 { background-image: url(/assets/images/thumb_howidc12.png); }


/* compatibility */
section.compatibility { margin: 50px 100px 60px 100px; text-align: center; }
section.compatibility h2 { margin-bottom: 5px; }
section.compatibility p { font-size: 1.25em; margin: 0px 0px 15px 0px; line-height: 24px; }

/* technology */
section.technology { margin: 0px 100px 30px 100px; }
section.technology aside { width: 49%; float: left; }
section.technology aside div.wp { margin-right: 20px; padding: 90px 0px 0px 75px; text-align: right; background: url(/assets/images/technology_wordpress.png) no-repeat right top; background-size: 105px 85px; }
section.technology aside div.jq { margin-left: 20px; padding: 90px 75px 0px 0px; text-align: left; background: url(/assets/images/technology_jqmobile.png) no-repeat left top; background-size: 105px 85px; }
section.technology p { font-size: 1em; margin: 0px 0px 15px 0px; line-height: 20px; }

/* dive in */
section.divein { background-color: #343433; text-align: center; padding: 40px 0px 20px 0px; }
section.divein div { margin: 0px 100px 0px 100px; }
section.divein h2 { color: #fff; margin: 0px; }
section.divein p { color: #fff; margin: 0px; }
section.divein a { display: inline-block; color: #fff;  background: no-repeat 0px 0px; }
section.divein a:visited { color: #fff; }
section.divein a span { display: none; }

section.divein a.email_us { background: url(/assets/images/email_us.png) no-repeat center 0px; width: 150px; padding: 50px 0px 0px 0px; margin: 20px 0px 40px 0px; background-size: 75px 47px }

section.divein a.share { width: 35px; height: 35px; margin: 0px 10px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; }
section.divein a.share_tw { background-image: url(/assets/images/share_icon_tw.jpg); }
section.divein a.share_fb { background-image: url(/assets/images/share_icon_fb.jpg); }
section.divein a.share_gp { background-image: url(/assets/images/share_icon_gp.jpg); }


footer { border-top: 1px solid #555; font-size: .8em; color: #666666; background-color: #343433; padding: 20px 0px 50px 0px; text-align: center; }
footer a { color: #888888; }
footer a:hover { color: #ffffff; }

div.sample { height: 340px; position: relative; width: 575px; padding: 20px; }
div.sample img { width: 325px; height: 340px; position: absolute; top: 10px; left: 10px; }
div.sample figcaption { position: absolute; bottom: 65px; right: 10px; width: 250px; }
div.sample h4 { margin: 0px 0px 0px 0px; font-family: "museo-slab"; font-weight: normal; font-size: 1.25em; }
div.sample h5 { margin: 0px 0px 10px 0px; font-weight: normal; font-size: 1em; }
div.sample p { font-size: .7em; margin: 0px 0px 12px 0px; }
div.sample p span { color: #a00; font-style: italic; }
div.sample a, div.sample a:visited { font-weight: bold; color: #2cc0ee; }

/* fancybox overrides */
a#fancybox-left  { width: 50px; left: -40px; }
a#fancybox-left #fancybox-left-ico { left: auto; right: 0px; }
a#fancybox-right { width: 50px; right: -40px; }
a#fancybox-right #fancybox-right-ico { left: auto; }


/* carousel */
.mme_carousel {
	background-color: #0ea59f;
	padding: 1px;
	height: 620px;
}

.my_carousel {
	position: relative;
	margin: 30px auto 20px auto;
	padding: 1px;
}

.my_carousel::before {
	content: '';
	display: block;
	width: 150px;
	height: 307px;
	background: url(../images/phone.png) no-repeat 0 0;
	background-size: contain;
	position: absolute;
	top: 59px;
	left: 50%;
	margin: 0 0 0 -79px;
}




.carousel_container { height: 0px; margin: -40px 0 0 0; overflow: hidden; height: 500px; }

#carousel { margin: 0 10px; width: inherit; height: 300px; }

#carousel img { width: 125px; height: 229px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .2); }

.nextItem {
	position: absolute; top: 360px; left: 100px; z-index: 1001; cursor: pointer;
	animation: fish_left .75s infinite ease-in-out;
}

.prevItem {
	position: absolute; top: 360px; right: 100px; z-index: 1002; cursor: pointer;
	animation: fish_right .75s infinite ease-in-out;
}



@keyframes fish_left {
	0%, 100% { transform: rotate(-8deg); }
	50% { transform: rotate(8deg); }
}
@keyframes fish_right {
	0%, 100% { transform: rotate(8deg); }
	50% { transform: rotate(-8deg); }
}


#captions h2 { font-family: Georgia; font-size: 32px; font-weight: normal; margin: 15px 0px 5px 0px; color: #6d8824; }

#captions p { font-family: Arial; font-size: 14px; color: #444; margin: 0; }

.carousel_data { display: none; }

.mme_carousel h2 { color: #fff; text-align: center; margin-top: 10px; }

.mme_carousel p { color: #fff; text-align: center; width: 60%; margin: 10px auto; line-height: 24px; }

.mme_carousel .caption_container { width: 270px; margin: -70px auto 0 auto; padding: 0; text-align: center; }

.mme_carousel .caption_container p { margin: 0; width: auto; line-height: 1.25em; }
.mme_carousel .caption_container p a { color: rgba(255,255,255,.6); transition: color .3s; }
.mme_carousel .caption_container p a:hover { color: #fff; }



/* Media Queries */

@media screen and (max-width: 1280px) {
	
	.mme_carousel p { width: 80%; }
	
}

@media screen and (max-width: 580px) {
	
	header h1 a { width: 282px; height: 50px; background: url(/assets/images/logo_2x.png) no-repeat 0px 0px; background-size: 282px 100px;  }
	.mme_carousel h2 { font-size: 2em; margin-top: 5px; }
	.mme_carousel p { width: 90%; line-height: 1.1em; }
	.nextItem { left: 25px; }
	.prevItem { right: 25px; }
	#carousel { margin: 0 -90px; }
	
}





@media screen and (min-width: 601px) and (max-width: 960px) {

	body { font-size: 16px; }

	section.frenzy { height: 450px; background-image: url(/assets/images/photo_medium.jpg); }
	section.frenzy > div { width: 360px; min-height: 325px; background-size: 174px 350px; margin: 30px 0px 0px 0px; padding: 40px 0px 0px 200px; }
	section.frenzy a.sample { width: 75px; height: 95px; margin-right: 5px; }
	section.frenzy a.sample span { display: none; }
	
	section.compatibility { margin: 30px 25px 40px 25px; text-align: center; }
	
	section.technology { margin: 0px 0px 30px 0px; }
	section.technology aside h3 { line-height: 22px; margin-bottom: 5px; }
	section.technology aside h3 span { display: block; }
	section.technology aside div.wp { margin-right: 20px; padding: 90px 0px 0px 75px; text-align: right; background: url(/assets/images/technology_wordpress.png) no-repeat right top; background-size: 105px 85px; }
	section.technology aside div.jq { margin-left: 20px; padding: 90px 75px 0px 0px; text-align: left; background: url(/assets/images/technology_jqmobile.png) no-repeat left top; background-size: 105px 85px; }
	section.technology p { font-size: 1em; margin: 0px 0px 15px 0px; line-height: 20px; }
	
	section.divein a.share { width: 30px; height: 30px; }
	
	div.sample { height: 210px; position: relative; width: 440px; padding: 10px; }
	div.sample img { width: 205px; height: 214px; position: absolute; top: 5px; left: 5px; }
	div.sample figcaption { position: absolute; bottom: 25px; right: 10px; width: 230px; }
	div.sample h4 { margin: 0px 0px 0px 0px; font-family: "museo-slab"; font-weight: normal; }
	div.sample h5 { margin: 0px 0px 10px 0px; font-weight: normal; }
	div.sample p { margin: 0px 0px 12px 0px; font-size: .9em; }
	div.sample p span { color: #a00; font-style: italic; }
	div.sample a, div.sample a:visited { font-weight: bold; color: #2cc0ee; }

}

@media screen and (min-width: 50px) and (max-width: 600px) {

	body { font-size: 16px; }
	
	header h1 a { display: inline-block; width: 250px; height: 44px; background: url(/assets/images/logo.png) no-repeat 0px 0px; background-size: 250px 88px;  }
	header h1 a:hover { background-position: 0px -44px;  }

	section.frenzy { height: 400px; background: #0ea59f url(/assets/images/photo_small.jpg) no-repeat center 0px; margin-bottom: 0px; }
	section.frenzy > div { text-align: left; display: inline-block; width: 200px; min-height: 370px; margin: 20px 0px 0px 0px; padding: 5px 0px 0px 85px; background: url(/assets/images/icon_phone.png) no-repeat left 5px; background-size: 70px 141px; }
	section.frenzy h2 { font-size: 1.7em; color: #fff; }
	section.frenzy p { font-size: 1.1em; line-height: 17px; margin-bottom: 20px; padding-right: 25px; }
	section.frenzy p span { display: none; }
	
	section.compatibility { margin: 15px 20px 40px 20px; text-align: center; }
	section.compatibility h2 { font-size: 1.8em; line-height: 26px; }
	section.compatibility h2 span { display: block; }
	section.compatibility p { font-size: 1.1em; margin: 0px 0px 25px 0px; line-height: 18px; }
	
	section.frenzy a.sample { display: inline-block; width: 65px; height: 82px;  margin: 0px 10px 15px 15px; background-repeat: no-repeat; background-size: contain; }
	section.frenzy a.sample span { display: none; }
	section.frenzy a.sample.sample_adim14 { background-image: url(/assets/images/thumb_adim14.png); }
	section.frenzy a.sample.sample_adim13 { background-image: url(/assets/images/thumb_adim13.png); }
	section.frenzy a.sample.sample_how14 { background-image: url(/assets/images/thumb_how14.png); }
	section.frenzy a.sample.sample_howidc12 { background-image: url(/assets/images/thumb_howidc12.png); }
	
	section.technology { margin: 0px 0px 30px 0px; }
	section.technology aside h3 { font-size: 1.2em; line-height: 18px; margin-bottom: 10px; }
	section.technology aside h3 span { display: block; }
	section.technology aside { width: 100%; float: none; }
	section.technology aside div.wp { margin: 20px 20px 30px 10px; padding: 5px 0px 0px 90px; text-align: left; background: url(/assets/images/technology_wordpress.png) no-repeat 10px 0px; background-size: 70px 57px; }
	section.technology aside div.jq { margin: 0px 20px 10px 10px; padding: 5px 0px 0px 90px; text-align: left; background: url(/assets/images/technology_jqmobile.png) no-repeat 10px 0px; background-size: 70px 57px; }
	section.technology p { font-size: 1em; margin: 0px 0px 15px 0px; line-height: 20px; }
	
	section.divein { background-color: #343433; text-align: center; padding: 20px 0px 20px 0px; }
	section.divein div { margin: 0px 30px 0px 30px; }
	section.divein h2 { font-size: 2em; color: #fff; margin: 0px; }
	section.divein p { font-size: 1.1em; color: #fff; margin: 0px; }
	section.divein a.email_us { background: url(/assets/images/email_us.png) no-repeat center 0px; width: 150px; padding: 40px 0px 0px 0px; margin: 20px 0px 40px 0px; background-size: 55px 34px }
	
	div.sample { height: 330px; position: relative; width: 220px; padding: 0px; }
	div.sample img { width: 175px; height: 183px; position: absolute; top: 5px; left: 5px; }
	div.sample figcaption { position: absolute; bottom: auto; right: auto;  left: 15px; top: 190px; width: 190px; }
	div.sample p { margin: 0px 0px 9px 0px; font-size: .9em; }

}