bml/style.css

/*
Theme Name: bml
Theme URI: http://cantbuymelove.org
Author: windhamdavid
Author URI: http://davidawindham.com

/* Thanks! 
	https://github.com/dhg Dave Gamache
	https://github.com/Automattic/_s - Team Automattic
	https://github.com/Prinzhorn/skrollr - Alexander Prinzhorn
	https://plus.google.com/104610899646415406748/about - James Grieshaber
*/

@import url(https://fonts.googleapis.com/css?family=Great+Vibes|Cardo|Monsieur+La+Doulaise);

/* #Reset  ================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
html {font-size: 62.5%;overflow-y: scroll;-webkit-text-size-adjust: 100%;-ms-text-size-adjust:100%;}
body { background: #fff; }
article,aside,details,figcaption,figure,footer,header,main,nav,section {display: block;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q { quotes: "" ""; }
a:focus {outline: thin dotted;}
a:hover, a:active {outline: 0;}
a img {border: 0;}

/* #Clearing  ================================================== */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before,.clearfix:after,.row:before,.row:after {content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 0;height: 0; }
.row:after,.clearfix:after {clear: both; }.row,.clearfix {zoom: 1; }
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.clear:before,.clear:after,.entry-content:before,.entry-content:after,.comment-content:before,.comment-content:after,.site-header:before,.site-header:after,.site-content:before,.site-content:after,.site-footer:before,.site-footer:after {content: '';display: table;}
.clear:after,.entry-content:after,.comment-content:after,.site-header:after,.site-content:after,.site-footer:after {clear: both;}

/* #Base 960 Grid ================================================== */
.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
/* Hackety Hack - position needs to be absolute for Skrollr to work right */
.container .column,
.container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row                                        { margin-bottom: 20px; }
.column.alpha, .columns.alpha               { margin-left: 0; }
.column.omega, .columns.omega               { margin-right: 0; }
.container .four.columns                    { width: 220px; }
.container .eight.columns                   { width: 460px; }
.container .sixteen.columns                 { width: 940px; }
.container .one-third.column                { width: 300px; }
.container .two-thirds.column               { width: 620px; }
.container .offset-by-one                   { padding-left: 60px;  }
.container .offset-by-two                   { padding-left: 120px; }
.container .offset-by-three                 { padding-left: 180px; }
.container .offset-by-four                  { padding-left: 240px; }
.container .offset-by-eight                 { padding-left: 480px; }

/* Fonts ================================================== */


h1.monsieur {
	font-family: 'Monsieur La Doulaise', cursive;
	font-size:85px;
	text-shadow: 0px 1px 0px #999;
}
h4.cardo {
	font-family: 'Cardo', serif;
	text-transform:uppercase;
	font-size:18px;
}
h4.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:38px;
}
p.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:28px;
	line-height:30px;
}


/* #Skrollr  ================================================== */

#skrollr-body {height: 100%;width: 100%;}
html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
.skrollable {position:fixed;z-index:100;}
.skrollr-mobile .skrollable {position:absolute;}
.skrollable .skrollable {position:absolute;}
.skrollable .skrollable .skrollable {position:static;}
#bg1, #bg2, #bg3 {z-index:50;top:0;left:0;width:100%;height:100%;background:url(img/bg.png) repeat 0 0;}
#bg2 {z-index:49;background-image:url(img/bg2.png);}
#bg3 {z-index:48;background-image:url(img/bg3.png);}
.easing {
	width:100%;
	height:100%;
}
#horizon {
	position:fixed;
	height:300px;
	bottom: 0px;
	z-index:300;
}
#intro {
	width:80%;
	top:80px;
	margin-left:-70%;
	padding:2em;
	text-align:center;
}
	.intro_ease {
		width:100%;
		height:100%;
		background:#fff;
	}
#intro2 {
	width:80%;
	top:120px;
	margin-left:-70%;
	padding:2em;
	text-align:center;
}
#story_wrap {
	width:100%;
	height:100%;
}
#story {
	width:60%;
	text-align:center;
}
	.story {
		width:100%;
		height:100%;
		text-align:center;
	}
	
#trip_wrap {
	width:100%;
	height:100%;
}
#trip {
	width:100%;
	height:100%;
}
#vows {
	width:100%;
	height:100%;
}
#wish {
	width:100%;
	height:100%;
}
.transform {
	width:70%;
	left:50%;
	top:20%;
	margin-left:-35%;
	text-align:center;
	font-size:150%;
	.transform-origin(50%, 50%);
}
.transform2 {
	width:70%;
	left:50%;
	top:20%;
	margin-left:-35%;
	text-align:center;
	font-size:150%;
	.transform-origin(50%, 50%);
}
.wish {
	width:100px;
	text-align:center;
	margin: 0 auto;
}
.well {
	z-index:400;
	color:#fff;
}

#bmlcount {
	font-family: 'Great Vibes', cursive;
	font-size:39px;
}

#heart {
    position: relative;
    width: 100px;
    height: 90px;
	color:#fff;
	z-index:100;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.15, 1.1, 1.1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.10, 1.1, 1.1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  animation-name: pulse;
  -webkit-animation: pulse 3s;
  -moz-animation:    pulse 3s;
  -o-animation:      pulse 3s;
  animation:         pulse 3s;
}





/* Media Queries ========================================= */

@media screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
	h1.monsieur {
		font-family: 'Monsieur La Doulaise', cursive;
		font-size:33px;
	}
	h4.vibes {
		font-family: 'Great Vibes', cursive;
		font-size:21px;
	}
	h4.cardo {
		font-family: 'Cardo', serif;
		text-transform:uppercase;
		font-size:14px;
	}
	#horizon {
		
	}
	#gform {
		width:100%;
		padding: 0 10px;
	}
}