/*
Theme Name: Responsive Olimpia Fitness Center 
Theme URI: http://www.ansonika.com/olimpia/
Description: Hotel Paradise is created by <a href="http://www.ansonika.com">Ansonika</a>.
Version: 1.0.0
Author: Ansonika
Author URI: http://themeforest.net/user/Ansonika/

CSS STRUCTURE:

1. SITE STRUCTURE
2.  PAGES AND CONTENT
3. MISC
4. MEDIA QUERIES

/*============================================================================================*/
/* 1. SITE STRUCTURE */
/*============================================================================================*/

/* #General
================================================ */
#main-container{ background-color:#000; }

#main-nav{ position:fixed; top:63px; z-index:99;}
#main-nav ul { margin-left:-1px}
#main-nav ul li{float:left; margin-left:1px;}
#main-nav ul li a{ display:block; height:25px; width: 139px;  text-decoration:none;  color:#111; font-size:18px; font-weight:500; text-shadow: 0 -1px 0 rgba(255,255,255,0.9); text-transform:lowercase; padding:15px 10px  20px 10px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out;   }
#main-nav ul li a em{ display:block; font-size:12px; font-weight:normal;  margin-top:0px; }

#main-nav ul li a#one{background:#ffcc00 url(../img/icon-1-small.png) no-repeat 95% center ;}
#main-nav ul li a#one:hover, #main-nav ul li a#one.selected{background:#6dcff6 url(../img/icon-1-small.png) no-repeat 95% center ;}
#main-nav ul li a#two{background:#ffcc00 url(../img/icon-2-small.png) no-repeat 95% center;}
#main-nav ul li a#two:hover, #main-nav ul li a#two.selected{background:#6dcff6 url(../img/icon-2-small.png) no-repeat 95% center;}
#main-nav ul li a#three{background:#ffcc00 url(../img/icon-3-small.png) no-repeat 95% center;}
#main-nav ul li a#three:hover, #main-nav ul li a#three.selected{background:#6dcff6 url(../img/icon-3-small.png) no-repeat 95% center;}
#main-nav ul li a#four{background:#ffcc00 url(../img/icon-4-small.png) no-repeat 95% center}
#main-nav ul li a#four:hover, #main-nav ul li a#four.selected{background:#6dcff6 url(../img/icon-4-small.png) no-repeat 95% center;}
#main-nav ul li a#five{background:#ffcc00 url(../img/icon-5-small.png) no-repeat 95% center;}
#main-nav ul li a#five:hover, #main-nav ul li a#five.selected{background:#6dcff6 url(../img/icon-5-small.png) no-repeat 95% center;}
#main-nav ul li a#six{background:#ffcc00 url(../img/icon-6-small.png) no-repeat 95% center;}
#main-nav ul li a#six:hover, #main-nav ul li a#six.selected{background:#6dcff6 url(../img/icon-6-small.png) no-repeat 95% center;}

article{ background-color:#000;}
a.trigger{display:none;} /* #Menu button responsive */
#slidecaption { height:215px; padding-top:400px; }
#slidecaption h3, #slidecaption span { color:#fff; letter-spacing:-1px;}
#slidecaption h3 { text-transform:uppercase; font-size:62px; background-color:#000; display: inline; padding:0 10px; font-family: 'GothamCondensedBold'; }
#slidecaption span{ font-size:30px; background-color:#000; display: inline-block; padding: 10px; margin-top:12px; font-family: 'GothamCondensedMedium';  }

/* #Site Header
================================================ */
header{background: url(../img/header_bg.png) repeat-x 0 0; height:44px; width:100%;position:fixed; left:0; top:0; z-index:999; padding-top:25px; }
#logo a{text-decoration:none; color:#fff; font-size:34px; padding-top:15px;  font-family: 'GothamCondensedBold'; text-transform:uppercase; text-shadow: 0  2px 2px rgba(000,000,000,0.9); }
.ie7 #logo a{text-decoration:none; color:#fff; font-size:34px; padding-top:5px;  font-family: 'GothamCondensedBold'; text-transform:uppercase; text-shadow: 0  2px 2px rgba(000,000,000,0.9); display:block; margin-bottom:10px}
#logo a span {color:#ffcf00}
#top-nav ul{ float:right; font-size:11px; text-transform:uppercase; font-weight:600; margin-top:10px; height:12px; margin-right:-10px}
#top-nav ul a{ color:#7d7d7d; text-decoration:none;}
#top-nav ul a:hover{ color:#fff;}
#top-nav ul li{ background:url(../img/menu_footer_divider.png) left center no-repeat; float:left; padding-left:10px; margin-right:10px }
#top-nav ul li:first-child{ background:none;}

/* #Site Footer
================================================ */
footer{ margin:20px 0; border-top: 1px solid #333; padding-top:10px; font-size:11px; padding-bottom:20px;}
#nav-footer a{ color:#d1d1d1; text-decoration:none;}
#nav-footer a:hover{ color:#fff;}
ul#nav-footer li{ background:url(../img/menu_footer_divider.png) left center no-repeat; float:left; margin-right:10px; padding-left:10px;}
ul#nav-footer li:first-child{ background:none; padding-left:0;}
.copy{ text-align:right;}

/*============================================================================================*/
/* 2. PAGES AND CONTENT */
/*============================================================================================*/
h1{ color:#111; font-size:34px; background:url(../img/yellow-bg-70.png) repeat; display:inline-block; padding:15px 15px 15px 50px; float:right; margin: 0 10px 10px 0;}
h1 em { font-size:24px;}

#home #slidecaption { padding-top:0;}

/* #Explore */
ul.extra-links { margin-top:20px; margin-left:10px;}
.extra-links li { float:left; margin:0 20px 20px 0;  line-height:27px; }
.extra-links li a { height:27px; display:block; text-decoration:none; }
.extra-links li a.time { background: url(../img/icon-4-small.png) no-repeat left center;  padding-left:35px; }
.extra-links li a.gallery { background: url(../img/gallery.png) no-repeat left center; padding-left:40px;  }
.extra-links li a.join { background:  url(../img/icon-3-small.png) no-repeat left center; padding-left:33px;  }

#explore-content article h3{ color:#fff; font-size:24px; }
#explore-content article h3 em{ font-size:16px; font-style:normal;}

#about-content article.numbers a, #join-content article.plan a{ font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; }

/* #About */
.number { color:#fff; font-weight:700; font-size:46px; text-align:center; height:40px; background:url(../img/bg-number.png) no-repeat center top; padding-top:28px; margin-bottom:20px;}
#about-content article.numbers{ text-align:center; }
#about-content article.numbers h2 em{ margin-top:5px; font-size:16px; color:#ccc;}

#highlight  h2 { font-size:36px; color:#000;}
#highlight  p { font-size:20px;}
#highlight{ background:#ffcc00 url(../img/option.png) no-repeat center center;}
#highlight .eight {text-align:center; padding:50px 0 25px 0;  color:#111; font-family: 'GothamCondensedMedium'; text-shadow: 0 1px 0 rgba(255,255,255,0.9); }

/* #Join*/
.msg { background:#ffcc00 url(../img/bg-join.png) no-repeat right bottom; color:#000; font-size:18px; line-height:24px; height:695px;text-shadow: 0 -1px 0 rgba(255,255,255,0.9); }
.msg h2 { font-size:28px; color:#111; margin-bottom:30px; font-weight:600; line-height:30px;}
.badge{ text-align:center; margin-top:50px;}
.plan {background:#000 url(../img/pattern.png) repeat}

.plan {background:#000 url(../img/pattern.png) repeat; border-top:3px solid #ffcc00;}
.plan h2{ font-size:28px; color:#ffcc00; font-weight:500; }
.plan h2 em{ font-size:18px; color:#fff; display:block; margin-top:7px}

/* #Plans*/
.plan-stick { margin-bottom:15px;}

/*============================================================================================*/
/* 3. MISC */
/*============================================================================================*/
/*	Reveal Modals */
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,.6); z-index: 100; display: none; top: 0; left: 0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  filter: alpha(opacity=60);}
.reveal-modal {visibility: hidden; top: 160px;  left: 50%; width: 820px; margin-left: -410px; background: #ededed url(../img/pattern_2.jpg) repeat; position: absolute;z-index: 101;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);-box-shadow: 0 0 10px rgba(0,0,0,.4);}
.reveal-modal label { color:#222;}
.reveal-modal hr{ border:solid #dddddd; border-width:1px 0 0; clear:both; height:0; margin:30px 0 30px;}
.reveal-modal .close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa;text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold;cursor: pointer;} 
/* NOTES Close button entity is &#215; */

/* #Newsltetter modal*/
.msg-modal { background:#ffcc00 url(../img/bg-modal.png) no-repeat right bottom; color:#000; font-size:18px; line-height:24px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; height:390px; text-shadow: 0 -1px 0 rgba(255,255,255,0.9); }
.msg-modal h2 { font-size:24px; margin-bottom:15px; color:#000; font-weight:600}
#message-newsletter, #message-join, #message-contact { margin: 10px 0; padding: 0;}

/* list bullets*/
ul.list_3, ul.list_4, ul.list_5, ul.list_6 { margin-left:10px; margin-bottom:20px;}
ul.list_3 li{background:url(../img/tick_1.png) no-repeat left 3px;line-height:18px;padding-left:20px;}
ul.list_4 li{background:url(../img/arrow_2.png) no-repeat 3px 5px;line-height:18px;padding-left:20px;}
ul.list_5 li{background:url(../img/arrow_3.png) no-repeat 5px 7px;line-height:18px;padding-left:20px;}
ul.list_6 li{background:url(../img/arrow_4.png) no-repeat 4px 6px;line-height:18px;padding-left:20px;}

.line{background: url(../img/line.png) repeat-y 20px top;}
.wrapper{ margin:25px;}
.wrapper.extra{ margin:60px;}
.map_canvas{height:750px;width:100%; }
.add-top-news{ margin-top:50px;}
#shadow{background:url(../img/shadow_1.png) repeat-x  left bottom; position:fixed; left:0; top:0; z-index:-100; height:100%; width:100%;}

/* opening hours */
ul.timetable { margin-bottom:20px;}
ul.timetable li {display: inline-block;border-bottom: 1px dotted #222;padding-bottom:5px;width:100%;}
ul.timetable li span {float:left; width:40%;color:#a0cfe2;}
ul.timetable li em {float:left; font-style:normal; width:60%; text-align:right;}

/* bars */
ul.bars { margin-bottom:20px;}
.bars li {overflow:hidden; margin:0; padding:0;width:100%}
ul.bars li span {float:left; width:40%;margin:0; padding:0; color:#a0cfe2; font-weight:600; }
ul.bars  li em {float:left;width:60%; height:9px; background:#333; margin-top:3px;text-indent:-9999px; }

ul.bars  li em span {background: #ff8a03 url(../img/bar.png) repeat-x  left -3px;  height:9px; }
ul.bars  li span.full {width:100%;}
ul.bars  li em span.high {width:75%;}
ul.bars  li em span.medium {width:50%;}
ul.bars  li em span.low {width:25%;}

.pic-trainer {float:right; margin: 0 0 5px 5px; border:2px solid #333;}
.magnify{ background:url(../img/zoom_1.png) no-repeat 55% 52%; display:none; height:92%; left:0; position:absolute; top:0; width:100%; z-index:999;}
.pictures div{ position:relative}

/*============================================================================================*/
/* 4. MEDIA QUERIES */
/*============================================================================================*/

/* #Tablet (Portrait) Note: Design for a width of 768px
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
#home-nav ul li a{ display:block; height:32px; width: 182px;  text-decoration:none;  color:#111; font-size:24px; font-weight:500; text-shadow: 0 -1px 0 rgba(255,255,255,.9); text-transform:lowercase; padding:25px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out;  }
#home-nav ul li a em{ display:block; font-size:14px; font-weight:normal;  margin-top:4px; }

a.trigger{position: fixed;text-decoration: none;top: 15px; right: 10px;background: url(../img/trigger.png) no-repeat;display: block;z-index:1300; width:20px; height:20px;}
a.active.trigger {background: url(../img/trigger-close.png) no-repeat;}

#main-nav{display:none;  position:relative; top:60px;position:fixed;}
#main-nav ul{ margin-top:0;  display:block;}
#main-nav ul li{margin-bottom:1px;}
#main-nav ul li a{ display:block; height:25px; width: 235px;  text-decoration:none;  color:#111; font-size:18px; font-weight:500; text-shadow: 0 -1px 0 rgba(255,255,255,0.9); text-transform:lowercase; padding:15px 10px  20px 10px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out;   }

#slidecaption { height:215px; padding-top:660px; }

.reveal-modal {visibility: hidden; top: 100px;  left: 50%; width: 660px; margin-left: -330px; }
#newsletter-modal .wrapper.extra{ margin:30px;}

#highlight  h2 { font-size:30px; }
#highlight  p { font-size:16px;}

}
/*  #Mobile (Portrait) Design for a width of 320px 
================================================== */


@media only screen and (max-width: 767px) {
	
.wrapper{ margin:15px;}

header{background: url(../img/header_bg_mobile.png) repeat-x 0 0; height:44px; width:100%;position:relative; left:0; top:0; z-index:999; padding-top:15px}
#logo a{text-decoration:none; color:#fff; font-size:24px; padding-top:15px;  font-family: 'GothamCondensedMedium'; text-transform:uppercase; text-shadow: 0  2px 2px rgba(000,000,000,0.9); }		

a.trigger{position: absolute;text-decoration: none;top: 0px; right: 0;background: url(../img/trigger.png) no-repeat;display: block;z-index:1300; width:20px; height:20px;}
a.active.trigger {background:#18181a  url(../img/minus.png) 85% 55% no-repeat;}

#main-nav{display:none; background:#ffcc00; position:relative; top:0px; margin-top:12px;  }
#main-nav ul{ margin-top:0; position:relative; display:block;}
#main-nav ul li{float:none; margin:0; border-bottom:1px solid #fff; margin-left:1px;  }
#main-nav ul li a{ display:block; height:25px; width: 280px;  text-decoration:none;  color:#111; font-size:18px; font-weight:500; text-shadow: 0 -1px 0 rgba(255,255,255,0.9); text-transform:lowercase; padding:15px 10px  20px 10px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out; }

.container .twelve.columns#top-nav{ background:url(../img/bg-black-80.png) repeat; padding:3px 0 8px 0; width:300px}
#top-nav ul{float:right; font-size:11px; text-transform:uppercase; font-weight: 600; margin-right:5px;}

#slidecaption { padding-top:160px; height:145px;}
#slidecaption h3 { text-transform:uppercase; font-size:34px; background-color:#000; display: inline; padding:0 10px; font-family: 'GothamCondensedBold'; }
#slidecaption span{ font-size:20px; background-color:#000; display: inline-block; padding: 5px; margin-top:7px; font-family: 'GothamCondensedMedium';  }

h1{ color:#111; font-size:24px; background:url(../img/yellow-bg-70.png) repeat; display:inline-block; padding:15px; margin-bottom:10px; text-align:right; width:270px; margin-right:0;}
h1 em { font-size:18px;}

#highlight{ background:#ffcc00 url(../img/option_2.png) no-repeat center center; }
#highlight .eight {text-align:center; padding:30px 0 30px 10px; }

ul#nav-footer{ text-align:center; }
ul#nav-footer li{ background:none;  float:none; margin-right:0; padding-left:0;}

.reveal-modal {visibility: hidden; top: 100px;  left: 50%; width: 300px; margin-left: -150px; position: absolute;z-index: 101;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);-box-shadow: 0 0 10px rgba(0,0,0,.4);}
.msg-modal { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px; border-top-left-radius: 5px;border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 0px;-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; height:140px; font-size:16px; line-height:18px;}
.msg .wrapper.extra { margin:30px;}
.msg {height:500px;font-size:16px;}
#newsletter-modal .wrapper.extra{ margin:20px 0;}
.msg-modal h2 { font-size:20px; margin-bottom:10px; }

.msg h2 { font-size:20px; line-height:22px; margin-bottom:20px; }

#shadow{background: url(../img/shadow-mobile.png) repeat-x  left bottom; position:fixed; left:0; top:0; z-index:-100; height:100%; width:100%;}
.remove-bottom { margin-bottom:20px !important;}
.map_canvas{height:300px;width:100%; }
.columns.line{ background:none }
.plan-stick { text-align:center;}
input[type="text"],input[type="password"],input[type="email"],textarea,select{ width:230px; }
input.verify_form {width: 30px; float:left; padding:8px; }
	
}

/* #Mobile (Landscape) Design for a width of 480px
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.wrapper{ margin:15px;}

header{background: url(../img/header_bg_mobile.png) repeat-x 0 0; height:34px; width:100%;position:relative;z-index:999; top:0; left:0; display:block;}
#logo a{text-decoration:none; color:#fff; font-size:24px; padding-top:15px;  font-family: 'GothamCondensedMedium'; text-transform:uppercase; text-shadow: 0  2px 2px rgba(000,000,000,0.9); }

a.trigger{position: absolute;text-decoration: none;top: 5px; right: 0;background: url(../img/trigger.png) no-repeat;display: block;z-index:1300; width:20px; height:20px;}
a.active.trigger {background:#18181a  url(../img/minus.png) 85% 55% no-repeat;}

#main-nav{display:none; position:relative; top:-12px; margin-right:0;}
#main-nav ul li{float:none; margin:0; border-bottom:1px solid #fff; margin-left:1px; }
#main-nav ul li a{ display:block; height:25px; width: 400px;  text-decoration:none;  color:#111; font-size:18px; font-weight:500; text-shadow: 0 -1px 0 rgba(255,255,255,0.9); text-transform:lowercase; padding:15px 10px  20px 10px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out;}

#slidecaption { padding-top:60px; height:100px;}
#slidecaption h3 { text-transform:uppercase; font-size:30px; background-color:#000; display: inline; padding:0 10px; font-family: 'GothamCondensedBold'; }
#slidecaption span{ font-size:20px; background-color:#000; display: inline-block; padding: 5px; margin-top:4px; font-family: 'GothamCondensedMedium';  }

.container .twelve.columns#top-nav{ width:200px; position:absolute; top:-10px; right:30px; background:none;}

h1{ color:#111; font-size:28px; background:url(../img/yellow-bg-70.png) repeat; display:inline-block; padding:15px; float:right; margin-bottom:10px; margin-right:0;}

#highlight{ background:#ffcc00 url(../img/option_2.png) no-repeat center center; }
#highlight .eight {text-align:center; padding:30px 0 35px 0; }

.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: rgba(00,00,000,0.8); z-index: 100; display: none; top: 0; left: 0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  filter: alpha(opacity=60);}
.reveal-modal {visibility: hidden; top: 70px;  left: 50%; width: 420px; margin-left: -210px;position: absolute;z-index: 101;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);-box-shadow: 0 0 10px rgba(0,0,0,.4); }
.msg-modal { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px; border-top-left-radius: 5px;border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 0px;-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; height:125px}
#newsletter-modal .wrapper.extra{ margin:20px 0 0 0;}
.msg {height:415px}
.msg .wrapper.extra { margin:30px;}

input[type="text"],input[type="password"],input[type="email"],textarea,select{ width:260px;}

.columns.line{ background:none }
#shadow{background: url(../img/shadow-mobile.png) repeat-x  left bottom; position:fixed; left:0; top:0; z-index:-100; height:100%; width:100%;}
.remove-bottom { margin-bottom:20px !important;}
#highlight .eight { margin-left:20px;}
.map_canvas{height:300px;width:100%; }
.plan-stick { text-align:center;}

input.verify_form {width: 30px; float:left; padding:8px; }

}