/*

    CSS Document Keystud
    Komma Mediadesign 2013
    www.komma-mediadesign.nl

*/

/************************************** View 1 **************************************/
*{ outline: none;}
img{ border: none;}
html{ width: 100%; overflow-y:scroll; overflow-x:hidden; }
body{ margin: 0; width: 100%; font-size: 18px; font-family:'Source Sans Pro', sans-serif; font-weight: 400; background: #323A3A; line-height: 1.5;}
a{ text-decoration: none; color: #FFA000; }
strong{  font-weight: 600; }

.clear{ clear: both; }
li.clear{ display: block; height: 0; width: 0; float: none !important; clear: both;}

.sprite{ background: url('../images/structure/keystud_sprite.svg'); background-size: 48em 28em; }
.resp{ position: absolute; top: 50%; left: 50%; opacity: 0; filter: alpha(opacity=0); }
.balance{ height: 100%; }
.valign{ display: -moz-inline-box; display: inline-block;  vertical-align: middle;  }
/* IE 6 and 7 hack */
html* div.valign {
    display: inline;
}

#view{ width: 1px;}


/* Global - Header */
#header{ position: relative; width: 100%; height: 10em; background: #ffffff; }
#header .logo_holder{ float: left; width: 25%; height: 100%; }
#header .logo{ margin: 1.5em 0 0 5em; height: 7em }
#header .nav{ float: left; width: 75%; height: 100%; }
#header .menu{ margin: 4em 0 0 0; padding: 0; list-style: none; }
#header .menu li{ position: relative; float: left; margin-right: 4em; font-size: .9em; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; }
#header .menu li a{ color: #666666; }
#header .menu li.active a{color: #FFA000; }
#header .menu li .line{ display: none; }
#header .menu li.active .line{ position: absolute; left: 0; bottom: -1em; display: block; height: 0.2em; width: 100%; background: #FFA000; }
#header .menu li.last{ margin-right: 0; }
#header .menu li.line_break{ display: none; height: 0; width: 0; float: none; clear: both; }

#content{ width: 100%; }

/* Global - Article */
.article{ position: relative; padding: 4em; color: #ffffff; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; }
.article h1{ margin: 0 0 1em 0; font-size: 2em; font-family: 'Brandon Grot W01 Thin',sans-serif; font-weight: normal; }
.article h1 strong{ font-family: 'Brandon Grot W01 Light',sans-serif; font-weight: normal;}

/* Global - Selection */
::selection{ background:#FFA000; color:#ffffff; }
::-moz-selection{ background:#FFA000; color:#ffffff; }

/* Global - Flags */
.flags{ position: absolute; right: 4em; top: 4em; }
.flag{ display: block; float: left; margin-left: 1em;  color:#666666; font-size: .9em; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; }
.flag.active{ color:#FFA000; }

/* Global - Footer */
#footer{ position: fixed; z-index: 1000; left: 0; bottom: 0; width: 100%; height: auto; background: #262D2D; }
#footer ul{ margin: 0; padding: 1em 2em; list-style: none; font-size: .7em;  line-height: 2.4; }
#footer ul li{ display: block; float: left; margin-right: 3em; }
#footer ul li:last-child{ margin-right: 0; }
#footer ul li a{ color:#666666; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; }
#komma_link{ position: absolute; right: 3em; bottom: 0.6em; display: block; height: 2.5em; color: #666666; cursor: pointer; font-size: .7em; text-transform: uppercase; filter: alpha(opacity=50); }
#komma_logo{ display: block; float: left; margin: 0 10px 0 0; width: 1.25em; height: 1.25em; font-size: 1.7em; background-position: -5em -4em; }
#komma_text{ position: relative; top: -1px; left: 0; display: block; float: left; line-height: 1.2}
#komma_text strong{  font-family: 'Brandon Grot W01 Bold',sans-serif; font-weight: normal;}

/*

    Home

*/

/* Home - Responsive container */
.home .ab{ position: relative; float: left; width: 62.5%; height: 100%;}
.home .a{ position: relative; float: left; width: 40%; height: 100%; background: #323A3A;}
.home .b{ position: relative; float: left; width: 60%; height: 100%; }
.home .c{ position: relative; float: left; width: 37.5%; height: 100%; }

/* Home Article */
.horseshoe{ display: block; position: absolute; top: 4.6em; left: 2em; margin-left: -0.6125em; width: 1.25em; height: 1.5em; background-position: -1em -4em; }
.home .cta{ position: absolute; left:0; bottom: 0; padding: 2em 4em; width: 100%; height: auto; background: #FFA000; color: #ffffff;  box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box }
.home .cta .title{ display: block; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; }
.home .cta a{ color: #ffffff;  }
.home .cta strong{ text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.05em;}

/* Home - News */
.home .image_holder{ position: relative; overflow: hidden; width: 100%; height: 50%; cursor: pointer; background: url('../images/structure/ajax-loader.gif') center center no-repeat; }
.home .image_holder .hover{ position: relative; z-index: 5; width: 100%; height: 100%; color: #ffffff; }
.home .image_holder .hover .bg{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: #FFA000;  opacity: 0; filter: alpha(opacity=0);}
.home .image_holder.alt .hover .bg{ background: #FFAA00; }
.home .image_holder .text{ position: absolute; z-index: 10; top: 50%; left: 50%; margin-left: -25%; width: 50%; text-align: center;  }
.home .image_holder .icon{ display: inline-block; margin-bottom: 1em; width: 2em; height: 2.5em; background-position: -1em -1em;  opacity: 0; filter: alpha(opacity=0); }
.home .image_holder .title{ display: block; margin-bottom: .4em; font-size: 2.5em; font-family: 'Brandon Grot W01 Bold',sans-serif;line-height: 1.4; }
.home .image_holder .title a{ color: #ffffff; }
.home .image_holder .posted{ display: block;  font-size: .7em; text-transform: uppercase;  opacity: 0; filter: alpha(opacity=0);}
.home .image_holder .date{ display: block;  font-family: 'Brandon Grot W01 Bold',sans-serif;  opacity: 0; filter: alpha(opacity=0);}

/* Home - Side Menu */
.home .side_menu{ margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; }
.home .side_menu li{ position: relative; width: 100%; height: 33.333333%; background: #008282; font-size: 2.5em; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; cursor: pointer;  }
.home .side_menu li a{ display: block; width: 100%; height: 100%; color: #ffffff; }
.home .side_menu li .inner{ position: absolute; top: 50%; left: 2.5em; margin-top: -0.75em; height: 1.5em; line-height: 1.5;  }
.home .side_menu .alt{ background: #009B93; }
.home .side_menu .sprite{ display: inline-block; position: relative; top: 0.3em; left: 0; margin-right: 1em; width: 2em; font-size: .4em}
.home .side_menu .mares{  height: 2.5em; background-position: -4em -1em;  }
.home .side_menu .foals{  height: 2.7em;width: 3em; background-position: -13em -3.5em;  }
.home .side_menu .youngsters{ left: -0.6em; margin-right: 0; width: 3em; height: 2.5em; background-position: -9em -1em; }
.home .side_menu li ::selection{ background:#00B2A5; color:#ffffff; }
.home .side_menu li ::-moz-selection{ background:#00B2A5; color:#ffffff; }

.social_media{ position: relative; list-style: none; margin: 60px 0; padding: 0; }
.social_media li{ display: block; float: left; margin-right: 10px;  }


/* News - Responsive container */
.news{  background: #262D2D; }
.news .ab{ position: relative; float: left; width: 67%; height: 100%;}
.news .a{ position: relative; float: left; width: 50%; height: 100%; background: #008282;}
.news .b{ position: relative; float: left; width: 50%; height: 100%; }
.news .c{ position: relative; float: left; width: 33%; height: 100%; }

/* News - Other news items */
.news .a .article{ padding: 0; background: #262D2D; }
.news .a .article .text_holder{ padding: 4em;  background: #008282;}
.news .a .news_image{  position: relative; }
.news .a .news_image img{ display: block; position: relative; width: 100%; margin: 0;   }

.news .news_holder{ position: relative; overflow: hidden; width: 100%;  height: 33.3333333%; background: #FFA000;  cursor: pointer;}
.news .news_holder.alt{ background: #FFAA00; }
.news .news_holder .hover{ position: relative; z-index: 5; width: 100%; height: 100%; color: #ffffff; }
.news .news_holder .hover .bg{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: #00B2A5; opacity: 0; filter: alpha(opacity=0); }
.news .news_holder .text{ position: absolute; z-index: 10; top: 50%; left: 50%; margin-left: -40%; width: 80%; text-align: center; }
.news .news_holder .icon{ display: inline-block; margin-bottom: 1em; width: 2em; height: 2.5em; background-position: -1em -1em;  }
.news .news_holder .title{ display: block; margin-bottom: .4em; font-size: 1.5em; font-family: 'Brandon Grot W01 Bold',sans-serif; line-height: 1.4; }
.news .news_holder .title a{ color: #ffffff; }
.news .news_holder .posted{ display: block; font-size: .7em; text-transform: uppercase;}
.news .news_holder .date{ display: block; font-family: 'Brandon Grot W01 Bold',sans-serif; }

.news .c .image_holder{ position: relative; overflow: hidden; width: 100%; height: 100%; cursor: pointer;}

/*

    About Keystud // Contact

*/

/* Keystud & Contact - Responsive containers */
.basic .a{ position: relative; float: left; width: 25%; height: 100%; background: #008282;}
.keystud .b{ position: relative; float: left; width: 75%; height: 100%; }
.contact .b,.contact .c{ position: relative; float: left; width: 37.5%; height: 100%; }

#markerContent{ width: 12em; height: 10em; color: #666666;}
#markerContent h1{ font-size: 1.5em; color: #333; }


/* Keystud & Contact - Bottom menu */
.basic .bottom_menu{ bottom: 0; margin: 0; padding: 0; width: 100%; height: auto; list-style: none; }
.basic .bottom_menu li{ position: relative; width: 100%; height: 4em; background: #FFA000; font-size: 1.5em; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; cursor: pointer;  }
.basic .bottom_menu li a{ color: #ffffff; }
.basic .bottom_menu li .inner{ position: absolute; top: 50%; left: 2.5em; margin-top: -0.75em; height: 1.5em; line-height: 1.5;  }
.basic .bottom_menu .alt{ background: #FFAA00; }
.basic .bottom_menu .sprite{ display: inline-block; position: relative; top: 0.3em; left: 0; margin-right: 1em; width: 2em; font-size: .4em}
.basic .bottom_menu .mares{  height: 2.5em; background-position: -4em -1em;  }
.basic .bottom_menu .foals{  left: -0.6em; margin-right: 0; height: 2.7em; width: 3em; background-position: -13em -3.5em;   }
.basic .bottom_menu .youngsters{ left: -0.6em; margin-right: 0; width: 3em; height: 2.5em; background-position: -9em -1em; }

/* Keystud & Contact - Large image */
.basic .image_holder{ position: relative; overflow: hidden; width: 100%; height: 100%; background: url('../images/structure/ajax-loader.gif') center center no-repeat;}

/* Contact - Google Maps */
#google_maps{ position: relative; width: 100%; height: 100%; background: #DBDBDB; }
#google_maps #map_holder{ position: relative; overflow: hidden; width: 100%; height: 100%; }
#google_maps #map_canvas{ width: 100%; height: 120%;}


/*

    Horses

*/

.horses .a{ position: relative; float: left; height: 100%; width: 20em; background: #008282; }
.horses .b{ position: relative; float: left; background: #323A3A;  }

.aside{ position: relative; z-index: 100; width: 100%; height: 100%; background: #008282; color: #ffffff; }
.aside .years,.aside .horse_list{ display: block; position: relative; margin: 0; padding: 0; float: left;  list-style: none; }
.aside .years{ width: 25%; font-family: 'Brandon Grot W01 Bold',sans-serif; text-align: center; line-height: 3; }
.aside .horse_list{ width: 75%;  }
#mares .aside .horse_list{ width: 100%;  }
.aside .border{ position: absolute; top: 0; right: 75%; z-index: 5; width: 3px; height: 100%; background: #FFA000;  }
#mares .aside .border{ display: none; }
.aside .years li , .aside .horse_list li { position: relative; height: 5em; padding: 1em; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; cursor: pointer; background: #008282; white-space: nowrap; }
.aside .years li:nth-child(even) { background: #009B93; }
.aside .years li.active,.aside .horse_list li.active{ background: #FFA000; }
.aside .years li a,.aside .horse_list li a{ color: #ffffff; }
.aside .years li.ignore{ cursor: default; }
.aside .horse_list li{ padding: 1.1em 1em 1em 1em; }
.aside .horse_list li .line{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #33898B; }
.aside .horse_list li .shadow{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 0.5em; background-position: -1em -6.5em; }
.aside .horse_list li .name{ display: block; font-family: 'Brandon Grot W01 Bold',sans-serif; font-size: 1.1em; }
.aside .horse_list li .pedigree{ display: block; font-family: 'BrandonGrotW01-Regular',sans-serif; font-size: 0.70em; text-transform: uppercase; color: #9BCDCD; }
.aside .horse_list .active .pedigree{ display: block; font-family: 'BrandonGrotW01-Regular',sans-serif; font-size: 0.70em; text-transform: uppercase; color: #ffffff; }
.aside .horse_list li:hover .pedigree{ display: block; font-family: 'BrandonGrotW01-Regular',sans-serif; font-size: 0.70em; text-transform: uppercase; color: #ffffff; }

.aside .years .icon{ display: inline-block; position: relative; left: 0; top: 0; height: 2.5em; }
.aside .years .icon.mares{  top: 0.3em; width: 2em; background-position: -4em -1em;  }
.aside .years .icon.foals{  left: 0.1em; top: 0.3em;width: 3em; height: 2.7em; background-position: -13em -3.5em;  }
.aside .years .icon.youngsters{ top: 0.2em; width: 3em; background-position: -9em -1em; }
.aside .years .icon.references{ top: 0.2em; width: 2em; background-position: -25.5em -1em; }

.aside .back_to_top{ display: none; position: fixed; top: 10em; left: 0; width: 20%; height: 2.5em; line-height: 3.5; opacity: 0; filter: alpha(opacity=0); cursor: pointer; }
.aside .back_to_top span{ display: block; float: left; height: 3.5em; }
.aside .back_to_top .arrow{ width: 25%; }
.aside .back_to_top .arrow .sprite{ margin: 1.6em 2em; width:0.5em; height: 0.75em; background-position: -19em -2em;  }
.aside .back_to_top .text{ width: 75%; padding-left: 0.25em; font-family: 'Brandon Grot W01 Bold',sans-serif; font-size: 1.1em; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box;}
.aside .back_to_top .shadow{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 0.5em; background-position: -1em -6.5em; }
.aside .back_to_top .line{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #33898B; }

.horses #thumb_list{ display: block; position: relative; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; }
.horses #thumb_list li{ display: block; position: absolute; top: 0; left: 0; overflow: hidden; cursor: pointer; background: url('../images/structure/ajax-loader.gif') center center no-repeat; }
.horses #thumb_list .streamer{ padding: 1em; background: #FFAA00; color: #ffffff; font-size: 2em; font-family: 'BrandonGrotW01-Regular',sans-serif; text-align: center; cursor: default; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
.horses #thumb_list .streamer .inner{ width: 80%; }
.horses #thumb_list .streamer strong{ font-weight: normal; font-family: 'Brandon Grot W01 Bold',sans-serif; }
.horses #thumb_list .cta{ padding: 2em; background: #FFA000;  color: #ffffff; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
.horses #thumb_list .cta a{ color: #ffffff;}
.horses #thumb_list .cta h2{ margin: 0;font-size: 1.2em; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase;  }
.horses #thumb_list .empty{ background: #323A3A; cursor: default; }
.horses #thumb_list .cta .cta_info strong{ text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.05em;}

.horses #thumb_list li .hover_bg{ display: block; position: absolute; z-index: 5; top: 0; left: 0; width:100%; height: 0; background: #009B93; opacity: 0; filter: alpha(opacity=0); }
.horses #thumb_list li .hover_text{ display: block; position: absolute; z-index: 10; top: 100%; left: 0; width: 100%; height: 100%; color: #ffffff; text-align: center  }
.horses #thumb_list li .hover_text .inner{ width: 80%; }
.horses #thumb_list li .hover_text .name{ display: block; font-family: 'Brandon Grot W01 Light',sans-serif; font-size: 1.6em; color: #ffffff; line-height: 1; }
.horses #thumb_list li .hover_text .pedigree{ display: block; color: #99CDCF; font-family: 'BrandonGrotW01-Regular',sans-serif; font-size: .8em; text-transform: uppercase; }
.horses #thumb_list li .hover_text .gender{ display: inline-block; margin-bottom: 1em; width: .75em; height: 1em;  }
.horses #thumb_list li .hover_text .gender.v{ background-position: -13em -1em; }
.horses #thumb_list li .hover_text .gender.m{ width: 1em; background-position: -14em -1em;}
.horses #thumb_list li .hover_text .read_more{ display: inline-block; margin-top: 1em;font-size: .7em; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; line-height: 1;  }
.horses #thumb_list li .hover_text .read_more span{ position: relative; left: .2em; top: -.1em;}

/*

    Horse Detail

*/

.horse_detail #header{ position: fixed; top: 0; left: 0; z-index: 1000; }

.horse_detail .a{ position: relative; float: left; margin-top: 10em; height: 100%; width: 20em; background: #008282; }
.horse_detail .b{ position: relative; float: left; margin-top: 10em; background: #323A3A;  }

.horse_detail .section{ width: 100%;  text-align: center; }
.horse_detail .section.info{ background: #323A3A; }
.horse_detail .section.photos{ background: #262D2D; }
.horse_detail .section.videos{ background: #323A3A; }
.horse_detail .section.related{ background: #262D2D; }

.horse_detail .inner{ margin: 0 auto; padding: 5em 0; width: 56em; color: #ffffff; text-align: left; }
.horse_detail .title_bar{ display: inline-block; position: relative; margin: 0 0 4em 0; padding: 0; border: .2em solid #ffffff; list-style: none; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box;  }
.horse_detail .title_bar li{ display: block; float: left; padding: 0 1em; height: 2em;  font-family: 'Brandon Grot W01 Bold',sans-serif; line-height: 2; text-transform: uppercase; }
.horse_detail .title_bar li.active{ background: #FFA000; }
.horse_detail .title_bar li.name{ background: #FFA000; border-left: .2em solid #ffffff; border-right: .2em solid #ffffff; }
.photos .title_bar li, .videos .title_bar li{ display: inline-block; padding: 0 1em; height: 2em; border-left: .2em solid #ffffff; border-right: none;  font-family: 'Brandon Grot W01 Bold',sans-serif; line-height: 2; text-transform: uppercase; cursor: pointer; }
.photos .title_bar li:first-child, .videos .title_bar li:first-child{ border-left: none; border-right: none; cursor: default; }

.horse_detail .title_bar .icon{ display: inline-block; margin-top: 0.5em; width: .75em; height: 1em;  }
.horse_detail .title_bar .icon.v{ background-position: -13em -1em; }
.horse_detail .title_bar .icon.m{ position: relative; left: 0.1em; top: 0.1em; width: 1em; background-position: -14em -1em;}

.horse_detail .submenu{ display: block; position: fixed; top: 15em; right: 0;  z-index: 100; margin: 0; padding: 0; width: 5em; list-style: none;  }
.horse_detail .submenu li{ display: block; height: 4em; background: #ffffff; color: #495656; font-size: .8em; font-family: 'Brandon Grot W01 Bold',sans-serif; line-height: 4; text-transform: uppercase; text-align: center; cursor: pointer;}
.horse_detail .submenu li:nth-child(even){ background: #F2F2F2; }
.horse_detail .submenu li.active{ background: #FFA000;color: #ffffff; }
.horse_detail .submenu li:hover{ background: #FFA000;color: #ffffff;  }

/* Horse Detail - Profile */
.profile{ position: relative; width: 100%;}
.profile_a{ position: relative; float: left; margin-right: 6em; width: 11em; min-height: 26em; }
.profile_b{ position: relative; float: left; width: 39em; }
.profile_pic{ position: relative; overflow: hidden; margin-bottom: 1em; width: 11em; height: 11em; background: #ffffff; border: 0.3em solid #ffffff; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }

.profile_submenu{ display: block; margin: 0; padding: 0; list-style: none; width: 5em; }
.profile .btn{ display: block; position: relative; padding: 0 1em; min-width: 12.222222222em; height: 3em; background: #ffffff; color: #323A3A; font-size: .9em; font-family: 'Brandon Grot W01 Bold',sans-serif; line-height: 3;  text-transform: uppercase; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
.profile .btn.cta { margin-top: 1em; background: #FFA000; color:#ffffff; }
/*.profile_submenu li:nth-child(2) .btn{ background: #F2F2F2; }*/
.profile .btn .arrow{ display: block; position: absolute; top: 1.2em; right: .5em; height: .5em; width: .7em; background-position: -16em -1em; }
.profile .btn.cta .arrow{ background-position: -16em -2em; }

.profile h1{ display: block; margin: 0 0 .5em 0; font-size: 1.5em; font-weight: normal; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; line-height: 1; }
.profile h1.sold span{ color: #FFA000; font-size: 0.75em; }

.profile table{ margin-bottom: 3em; width: 100%; }
.profile tr{ display: block; padding: .9em 0 .8em 0; border-bottom: 1px solid #5B6161; }
.profile td{ display: inline-block; margin-right: 1em; vertical-align: top;}
.profile td:nth-child(1){ width: 13em; font-size: .8em; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; line-height: 2; }
.profile td:nth-child(2){  line-height: 1.2; }
.profile td img{ display: block; float: left; position: relative; top: -6px; left: 0; margin-right: 16px; }

.btn_holder .btn{ float: left; margin-right: 1em;}

/* Horse Detail - Photos & Videos */
.slider_holder{ position: relative; width: 56em; height: 35em; }
.slider_holder ul{ position: relative; z-index: 10;overflow: hidden; margin: 0; padding: 0; height: 100%; list-style: none;  }
#photo_slider ul{ cursor: pointer; }
.slider_holder li{ position: absolute; overflow: hidden; width: 100%; height: 100%; }
.slider_holder .bg{ position: absolute; top:0; left: 0;  z-index: 0; width: 100%; height: 100%; background: url('../images/structure/slider_bg.jpg') }
.slider_holder li img{ position: absolute; top: 50%; left: 50%; }

.slider_holder .next { position: absolute; top: 0; right: -5em; z-index: 80; width: 5em; height: 100%; cursor: pointer; }
.slider_holder .previous{ position: absolute; top: 0; left: -5em; z-index: 80; width: 5em; height: 100%; cursor: pointer;  }
.slider_holder .btn { position: absolute; top: 50%; margin-top: -1.25em; width: 1.5em; height: 2.5em; }
.slider_holder .next .btn{ right: 0; background-position: -23em -1em; }
.slider_holder .previous .btn { left: 0; background-position: -21em -1em; }

/*.slider_holder li .loader{ position: absolute; top: 50%; left: 50%; margin-left: -12px; margin-top: -12px; width: 24px; height: 24px; background: url('/public/images/structure/ajax-loader.gif'); }*/

.slider_details{ position: relative; width: 100%; height: 3em; background: #ffffff; color: #495656; font-family: 'Brandon Grot W01 Bold',sans-serif; text-transform: uppercase; line-height: 3;  }
.slider_details .name{ display: inline; margin-left: 2em; font-size: .8em;  }
.slider_details .cta{ display: inline; position: absolute; top: .4em; right: 2em; font-size: .8em; }
.slider_details .arrow{ display: inline-block; position: relative; top: .3em; left: 0; margin: 0 .5em; height: 1em; width: .7em; background-position: -16em -1em; }

/* Horse Detail - Related horses */
.related_horses{ margin: 0; padding: 0; list-style: none; }
.related_horses li{ float: left; margin-right: 3em; text-align: center; width: 10em; cursor: pointer; }
.related_horses li:last-child{ margin-right: 0; }
.related_horses .image{ display: block; position: relative; overflow: hidden; margin-bottom: 1em; width: 10em; height: 10em; border: 0.5em solid #ffffff; }
.related_horses .image .arrow{ display: block; position: absolute; left: 50%; bottom: -1.25em; margin-left: -.65em; width: 1.3em; height: .75em; background-position: -3em -4em; }
.related_horses .name{ display: block; margin-bottom: 0.2em; color: #ffffff; font-family: 'Brandon Grot W01 Bold',sans-serif; font-size: 1.1em; }
.related_horses .pedigree{ display: block; font-family: 'BrandonGrotW01-Regular',sans-serif; font-size: .7em; text-transform: uppercase; }

/*

   References

*/

/* References - aside */
.references .aside .years{ display: none;}
.references .aside .horse_list{ width: 100%;  }
.references .aside .border{ display: none; }

/*

    Sitemap

*/
#sitemap{ margin: 0; padding: 0; line-height: 2; list-style: none; }
#sitemap a{ color: #ffffff;  }
#sitemap a:hover{ text-decoration: underline; }

/************************************** Start Media queries **************************************/

@media all and (max-width: 1280px){
    body{ font-size: 13px; }

    /* Horse detail - Photos & videos */
    .slider_holder .next { display: none; }
    .slider_holder .previous{ display: none; }
}
@media all and (min-width: 1281px) {
    body{ font-size: 14px; }
}
@media all and (min-width: 1536px) {
    body{ font-size: 15px; }
}
@media all and (max-width: 1536px) {
    /* Global */
    .article{ padding: 2em; }
    .article h1{ font-size: 1.5em;  }

    /* Home */
    .horseshoe{ display: none; }

}
@media all and (min-width: 1792px){
    body{ font-size: 16px; }
}
@media all and (min-width: 2048px){
    body{ font-size: 17px; }
}
@media all and (min-width: 2304px){
    body{ font-size: 18px; }
}

/************************************** View 2 **************************************/

/* Middle Screens, iPhone 4 landscape */
@media all and (max-aspect-ratio: 4/3)  and (max-width: 1280px), only screen and (max-device-width: 480px)
{
    #view{ width: 2px;}

    body{ font-size: 18px; }

    /* Global - Header */
    #header{ height: auto; }
    #header .logo_holder{ width: 100%; height: auto; float: none; text-align: center; }
    #header .nav{ width: 100%; height: auto; float: none; background: #efefef; font-size: 0.8em;  }
    #header .logo{ display: inline-block; margin: 1em 0; width: 8em; height: auto; }
    #header .menu{ margin: 0 auto; padding: 0 2em; list-style: none; line-height: 3em; text-align: center; }
    #header .menu li{ display: inline-block; float: none; margin-right: 2em; }
    #header .menu li.active .line{ bottom: 0; height: 0.3em; }

    /* Global - Article */
    .article{ padding: 2em; }
    .article h1{ font-size: 2em;  }

    /* Global - Footer */
    #footer{ position: relative; text-align: left; }
    #footer ul{ padding-left: 2em;}
    #footer ul li{ margin-right: 1.5em;}

    /* Home - Responsive Containers */
    .home .ab, .news .ab{ float: left; width: 100%; height: auto;}
    .home .a, .news .a{ float: left; width: 50%; height: auto;}
    .home .b, .news .b{ float: left; width: 50%; height: auto; } /* Height with javascript */
    .home .c, .news .c{ float: left; width: 100%; height: auto; }

    /* Home - Article */
    .horseshoe{ display: none;}
    .home .cta{ position: relative; padding: 2em; }

    /* Home - News */
    .home .image_holder .text, .news .image_holder .text{ margin-left: -35%; width: 70%; }
    .home .image_holder .title, .news .image_holder .title{ font-size: 2em; }

    /* Home - Links */
    .home .side_menu{  height: auto; }
    .home .side_menu li{ height: 4em;}

    /* News */
    .news .news_holder .icon{ display: none; }


        /* Keystud & Contact - Responsive containers */
    .basic .a{ width: 100%; }
    .keystud .b{ width: 100%; }
    .contact .b,.contact .c{ width: 50%; }

    /* Keystud & Contact - Article */
    .basic .article{ float: left; width: 50%; }
    .basic .bottom_menu{ float: left; width: 50%; }
    .basic .bottom_menu li{ height: 33.333333% }

    /* Horses */
    .horses #thumb_list .streamer{ font-size: 1.6em;  }

    /* Horse Detail */
    .related_horses li:nth-child(3) { clear: both; }

    .horse_detail .a{ display: none;}
    .horse_detail .b{ width: 100%; margin-top: 10em}

    .horse_detail .inner{ width: 70%; }

    .profile_a{ float: none; min-height: 12em; height: auto; width: 100%;}
    .profile_b{ float: none; width: 100%; }
    .profile_pic{ float: left; margin-right: 2em; }
    .profile_submenu{ float: left; }
    .profile_b p{ width: 100%;}
    .profile_b table{ width: 100%;}
    .profile_b td{ display: block; float: none}

    .slider_holder{ width: 100%; }

    .horse_detail .title_bar{ font-size: .7em; }
}

@media all and (max-width: 680px) and (max-aspect-ratio: 4/3){
    body{ font-size: 16px; }
}
/* Main menu two lines  */
@media all and (max-width: 780px) and (max-aspect-ratio: 4/3){
    #header .menu li.line_break{ display: block; }
    #header .menu{ margin: 0 auto; padding: 0.5em 2em; list-style: none; line-height: 2em; text-align: center; }

    .horse_detail .b{ width: 100%; margin-top: 11.8em !important}
}
@media all and (max-width: 1024px) and (max-aspect-ratio: 4/3){
    body{ font-size: 17px; }
}


/************************************** View 3 **************************************/

/* Small Screens, iPhone 4, iPhone 5 */
@media all and (max-width: 768px),
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) ,
only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait)
{
    #view{ width: 3px;}
    body{ font-size: 18px; }

    /* Global - Header */
    #header .menu li.active .line{ display:none; }
    .flags{ position: absolute; right: 1em; top: 8em; }

    /* Global - Article */
    .article h1{ font-size: 2em; }

    /* Aside */
    #aside{ height: auto; }


    /* Global Footer */
    #footer{ position: relative; height: 6em; text-align: left; }
    #footer ul{ padding-left: 2em;}
    #footer ul li{ margin-right: 1em;}
    #komma_link{ right: auto; left: 2em; bottom: 1.5em;}

    /* Home - Responsive containers */
    .home .a,.news .a{ float: left; width: 100%; height: auto;}
    .home .b,.news .a{ float: left; width: 100%; height: auto; }

    /* Home - Article */
    .home .cta{ position: relative; background: #FFAA00; }

    /* Home - News */
    .home .image_holder .hover,.news .image_holder .hover{ text-align: center; }
    .home .image_holder .text,.news .image_holder .text{ position: relative; display: inline-block; top: 0; left: 0; margin: 0; padding: 2em; }
    .home .image_holder .title,.news .image_holder .title{ font-size: 1.5em; }

    /* Home - Links */
    .home .side_menu li{ height: 3em;}
    .home .side_menu li .inner{ display: block; position: relative; top: 0; left: 0; margin-top: 0; width: 100%; height: auto; line-height: 3; text-align: center;  }
    .home .side_menu .sprite{ display: none; }

    /* News */
    .news .b{ width: 100%;}
    .news .c{ display: none; }

    /* Keystud & Contact - Responsive containers */
    .basic .a{ width: 100%; height: auto;  }
    .keystud .b{ width: 100%; }
    .contact .b,.contact .c{ width: 100%; }

    /* Keystud & Contact - Article */
    .basic .article{ float: none; width: 100%; }
    .basic .bottom_menu{ float: none; width: 100%; }
    .basic .bottom_menu li{ height: 3em; }

    /* Horses */
    .horses .a{ width: 100%; height: auto;  }
    .horses .b{ display: none; }

    /* Horse Detail */
    .horse_detail .a{ display: none; }
    .horse_detail .b{ width: 100%; margin-top: 10em}


    .related_horses li:nth-child(3) { clear: both; }

    .horse_detail .inner{ width: 90%; padding: 2em 0; }
    .horse_detail .submenu{ display: none;}
    .profile_a{ float: none; min-height: 12em; height: auto; width: 100%;}
    .profile_b{ float: none; width: 100%; }
    .profile_pic{ float: left; margin-right: 2em; }
    .profile_submenu{ float: left; }
    .profile_b p{ width: 100%;}
    .profile_b table{ width: 100%;}
    .profile_b td{ display: block; float: none}

    .slider_details{ font-size: .8em; }
    .slider_holder{ width: 100%; }

    .horse_detail .title_bar{ font-size: .7em; }

}
@media all and (max-width: 768px) and (min-width: 541px)
{
    /* Global - Article */
    .article{ padding: 4em; }

    /* Home - Article */
    .home .cta{ padding: 4em;  }
    .horseshoe{ display: block;}
}
@media all and (max-width: 540px){
    /* Global - Article */
    .article{ padding: 2em; }

    /* Home - Article */
    .horseshoe{ display: none;}
    .home .cta{ padding: 2em;  }
}
@media all and (max-width: 335px){
    body{ width: 320px;}
}

@media all and (max-width: 400px) and (min-width: 361px){
    body{ font-size: 16px; }
}
@media all and (max-width: 360px){
    body{ font-size: 14px; }
    .horses .a{ width: 100%;  }
    .horses .b{ display: none; }
}


/************************************** Touch device **************************************/

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Home - News */
    .home .image_holder .hover .bg,.news .image_holder .hover .bg{ opacity: 1; }
    .home .image_holder .icon,.news .image_holder .icon{ opacity: 1; }
    .home .image_holder .posted,.news .image_holder .posted{ opacity: 1;}
    .home .image_holder .date,.news .image_holder .date{ opacity: 1;}
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
    /* Home - News */
    .home .image_holder .hover .bg,.news .image_holder .hover .bg{ opacity: 1; }
    .home .image_holder .icon,.news .image_holder .icon{ opacity: 1; }
    .home .image_holder .posted,.news .image_holder .posted{ opacity: 1;}
    .home .image_holder .date,.news .image_holder .date{ opacity: 1;}
}

/* iPhone 4, iPhone 5 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) ,
only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait)
{
    body{ font-size: 58px;}

}