@charset "utf-8";
/* 
   Site URL:  http://www.alanamarxen.com/
   Site Designed & Developed By:  Alana Marxen
*/
  
body {
  background: #c9c9c9;
  padding: 0;
  margin: 0;
  font: 11px/14px 'Libre Franklin', arial, verdana, sans-serif;
  color: #4c4c4c;
  text-decoration: none;
  overflow-x: hidden;
  overflow-y: auto;
  }
  
p {
  font: 4vw/5.25vw 'Libre Franklin', arial, verdana, sans-serif;
  color: #4c4c4c;
  text-decoration: none;
  padding: 0;
  margin: 0 0 15px 0;
  }
  
p.small-text {
  font: 12px/17px 'Libre Franklin', arial, verdana, sans-serif;
  }
  
a {
  color: #4c4c4c;
  text-decoration: underline;
  }
  
a:hover, a:focus {
  color: #36beb0;  
  text-decoration: none;
  }
  
a:hover.pop-link {
  color: #a3a3a3;
  }
  
/*** H1 FOR TAGLINE / MAIN PAGE TITLES ***/
h1 {
  font: 400 5vw/6vw 'Libre Franklin', arial, verdana, sans-serif;
  color: #4c4c4c;
  text-decoration: none;
  padding: 0;
  margin: 0 0 10px 0;
  }

h2 {
  font: 400 4.5vw/5.5vw 'Libre Franklin', arial, verdana, sans-serif;
  color: #4c4c4c;
  text-decoration: none;
  padding: 5px 0;
  margin: 0;
  }	

h3 {
  font: 400 4vw/5.25vw 'Libre Franklin', arial, verdana, sans-serif;
  color: #4c4c4c;
  text-decoration: none;
  padding: 0;
  margin: 0;
  }	

ul {
  padding-bottom: 10px;
  }
  
li {
  font: 4vw/5.25vw 'Libre Franklin', arial, verdana, sans-serif;
  margin-bottom: 5px;
  }

@media (min-width:550px) {
p, li {
  font: 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  }

h1 {
  font: 400 22px/27px 'Libre Franklin', arial, verdana, sans-serif;
  }

h2 {
  font: 400 20px/25px 'Libre Franklin', arial, verdana, sans-serif;
  }	

h3 {
  font: 400 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  }
}

@media (min-width: 1682px) {
p, li {
  font: 18px/23px 'Libre Franklin', arial, verdana, sans-serif;
  }

p.small-text {
  font: 14px/19px 'Libre Franklin', arial, verdana, sans-serif;
  }
  
/*** H1 FOR TAGLINE / MAIN PAGE TITLES ***/
h1 {
  font: 400 24px/29px 'Libre Franklin', arial, verdana, sans-serif;
  }

h2 {
  font: 400 22px/27px 'Libre Franklin', arial, verdana, sans-serif;
  }

h3 {
  font: 400 18px/23px 'Libre Franklin', arial, verdana, sans-serif;
  }
}

/**** GLOBAL CLASSES ****/
.whole-img {
  width: 100%;
  padding: 0;
  margin: 0;
  }

.col-pad-off {
  padding: 0;
  }
  
.show-xs-sm, .show-xs-md {
  display: block;
  }

.show-md-lg, .show-lg, .show-none {
  display: none;
  }

.neon-green {
  color: #36beb0;
  }

strong {
  font-weight: 600;
}

.extra-space-bottom {
  margin-bottom: 20px;
  }

@media (min-width: 768px) {
.top-space {
  margin-top: 13px;
  }
}

@media (min-width: 1200px) { 
.pad-space {
  padding-left: 11px;
  }
}

.r-container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  }
  
.r-wrapper {
  display: inline-block;
  vertical-align: middle;
  float: none;
  }

.vertical-align {
  display: flex;
  flex-direction: row;
  }

.vertical-align {
  display: flex;
  align-items: center;
  vertical-align: middle;
  /*justify-content: center;*/
  }

@media (min-width: 992px) {
.show-xs-sm {
  display: none;
  }

.show-md-lg {
  display: block;
  }
}
  
@media (min-width: 1200px) {
.show-xs-md {
  display: none;
  }
  
.show-lg {
  display: block;
  }
}

/*** HEADER STRIPES ***/
.top-green-stripe {
  background: #36beb0;
  height: 2px;
  }
  
.top-brown-stripe {
  background: #4c4c4c;
  height: 6px;
  }

/*** LOGO ***/
.logo-wrapper {
  padding: 0 13px 0 13px;
  }
  
.logo {
  text-indent: -9000px;
  background-image: url(/images/alana-marxen-logo.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 32.6%; /*Divide image height by width */
  height: 0;
  margin: 12px 0 12px 0;
  }
  
@media (max-width: 767px) {
.logo {
  width: 210px;
  height: 81px;
  padding-top: 0;
  margin: 12px 0 0 0;
  }
}

@media (min-width:768px) {
.logo-wrapper {
  padding-left: 2em;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
.logo {
  width: 80%;
  padding-top: 30%;
  margin: 13px 0 0 0;
  }
}

@media (min-width: 1200px) {
.logo-wrapper {
  padding: 0 13px 0 10px;
  }
  
.logo {
  margin: 30px 0 13px 0;
  }
}

/*** TAGLINE ***/
.tagline-brown-stripe {
  background: #4c4c4c;
  height: 2px;
  margin: 0 0 3px 0;
  }

ul#tagline {
  margin: 0 0 10px -7px; /** subtrack ul#tagline li padding left amount from 13px for margin left value **/
  padding: 0;
  }
  
ul#tagline li {
  display: inline;
  list-style: none;
  color: #4c4c4c;
  padding: 0 14px 0 7px;
  margin: 0;
  background: url(/images/square.gif) no-repeat;
  background-position: right 40%;
  }  

ul#tagline li.last {
  background: none;
  }

ul#tagline li h1 {
  display: inline;
  }

@media (min-width:768px) {
.tagline-brown-stripe {
  margin: 0 0 5px 0;
  }
  
ul#tagline {
  margin: 0 0 10px -9px; /** subtrack ul#tagline li padding left amount from 13px for margin left value **/
  }
  
ul#tagline li {
  padding: 0 15px 0 9px;  
  background: url(/images/square.gif) no-repeat;
  background-position: right 5px;	
  }
}

@media (min-width: 1200px) {
ul#tagline {
  margin: 0 0 10px 2px; /** subtrack ul#tagline li padding left amount from 13px for margin left value **/
  }
}

@media (min-width: 1682px) {
ul#tagline {
  margin: 0 0 10px -2px; /** subtrack ul#tagline li padding left amount from 13px for margin left value **/
  }
  
ul#tagline li {
  padding: 0 25px 0 14px;
  background: url(/images/square-xl.gif) no-repeat;
  background-position: right 6px;  
  }
}
  
/*** MAIN NAV ***/
ul#navigation a  {
  font: 400 18px/25px 'Libre Franklin', arial, verdana, sans-serif;
  color: #fff;
  text-decoration: none;
  }

ul#navigation a.nav1  {
  color: #4c4c4c;
  font-weight: 300;
  }
  
ul#navigation a:hover  {
  color: #fff;
  font-weight: 400;
  }  
  
ul#navigation li {
  list-style: none;
  padding: 0 0 0 10px;
  margin: 0;
  }
  
@media (min-width: 1200px) {
ul#navigation {
  position: relative;
  top: 75px;
  padding: 4px 0 4px 0;  
  background: url(/images/line.gif) repeat-y left top;
  }
  
ul#navigation a  {
  font: 400 24px/32px 'Libre Franklin', arial, verdana, sans-serif;
  }
}

@media (min-width: 1682px) {
ul#navigation {
  position: relative;
  top: 93px;
  }
  
ul#navigation a  {
  font: 400 26px/36px 'Libre Franklin', arial, verdana, sans-serif;  
  }
}

/*** MAIN BOXES ***/
.box {
  position: relative;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  margin: 13px;
  }

.box-image {
  display: block;  
  width: 100%;
  height: auto;
  }

/*ease in top or bottom */
.overlay {
  position: absolute;
  top: 0;
  background-color: #fff;
  overflow: hidden;  
  height: 0;
  width: 100%;
  transition: .5s ease;
  }

.box:hover .overlay {  
  height: 100%;
  }

.overlay h2 {
  font: 500 5vw/6vw 'Libre Franklin', arial, verdana, sans-serif;
  background: #4c4c4c;
  color: #fff;
  overflow: hidden;
  padding: 4.5vw;
  margin-bottom: 4.5vw;
  border-bottom: solid 3px #36beb0;
  }

.overlay p {
  font: 4vw/5.25vw 'Libre Franklin', arial, verdana, sans-serif;
  overflow: hidden;
  padding: 0 4.5vw;
  margin: 0 0 3.75vw 0;
  }

.view-btn {
  float: right;
  padding-right: 4.5vw;
  }
  
a.btn-style {
  color: #4c4c4c;
  border: solid 1px #4c4c4c;
  text-decoration: none;
  padding: 5px 0 4px 10px;  
  font: 4vw/5.25vw 'Libre Franklin', arial, verdana, sans-serif;
  cursor: pointer;
  }

a.close {
  padding: 5px 11px 4px 10px;
  margin: 20px 0 15px 0;
  }
  
.close-x {
  color: #36beb0;
  }

a:hover > .close-x {
  color: #a3a3a3;
  }
  
a.prev-btn {
  padding: 5px 8px 4px 8px; 
  margin-right: 10px;
  }

a:hover.btn-style {
  color: #36beb0;
  border: solid 1px #a3a3a3;
  text-decoration: none;
  }
  
.glyphicon-menu-right, .glyphicon-menu-left {
  color: #36beb0;
  position: relative;
  top: 2px;
  }

a:hover > .glyphicon-menu-right, a:hover > .glyphicon-menu-left {
  color: #a3a3a3;
  }

@media (max-width:1199px) {
 a:hover.prev-btn, a:hover.next-btn {
  color: #4c4c4c;
  border: solid 1px #4c4c4c;
  }

a:hover >.gly-hov {
  color: #36beb0;
  }
}

.glyph-right-arrow {
  left: -3.25vw;
  margin-right: -1.25vw;
  }
  
.glyph-left-arrow {
  left: 3.25vw;
  margin-left: -3vw;
  }

@media (min-width:550px) {  
.overlay h2 {
  font: 500 4vw/5vw 'Libre Franklin', arial, verdana, sans-serif;
  padding: 5.5vw;
  margin-bottom: 5.5vw;
  }

.overlay p {
  font: 3vw/4vw 'Libre Franklin', arial, verdana, sans-serif;
  padding: 0 4.5vw;
  margin: 0 0 4.5vw 0;
  }

.view-btn {
  padding-right: 5.5vw;
  }
  
.overlay a.btn-style {
  font: 3vw/4vw 'Libre Franklin', arial, verdana, sans-serif;
  }
  
a.btn-style {
  font: 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  }

a.close {
  padding: 4px 10px 3px 10px;
  }
  
.overlay .glyph-right-arrow {
  left: -2.5vw;
  margin-right: -1.4vw;
  }

.glyph-right-arrow {
  left: -13px;
  margin-right: -4px;
  }
  
.glyph-left-arrow {
  left: 13px;
  margin-left: -12px;
  }
}
  
@media (min-width: 768px) {
.box {
  width: 349px;
  height: 207px;
  }

.overlay h2 {
  font: 500 18px/23px 'Libre Franklin', arial, verdana, sans-serif;
  padding: 15px;
  margin-bottom: 15px;
  }

.overlay p {
  font: 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  padding: 0 15px;
  margin: 0 0 15px 0;
  }

.view-btn {
  padding-right: 15px;
  }

.overlay a.btn-style, a.btn-style {
  font: 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  }

.overlay .glyph-right-arrow {
  left: -13px;
  margin-right: -4px;
  }
}

@media (min-width: 992px) {
.box {
  width: 424px;
  height: 252px;
  }

.overlay h2 {
  font: 500 20px/25px 'Libre Franklin', arial, verdana, sans-serif;
  padding: 20px;
  margin-bottom: 15px;
  }

.overlay p {
  font: 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  padding: 0 20px;
  margin: 0 0 30px 0;
  }

.view-btn {
  padding-right: 20px;
  }

.overlay a.btn-style, a.btn-style {
  font: 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  }

.next-btn {
  margin-left: 10px;
  }

a.prev-btn {
  margin-right: 0;
  }
  
.overlay .glyph-right-arrow, .glyph-right-arrow {
  left: -14px;
  margin-right: -5px;
  }

.glyph-left-arrow {
  left: 14px;
  margin-left: -13px;
  }
}

@media (min-width: 1200px) {
.box {
  width: 267px;
  height: 159px;
  }

.overlay h2 {
  font: 500 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  padding: 8px;
  margin-bottom: 8px;
  }
  
.overlay p {
  font: 13px/16px 'Libre Franklin', arial, verdana, sans-serif;
  padding: 0 8px;
  margin: 0 0 15px 0;
  }

.view-btn {
  padding-right: 8px;
  }

a.btn-style {
  font: 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  }
  
.overlay a.btn-style {
  font: 13px/16px 'Libre Franklin', arial, verdana, sans-serif;
  }

a.prev-btn {
  padding: 5px 7px 4px 7px;  
  }
  
.overlay .glyph-right-arrow {
  left: -10px;
  margin-right: -1px;
  }
  
.glyph-right-arrow {
  left: -13px;
  margin-right: -5px;
  }

.glyph-left-arrow {
  left: 13px;
  margin-left: -12px;
  }
}

@media (min-width: 1682px) {
.box {
  width: 378px;
  height: 225px;
  }

.overlay h2 {
  font: 500 20px/25px 'Libre Franklin', arial, verdana, sans-serif;
  padding: 15px;
  margin-bottom: 15px;
  }

.overlay p {
  font: 18px/23px 'Libre Franklin', arial, verdana, sans-serif;
  padding: 0 15px;
  margin: 0 0 20px 0;
  }

.view-btn {
  padding-right: 15px;
  }

a.btn-style, .overlay a.btn-style {
  font: 18px/23px 'Libre Franklin', arial, verdana, sans-serif;
  }

a.prev-btn {
  padding: 5px 8px 4px 8px;  
  }

a.close {
  padding: 4px 11px 3px 11px;
  }
  
.glyph-right-arrow, .overlay .glyph-right-arrow{
  left: -14px;
  margin-right: -5px;
  }

.glyph-left-arrow {
  left: 14px;
  margin-left: -13px;
  }
}

/*** POP STYLE ***/
.space {
  padding: 0 15px 0 15px;
  margin: 15px 0 15px 0;
  }
  
.space2 {
  padding: 0 15px 0 15px;
  margin: 0 0 15px 0;
  }
 
 .space-extra-top-bottom {
  padding: 0 15px;
  margin: 20px 0 35px 0;
  }
  
.space_top {
  padding: 0 0;
  margin: 15px 0 0 0;
  }

.spc-top {
  padding-top: 5px;
  }

.space_bottom {
  padding: 0 0 15px 0;
  margin: 0;
  }
  
#pop, #pop-sml {
  width: 100%;
  background-color: #fff;
  padding: 0;
  margin: 0;
  }

#pop img, #pop-sml img {
  width: 100%;
  height: auto;  
  }

.pop-line {
  background: #a3a3a3;
  height: 1px;
  }
    
input, textarea {
  border: solid 1px #36beb0;
  border-radius: 0;
  background: #4c4c4c;
  font: 4vw/5.25vw 'Libre Franklin', arial, verdana, sans-serif;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  }  
  
input:hover, textarea:hover {
  color: #4c4c4c;
  background: #36beb0;
  border: solid 1px #4c4c4c;
  text-decoration: none;
  /*-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);*/
  }
  
.green-txt {
  color: #36beb0;
  }
  
input.contact, textarea.contact {
  padding: 5px;
  margin: 0 0 5px 10px;
  width: 73%;
  }

input.contact-btn {
  padding: 5px 10px;
  margin-top: 3px;
  width: auto;
  }

.contact-wrapper {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: -3px;
  }
  
.contact-left {
  width: 25%;
  float: left;
  text-align: right;
  }

.contact-right {
  width: 75%;
  float: left;
  }

tr {
  padding: 0;
  margin: 0;
  }

@media (min-width: 550px) {
#pop img, #pop-sml img {
  width: 500px; 
  }
  
input, textarea {
  font: 16px/21px 'Libre Franklin', arial, verdana, sans-serif;
  }

.contact-wrapper {
  width: 400px;
  }

.contact-left {
  width: 25%;
  }

.contact-right {
  width: 75%;
  }
}
  
@media (min-width: 768px) {
 .space-extra-top-bottom {
  padding: 0 15px;
  margin: 20px 0;
  }
  
#pop img {
  width: 668px;
  }

#pop-sml img {
  width: 690px;
  }

.contact-left {
  width: 22%;
  }

.contact-right {
  width: 78%;
  }
}

@media (min-width: 992px) {
#pop img {
  width: 892px;
  }

.btn-pop-container {
  margin: 5px auto;
  }

.btn-pop-wrapper {
  float: right;
  }
}

@media (min-width: 1200px) {
#pop img {
  width: 1000px;
  }
}

@media (min-width: 1682px) {
#pop img {
  width: 1216px;
  }
  
input, textarea {
  font: 20px/25px 'Libre Franklin', arial, verdana, sans-serif;
  }

.contact-wrapper {
  width: 485px;
  }
}

#facebox .b {
  background:url(/images/b.png);
  }
  
*html #facebox .b {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/b.png');
  background: none;
  }

#facebox .b * {
  position: relative;
  }

#facebox .tl {
  background:url(/images/tl.png);
  }

*html #facebox .tl {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/tl.png');
  background: none;
  }

#facebox .tl * {
  position: relative;
  }

#facebox .tr {
  background:url(/images/tr.png);
  }

*html #facebox .tr {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/tr.png');
  background: none;
  }

#facebox .tr * {
  position: relative;
  }

#facebox .bl {
  background:url(/images/bl.png);
  }
  
*html #facebox .bl {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/bl.png');
  background: none;
  }

#facebox .bl * {
  position: relative;
  }

#facebox .br {
  background:url(/images/br.png);
  }
  
*html #facebox .br {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/br.png');
  background: none;
  }

#facebox .br * {
  position: relative;
  }

#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
  }

#facebox .popup {
  position: relative;
  }

#facebox table {
  border-collapse: collapse;
  }

#facebox td {
  border-bottom: 0;
  padding: 0;
  }

#facebox .body {
  padding: 0;
  background: #fff;
  width: 370px;
  }

#facebox .loading {
  text-align: center;
  }

#facebox .image {
  text-align: center;
  }

#facebox img {
  border: 0;
  margin: 0;
  }

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
  }

#facebox_overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  }

.facebox_hide {
  z-index:-100;
  }

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
  }

* html #facebox_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
  }

#facebox .footer {
  padding: 0;
  margin: 0 0 15px 15px;
  clear: both;
  }

#facebox .footer a {
  float: left;
  opacity: 100;
  }
 
/*** MAIN CONTENT ***/
.self-portrait {
  margin: -50px 0 20px 20px;  
  }

@media (max-width:549px) {
.self-portrait {
  width: 55%;
  height: auto;
  margin-top: -40px;
  }
}

@media (min-width: 550px) {
.self-portrait {
  width: 300px;
  height: 271px;
  }
}

@media (min-width: 1682px) {
.self-portrait {
  width: 400px;
  height: 361px;
  }
}

.bottom-brown-stripe {
  border-top: solid 1px #4c4c4c;
  margin-bottom: 50px;
  padding-top: 10px;
  }

@media (min-width: 1200px) {
.bottom-brown-stripe-home {
  margin-left: 13px;
  margin-right: 13px;
  }
}

/*****************************************************************************
MOZILLA HACK
*****************************************************************************/
:focus {
  outline-style: none;
  -moz-outline-style: none;
  }
  
  
/*** MISC ***/
/*
light gray background: #c9c9c9
light gray: #a3a3a3
dark gray: #4c4c4c;
teal: #36beb0
*/