/*
  Website URI: www.mikamakamoo.com
  Author: Kamal Chaneman
  Author URI: www.contenga.co
*/
/* =========================================================
   TABLE OF CONTENTS
============================================================ */
/*
  FONT-FACE
  RESET
  CLEARFIX
  WP BASIC STYLE
  SHARED
  BASE
  HEADER
  CONTENT
*/

/* =========================================================
   $FONT-FACE
============================================================ */
@font-face {
  font-family: 'Veneer';
  src: url('fonts/Veneer.eot');
  src: url('fonts/Veneer.eot?#iefix') format('embedded-opentype'),
       url('fonts/Veneer.woff') format('woff'),
       url('fonts/Veneer.ttf') format('truetype'),
       url('fonts/Veneer.svg#Veneer') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'hilllight';
  src: url('fonts/hill-light_playtype-webfont.eot');
  src: url('fonts/hill-light_playtype-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/hill-light_playtype-webfont.woff') format('woff'),
       url('fonts/hill-light_playtype-webfont.ttf') format('truetype'),
       url('fonts/hill-light_playtype-webfont.svg#hilllight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'hillregular';
  src: url('fonts/hill-regular_playtype-webfont.eot');
  src: url('fonts/hill-regular_playtype-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/hill-regular_playtype-webfont.woff') format('woff'),
       url('fonts/hill-regular_playtype-webfont.ttf') format('truetype'),
       url('fonts/hill-regular_playtype-webfont.svg#hillregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HelveticaInseratLT-Roman';
  src: url('fonts/HelveticaInseratLT-Roman.eot');
  src: url('fonts/HelveticaInseratLT-Roman.eot?#iefix') format('embedded-opentype'),
       url('fonts/HelveticaInseratLT-Roman.woff') format('woff'),
       url('fonts/HelveticaInseratLT-Roman.ttf') format('truetype'),
       url('fonts/HelveticaInseratLT-Roman.svg#Helvetica inserat') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* =========================================================
   $RESET
============================================================ */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{ margin:0; padding:0; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
h1,h2,h3,h4,h5,h6{ font-size:100%; }
table{ border-collapse:collapse; border-spacing:0; }
strong,b,mark{ font-weight:bold; font-style:inherit; }
em,i,cite,q,address,dfn,var{ font-style:italic; font-weight:inherit; }
abbr[title],dfn[title]{ cursor:help; border-bottom:1px dotted; }
ins{ border-bottom:1px solid; }
a,u,ins{ text-decoration:none; }
del,s{ text-decoration:line-through; }
pre,code,samp,kbd{ font-family:monospace; }
small{ font-size:0.75em; }
img{ border:none; font-style:italic; }
input,
select,option,optgroup,
textarea{ font:inherit; }
img { height: auto; max-width: 100%; }
/* =========================================================
   $CLEARFIX
============================================================ */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.group:after,
.container:after,
.copyrights:before { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.group { display: inline-block; }
* html .group { height: 1%; } /* Hides from IE-mac \*/
.group { display: block; }
.group { *zoom: 1; }
/* =========================================================
   $WP BASIC STYLE
============================================================ */
.entry-content img { margin: 0 0 1.5em 0; }
.alignleft,img.alignleft { display: inline; float: left; margin-right: 1.5em; }
.alignright,img.alignright { display: inline; float: right; margin-left: 1.5em; }
.aligncenter,img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
.wp-caption { text-align: center; margin-bottom: 1.5em; }
.wp-caption img { border: 0 none; margin: 0; padding: 0; }
.wp-caption p.wp-caption-text { margin: 0; }
.wp-smiley { max-height: 1em; margin:0 !important; }
/* =========================================================
   $BASE
============================================================ */
body {
  background: #fff;
  color: #637367;
  font: 100%/1.5 'hilllight', Helvetica, Arial, sans-serif;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.container {
  margin: 0 auto;
  max-width: 900px;
  position: relative;
  width: 92%;
}
/* =========================================================
   $HEADER
============================================================ */
.logo { display: block; float: left; }
.header {
  background: url(images/bg-header.gif) center top no-repeat;
  height: 112px;
  position: relative;
}
.nav { float: right; margin-top: 30px; }
.nav li { float: left; list-style: none; margin: 0 15px; }
.nav a { background: url(images/nav.png) no-repeat; display: block; text-indent: -999em; }
.nav .about a { background-position: 0 0; height: 18px; width: 59px; }
.nav .apps a { background-position: -99px -1px; height: 22px; width: 58px; }
.nav .policy a { background-position: -204px -1px; height: 13px; width: 116px; }
.nav .contact a { background-position: -364px 0; height: 18px; width: 115px; }

/* =========================================================
   $CONTENT
============================================================ */
/* Typography */
p { font-size: 16px; letter-spacing: 2px; line-height: 28px; margin-bottom: 10px; }
strong { font-family: 'hillregular', Helvetica, Arial, sans-serif; font-weight: bold; }
.link { color: #fff; }
.link:hover { border-bottom: 1px solid #fff; }

.content,
.slide-content { float: left; width: 300px; }
.wrap .content {
  opacity: 0;
  -webkit-animation: 1s both;
  -moz-animation: 1s both;
  -ms-animation: 1s both;
  -o-animation: 1s both;
  animation: 1s both;
}
.wrap .content.fadeInLeft {
  opacity: 1;
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translateX(-20px); }
  100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes fadeInLeft {
  0% { opacity: 0; -moz-transform: translateX(-20px); }
  100% { opacity: 1; -moz-transform: translateX(0); }
}
@-mz-keyframes fadeInLeft {
  0% { opacity: 0; -mz-transform: translateX(-20px); }
  100% { opacity: 1; -mz-transform: translateX(0); }
}
@-o-keyframes fadeInLeft {
  0% { opacity: 0; -o-transform: translateX(-20px); }
  100% { opacity: 1; -o-transform: translateX(0); }
}
@keyframes fadeInLeft {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}
.content h2 { font: 24px 'Veneer', Helvetica, Arial, sans-serif; }
.img, .cycle-slideshow, .map {
  float: right;
  opacity: 0;
  -webkit-animation: 1s both;
  -moz-animation: 1s both;
  -ms-animation: 1s both;
  -o-animation: 1s both;
  animation: 1s both;
}
.img.fadeInRight,
.cycle-slideshow.fadeInRight,
.map.fadeInRight {
  opacity: 1;
  -webkit-animation-name: fadeInRight;
  -moz-animation-name: fadeInRight;
  -o-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRight {
  0% { opacity: 0; -webkit-transform: translateX(20px); }
  100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes fadeInRight {
  0% { opacity: 0; -moz-transform: translateX(20px); }
  100% { opacity: 1; -moz-transform: translateX(0); }
}
@-ms-keyframes fadeInRight {
  0% { opacity: 0; -ms-transform: translateX(20px); }
  100% { opacity: 1; -ms-transform: translateX(0); }
}
@-o-keyframes fadeInRight {
  0% { opacity: 0; -o-transform: translateX(20px); }
  100% { opacity: 1; -o-transform: translateX(0); }
}
@keyframes fadeInRight {
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}
.title { background: url(images/title.png) no-repeat; margin-bottom: 25px; text-indent: -999em; }
#about .title { background-position: 0 0; height: 97px; width: 297px; }
#apps .title { background-position: 0 -118px; height: 75px; width: 197px; }
#policy .title { background-position: -359px -6px; height: 86px; width: 164px; }
#contact .title { background-position: -251px -124px; height: 64px; width: 294px; }

.masthead { margin-top: 70px; text-align: center; }
.masthead .content {
  background: url(images/dark-green-top.jpg) bottom center repeat-x;
  float: none;
  height: 236px;
  margin-top: -7px;
  width: auto;
}
.masthead .container { padding-top: 30px; }
.masthead .appstore { float: right; }
#about {
  background: url(images/bg-about.jpg) bottom center repeat-x, url(images/pat-green.jpg);
  min-height: 598px;
  margin-top: 100px;
  padding: 100px 0 0;
  position: relative;
}
#about p { color: #637367; }
#apps {
  background: #cadace;
  margin-top: 100px;
  padding: 100px 0;
  position: relative;
}
#apps:after {
  background: url(images/palegreen-flat.png) bottom center repeat-x;
  bottom: -33px;
  content: "";
  height: 33px;
  left: 0;
  position: absolute;
  width: 100%;
}
#apps:before {
  background: url(images/grey-curtain.jpg) bottom center repeat-x;
  bottom: -78px;
  content: "";
  height: 78px;
  left: 0;
  position: absolute;
  width: 100%;
}
#apps p { color: #743922; }
.videos-wrap {
  background: url(images/frame.png) no-repeat;
  float: right;
  height: 403px;
  position: relative;
  width: 517px;
}
.cycle-slideshow { width: 100%; }
.slide { width: 100%; }
.slide-content a {
  background: url(images/btn-appstore.png) no-repeat;
  display: block;
  height: 40px;
  text-indent: -999em;
  width: 135px;
}
.videos { margin: 43px 0 0 49px; width: 419px; }
.videos a { cursor: pointer; }
.videos .play {
  background: url(images/btn-play.png) no-repeat;
  display: block;
  height: 140px;
  left: 50%;
  margin: -70px 0 0 -70px;
  position: absolute;
  text-indent: -999em;
  top: 50%;
  width: 140px;
}
.slide-nav span {
  background: url(images/prev-next.png) no-repeat;
  cursor: pointer;
  display: block;
  height: 48px;
  margin-top: -24px;
  position: absolute;
  text-indent: -999em;
  top: 50%;
  width: 46px;
}
.slide-nav #next { background-position: -48px 0; right: -65px; }
.slide-nav #prev { background-position: 0 0; left: -65px; }
#policy {
  background: url(images/bg-policy.jpg) repeat-x;
  height: 698px;
  margin-top: 150px;
  position: relative;
}
#policy .container:before {
  background: url(images/policy-top.png) no-repeat;
  content: "";
  display: block;
  height: 236px;
  position: absolute;
  right: 0;
  top: 0;
  width: 517px;
}
#policy .top { top: 50px; }
#policy .img { position: relative; }
#policy .content { margin-top: 100px; }
#policy .img { margin-top: 250px; }
#policy h2, #policy p { color: #743922; }
#contact {
  /*background: url(images/bg-contact.jpg) top center repeat-x, url(images/pat-grey.jpg);*/
  background: url(images/bg-contatcBottom.jpg) bottom repeat-x, url(images/bg-contact.jpg) top center;
  height: 747px;
  margin-top: 70px;
  padding-top: 100px;
  position: relative;
}
#contact h2, #contact p { color: #fff; }
#contact .top { background-image: url(images/arrow-top_white.png); }
a[href^=tel] { color: #fff; }
.social-icon a {
  background: url(images/social-icon.png) no-repeat;
  display: inline-block;
  height: 60px;
  margin: 30px 10px 0 0;
  text-indent: -999em;
  width: 60px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.social-icon .icon-twitter { background-position: 0 0; }
.social-icon .icon-fb { background-position: 0 -60px; }
.social-icon a:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.top {
  background: url(images/arrow-top.png) no-repeat;
  display: block;
  height: 34px;
  position: absolute;
  right: 100px;
  text-indent: -999em;
  top: -50px;
  width: 36px;
  z-index: 5;
}
.top:hover {
  -webkit-animation: UpDown 1s infinite;
  -moz-animation: UpDown 1s infinite;
  -ms-animation: UpDown 1s infinite;
  -o-animation: UpDown 1s infinite;
  animation: UpDown 1s infinite;
}
@-webkit-keyframes UpDown {
  0% { -webkit-transform: translateY(0); }
  50% { -webkit-transform: translateY(-5px); }
  100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes UpDown {
  0% { -moz-transform: translateY(0); }
  50% { -moz-transform: translateY(-5px); }
  100% { -moz-transform: translateY(0); }
}
@-ms-keyframes UpDown {
  0% { -ms-transform: translateY(0); }
  50% { -ms-transform: translateY(-5px); }
  100% { -ms-transform: translateY(0); }
}
@-o-keyframes UpDown {
  0% { -o-transform: translateY(0); }
  50% { -o-transform: translateY(-5px); }
  100% { -o-transform: translateY(0); }
}
@keyframes UpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
#policy h2,
#contact h2 { font-family: 'HelveticaInseratLT-Roman', Helvetica, Arial, sans-serif; letter-spacing: 1.5px; margin-bottom: 20px; }
/*#contact .copyrights {
  bottom: 20px;
  color: #5c472d;
  font: 700 21px 'Veneer', Helvetica, Arial, sans-serif;
  left: 50%;
  margin-left: -450px;
  position: absolute;
  text-align: right;
  max-width: 900px;
  width: 98%;
}*/
.copyrights {
  bottom: 10px;
  left: 50%;
  margin-left: -450px;
  max-width: 900px;
  position: absolute;
  width: 98%;
}
#contact .copyrights p {
  color: #5c472d;
  font: 700 21px 'Veneer', Helvetica, Arial, sans-serif;
  float: right;
}
.video-js {
  width: 635px;
  max-width: 100%;
  height: 475px;
}

/* =========================================================
   MEDIA QUERIES
============================================================ */
@media only screen and (max-width: 767px) {
  .header { background: url(images/palegreen-flat.png) repeat-x; }
  .nav { float: none; margin: 0; }
  .nav ul { padding-top: 20px; }
  .nav li { margin-bottom: 12px; }
  .nav li:nth-child(2n+2) { float: right; }
  .logo { float: none; }
  .masthead .appstore { display: block; float: none; margin: 15px auto 0; width: 50%; }
  .content, .slide-content { float: none; width: auto; }
  .img, .videos-wrap, .map { float: none; margin-bottom: 150px; }
  .cycle-slideshow { width: auto; }
  .videos-wrap { background: none; height: auto; width: auto; }
  .videos { margin: 43px auto 0; max-width: 419px; width: auto; }
  .slide-nav span { bottom: 80px; top: auto; }
  .slide-nav #prev { left: 0; }
  .slide-nav #next { right: 0; }
  #about { padding-bottom: 100px; }
  #policy .container:before { display: none; }
  #policy .content { margin-top: 0; padding-top: 120px; }
  #policy p { color: #743922; font: 700 18px/1.6 'hillregular', Helvetica, Arial, sans-serif; letter-spacing: 1px; }
  #policy .img { display: none; }
  #contact { height: auto; padding-bottom: 30px; }
  .social-icon { margin: 30px 0; }
  .social-icon a { margin: 0 auto 15px; }
  .social-icon a.icon-twitter { margin-right: 15px; }
  .top { left: 50%; right: auto; }
  #contact .copyrights { left: 0; margin: 0; text-align: center; }
  #contact .copyrights p { font-size: 19px; }
}
@media only screen and (min-width:768px) and (max-width:991px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .header { background: url(images/palegreen-flat.png) repeat-x; }
  .nav { float: none; margin: 0; }
  .nav ul { padding-top: 30px; text-align: center; }
  .nav li { display: inline-block; float: none; }
  .masthead { margin-top: 50px; }
  .masthead .appstore { width: 25%; }
  .content { width: 45%; }
  .img, .videos-wrap, .map { width: 50%; }
  .cycle-slideshow { margin-right: 35px; width: 90%; }
  .slide-nav #next { right: -25px; }
  .slide-nav #prev { left: -25px; }
  .videos-wrap { background: none; height: auto; }
  .videos { margin-left: 0; max-width: 419px; width: auto; }
  .videos .play { margin: -60px 0 0 -60px; }
  #contact .copyrights p { font-size: 19px; }
}