/*
Theme Name: Materia premium landing page
Theme URI: http://www.ansonika.com/materia/
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. CONTENT
3. MISC
4. MEDIA QUERIES

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

/* #General
================================================ */
#main-container{ background-color:#fff; }
article{ background-color:#fff; -moz-box-shadow: 0 0 5px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4); box-shadow: 0 0 5px rgba(0,0,0,.4);}
#slidecaption { height:215px; padding-top:400px; text-align:center }
#slidecaption h3, #slidecaption span { color:#fff; letter-spacing:-1px;}
#slidecaption h3 {font-size:80px; background-color:#000; display: inline; padding:0 10px;font-family: 'MyriadProLightBold'; letter-spacing:-5px;}
#slidecaption span{ font-size:30px; background-color:#000; display: inline-block; padding: 10px; margin-top:25px;  font-family: 'MyriadWebProRegular'; }

/* #Site Header
================================================ */
header{background: url(../img/header_bg.png) repeat-x 0 0; height:64px; width:100%;position:fixed; left:0; top:0; z-index:999; }
#logo{ text-align:center}

/* #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. CONTENT */
/*============================================================================================*/
h1{ color:#fff; font-size:34px; background:#000; display:inline-block; padding:15px 15px 15px; float:right; margin: 0 10px 10px 0; font-family: 'MyriadWebProRegular';}
h1 em { font-size:24px;}

article.block a{ font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:14px; }

.price {color:#8dc63f; font-size:30px; display:block; margin-top:10px; font-weight:700; letter-spacing:-2px; margin-bottom:3px;}
.price em {font-size:15px; font-style:normal;}
.timer_box { padding:8px 10px 3px 30px; background: url(../img/clock.png) no-repeat left top; font-weight:bold; margin-bottom:0px; color:#00aeef;}
#countbox1, #countbox2, #countbox3 {color:#555; font-weight:700; display:block; margin-bottom:25px;}

/* #Blocks*/
.block {background:#fff; border-top: 3px solid #222;}
.block h2{ font-size:28px; font-weight:500; }


/*============================================================================================*/
/* 3. MISC */
/*============================================================================================*/
article.banner{ background:none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
article.banner img{ margin-bottom:-5px; -moz-box-shadow: 0 0 5px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4); box-shadow: 0 0 5px rgba(0,0,0,.4);}

.arrow_big{ position:absolute; top:200px; text-align:center; width:100%;}

/* 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;}
#shadow{background:url(../img/shadow_1.png) repeat-x  left bottom; position:fixed; left:0; top:0; z-index:-100; height:100%; width:100%;}

/* list */
ul.listdata { margin-bottom:20px;}
ul.listdata li {display: inline-block;border-bottom: 1px dotted #ccc;padding-bottom:5px;width:100%;}
ul.listdata li span {float:left; width:40%; font-weight:700}
ul.listdata li em {float:left; font-style:normal; width:60%; text-align:right;}
ul.listdata li div ul { float:right; text-align:right }
ul.listdata li div ul li {border-bottom: none; }

.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}

.sixteen_wp{ padding:0 60px;}

ul.info_2 li#tel{background:url(../img/mobile.png) no-repeat left center;padding-left:25px;}
ul.info_2 li#fax{background:url(../img/fax.png) no-repeat left center;padding-left:25px;}
ul.info_2 li#mail{background:url(../img/envelope.png) no-repeat left center;padding-left:25px;}

/* social*/
ul#follow{ padding-top:30px; padding-bottom:30px }
ul#follow li{float:left;margin-right:10px; margin-bottom:10px}
ul#follow li a{display:block;height:36px;text-indent:-9999px;width:37px;}
ul#follow li a#tw{background:url(../img/sprite_social.png) no-repeat 0 0;}
ul#follow li a:hover#tw{background:url(../img/sprite_social.png) no-repeat 0 -42px;}
ul#follow li a#rss{background:url(../img/sprite_social.png) no-repeat -47px 0;}
ul#follow li a:hover#rss{background:url(../img/sprite_social.png) no-repeat -47px -42px;}
ul#follow li a#vimeo{background:url(../img/sprite_social.png) no-repeat -94px 0;}
ul#follow li a:hover#vimeo{background:url(../img/sprite_social.png) no-repeat -94px -42px;}
ul#follow li a#fb{background:url(../img/sprite_social.png) no-repeat -141px 0;}
ul#follow li a:hover#fb{background:url(../img/sprite_social.png) no-repeat -141px -42px;}

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

/* #Tablet (Portrait) Note: Design for a width of 768px
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {

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

#newsletter-modal .wrapper.extra{ margin:30px;}

.arrow_big{ top:450px; }


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


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

header{background: url(../img/header_bg.png) repeat-x 0 0; height:30px; width:100%;position:relative; padding:0;}

#slidecaption { padding-top:160px; height:145px;}
#slidecaption h3 {font-size:34px; background-color:#000; display: inline; padding:0 10px; letter-spacing:-1px; }
#slidecaption span{ font-size:20px; background-color:#000; display: inline-block; padding: 5px; margin-top:7px;  }

h1{ color:#fff; font-size:24px; background:#000; display:inline-block; padding:15px; margin-bottom:10px; text-align:right; width:270px; margin-right:0; text-align:center}

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

#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;}
.columns.line{ background:none }
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;}
.arrow_big{ display:none}

header{background: url(../img/header_bg.png) repeat-x 0 0; height:44px; width:100%;position:relative; padding:0;}

#slidecaption { padding-top:60px; height:100px;}
#slidecaption h3 { font-size:30px; background-color:#000; display: inline; padding:0 10px; letter-spacing:-1px;}
#slidecaption span{ font-size:20px; background-color:#000; display: inline-block; padding: 5px; margin-top:8px;  }

h1{ color:#fff; font-size:22px; background:#000; display:inline-block; float:right; margin-bottom:10px; margin-right:0;}

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;}

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

.copy{ margin:20px 0; text-align:center;}

}