/* ===========================================================
 * Filename: style.css
 * Version: 0.1
 * Project: hotel-barbat.hr
 * Author: web360 
 * =========================================================== */

 /*---BASIC----*/
html{ font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif; height: 100%;}
body{ font-size: 12px; background: url('../images/backgrounds/honda_pozadina.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%;}

#wrapper { position: relative; min-height: 100vh;}
.container { width: 960px; margin: 0 auto; }

.pointer {cursor: pointer;}
.close {position: absolute; right: 2%; top: 5%; color: red;}
.close:before { content: "x";}
.inline { display: inline; }
.block { display: block; } 
.list_style-none { list-style: none;}

/*---BORDER - BORDER_RADIUS---*/
.borderr2 { border-radius: 2%;}
.borderr5 { border-radius: 5%;}
.borderr10 { border-radius: 10%;}
.borderr15 { border-radius: 15%;}
.borderr20 { border-radius: 20%;}
.borderr25 { border-radius: 25%;}
.borderr50 { border-radius: 50%;}
.border_radius-top2 { border-radius: 2% 2% 0 0;}
.border_radius-top5 { border-radius: 5% 5% 0 0;}
.border_radius-top10 { border-radius: 10% 10% 0 0;}
.border_radius-top15 { border-radius: 15% 15% 0 0;}
.border_radius-top20 { border-radius: 20% 20% 0 0;}
.border_radius-top25 { border-radius: 25% 25% 0 0;}
.border_radius-bottom2 { border-radius: 0 0 2% 2%;}
.border_radius-bottom5 { border-radius: 0 0 5% 5%;}
.border_radius-bottom10 { border-radius: 0 0 10% 10%;}
.border_radius-bottom15 { border-radius: 0 0 15% 15%;}
.border_radius-bottom20 { border-radius: 0 0 20% 20%;}
.border_radius-bottom25 { border-radius: 0 0 25% 25%;}

.borderr10px { border-radius: 10px;}
.borderr15px { border-radius: 15px;}
.borderr20px { border-radius: 20px;}
.borderr25px { border-radius: 25px;}
.borderr30px { border-radius: 30px;}
.borderr35px { border-radius: 35px;}
.borderr40px { border-radius: 40px;}
.borderr45px { border-radius: 45px;}
.borderr50px { border-radius: 50px;}
.border_radius-top10px { border-radius: 10px 10px 0 0;}
.border_radius-top15px { border-radius: 15px 15px 0 0;}
.border_radius-top20px { border-radius: 20px 20px 0 0;}
.border_radius-top25px { border-radius: 25px 25px 0 0;}
.border_radius-top30px { border-radius: 30px 30px 0 0;}
.border_radius-top35px { border-radius: 35px 35px 0 0;}
.border_radius-top40px { border-radius: 40px 40px 0 0;}
.border_radius-top45px { border-radius: 45px 45px 0 0;}
.border_radius-top50px { border-radius: 50px 50px 0 0;}
.border_radius-bottom10px { border-radius: 0 0 10px 10px;}
.border_radius-bottom15px { border-radius: 0 0 15px 15px;}
.border_radius-bottom20px { border-radius: 0 0 20px 20px;}
.border_radius-bottom25px { border-radius: 0 0 25px 25px;}
.border_radius-bottom30px { border-radius: 0 0 30px 30px;}
.border_radius-bottom35px { border-radius: 0 0 35px 35px;}
.border_radius-bottom40px { border-radius: 0 0 40px 40px;}
.border_radius-bottom45px { border-radius: 0 0 45px 45px;}
.border_radius-bottom50px { border-radius: 0 0 50px 50px;}

.border-white { border: 1px solid white; }

/*---POSITION---*/
.relative { position: relative;}
.absolute { position: absolute;}
.fixed { position: fixed;}


/*---ALIGN---*/
.fleft { float: left;}
.fright { float: right;}
.fcenter { float: inherit;}
.clear { clear: both;}
.clearfix:after { display: block; content: " "; clear: both;}

/*---TEXT ALIGN---*/
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.inherit{text-align: inherit;}


/*---PADDING---*/
.padding_bottom1{padding-bottom: 1%;}
.padding_bottom2{padding-bottom: 2%;}
.padding_bottom3{padding-bottom: 3%;}
.padding_bottom4{padding-bottom: 4%;}
.padding_bottom5{padding-bottom: 5%;}
.padding_bottom10{padding-bottom: 10%;}

.padding_bottom10px{padding-bottom: 10px;}
.padding_bottom15px{padding-bottom: 15px;}
.padding_bottom20px{padding-bottom: 20px;}
.padding_bottom25px{padding-bottom: 25px;}
.padding_bottom30px{padding-bottom: 30px;}
.padding_bottom35px{padding-bottom: 35px;}
.padding_bottom40px{padding-bottom: 40px;}
.padding_bottom45px{padding-bottom: 45px;}
.padding_bottom50px{padding-bottom: 50px;}
.padding_bottom55px{padding-bottom: 55px;}
.padding_bottom60px{padding-bottom: 60px;}
.padding_bottom65px{padding-bottom: 65px;}
.padding_bottom70px{padding-bottom: 70px;}
.padding_bottom75px{padding-bottom: 75px;}
.padding_bottom80px{padding-bottom: 80px;}
.padding_bottom85px{padding-bottom: 85px;}
.padding_bottom90px{padding-bottom: 90px;}
.padding_bottom95px{padding-bottom: 95px;}
.padding_bottom100px{padding-bottom: 100px;}

.padding_top1{padding-top: 1%;}
.padding_top2{padding-top: 2%;}
.padding_top3{padding-top: 3%;}
.padding_top4{padding-top: 4%;}
.padding_top5{padding-top: 5%;}
.padding_top10{padding-top: 10%;}

.padding_top10px{padding-top: 10px;}
.padding_top15px{padding-top: 15px;}
.padding_top20px{padding-top: 20px;}
.padding_top25px{padding-top: 25px;}
.padding_top30px{padding-top: 30px;}
.padding_top35px{padding-top: 35px;}
.padding_top40px{padding-top: 40px;}
.padding_top45px{padding-top: 45px;}
.padding_top50px{padding-top: 50px;}
.padding_top55px{padding-top: 55px;}
.padding_top60px{padding-top: 60px;}
.padding_top65px{padding-top: 65px;}
.padding_top70px{padding-top: 70px;}
.padding_top75px{padding-top: 75px;}
.padding_top80px{padding-top: 80px;}
.padding_top85px{padding-top: 85px;}
.padding_top90px{padding-top: 90px;}
.padding_top95px{padding-top: 95px;}
.padding_top100px{padding-top: 100px;}

.padding_left1{padding-left: 1%;}
.padding_left2{padding-left: 2%;}
.padding_left3{padding-left: 3%;}
.padding_left4{padding-left: 4%;}
.padding_left5{padding-left: 5%;}
.padding_left10{padding-left: 10%;}

.padding_left10px{padding-left: 10px;}
.padding_left15px{padding-left: 15px;}
.padding_left20px{padding-left: 20px;}
.padding_left25px{padding-left: 25px;}
.padding_left30px{padding-left: 30px;}
.padding_left35px{padding-left: 35px;}
.padding_left40px{padding-left: 40px;}
.padding_left45px{padding-left: 45px;}
.padding_left50px{padding-left: 50px;}
.padding_left55px{padding-left: 55px;}
.padding_left60px{padding-left: 60px;}
.padding_left65px{padding-left: 65px;}
.padding_left70px{padding-left: 70px;}
.padding_left75px{padding-left: 75px;}
.padding_left80px{padding-left: 80px;}
.padding_left85px{padding-left: 85px;}
.padding_left90px{padding-left: 90px;}
.padding_left95px{padding-left: 95px;}
.padding_left100px{padding-left: 100px;}

.padding_right1{padding-right: 1%;}
.padding_right2{padding-right: 2%;}
.padding_right3{padding-right: 3%;}
.padding_right4{padding-right: 4%;}
.padding_right5{padding-right: 5%;}
.padding_right10{padding-right: 10%;}

.padding_right10px{padding-right: 10px;}
.padding_right15px{padding-right: 15px;}
.padding_right20px{padding-right: 20px;}
.padding_right25px{padding-right: 25px;}
.padding_right30px{padding-right: 30px;}
.padding_right35px{padding-right: 35px;}
.padding_right40px{padding-right: 40px;}
.padding_right45px{padding-right: 45px;}
.padding_right50px{padding-right: 50px;}
.padding_right55px{padding-right: 55px;}
.padding_right60px{padding-right: 60px;}
.padding_right65px{padding-right: 65px;}
.padding_right70px{padding-right: 70px;}
.padding_right75px{padding-right: 75px;}
.padding_right80px{padding-right: 80px;}
.padding_right85px{padding-right: 85px;}
.padding_right90px{padding-right: 90px;}
.padding_right95px{padding-right: 95px;}
.padding_right100px{padding-right: 100px;}

.padding1 { padding: 1%;}
.padding2 { padding: 2%;}
.padding3 { padding: 3%;}
.padding4 { padding: 4%;}
.padding5 { padding: 5%;}
.padding6 { padding: 6%;}
.padding7 { padding: 7%;}
.padding8 { padding: 8%;}
.padding9 { padding: 9%;}
.padding10 { padding: 10%;}
.padding15 { padding: 15%;}
.padding20 { padding: 20%;}
.padding25 { padding: 15%;}
.padding30 { padding: 30%;}

.padding5px { padding: 5px;}
.padding10px { padding: 10px;}
.padding15px { padding: 15px;}
.padding20px { padding: 20px;}
.padding25px { padding: 25px;}
.padding30px { padding: 30px;}
.padding35px { padding: 35px;}
.padding40px { padding: 40px;}
.padding45px { padding: 45px;}
.padding50px { padding: 50px;}
.padding55px { padding: 55px;}
.padding60px { padding: 60px;}
.padding65px { padding: 65px;}
.padding70px { padding: 70px;}

/*---FONTS---*/
h1 { font-size: 2.5em;}
h2 { font-size: 2.1em;}
h3 { font-size: 1.9em;}
h4 { font-size: 1.6em;}
h5 { font-size: 1.3em;}

.font1em { font-size: 1em;}
.font12em { font-size: 1.2em;}
.font13em { font-size: 1.3em;}
.font14em { font-size: 1.4em;}
.font15em { font-size: 1.5em;}
.font16em { font-size: 1.6em;}
.font17em { font-size: 1.7em;}
.font18em { font-size: 1.8em;}
.font19em { font-size: 1.9em;}
.font2em { font-size: 2em;}
.font21em { font-size: 2.1em;}
.font22em { font-size: 2.2em;}
.font23em { font-size: 2.3em;}
.font24em { font-size: 2.4em;}
.font25em { font-size: 2.5em;}


.font9 { font-size: 9px;}
.font10 { font-size: 10px;}
.font11 { font-size: 11px;}
.font12 { font-size: 12px;}
.font13 { font-size: 13px;}
.font14 { font-size: 14px;}
.font16 { font-size: 16px;}
.font18 { font-size: 18px;}
.font20 { font-size: 20px;}
.font22 { font-size: 22px;}
.font24 { font-size: 24px;}
.font26 { font-size: 26px;}
.font28 { font-size: 28px;}
.font30 { font-size: 30px;}
.font32 { font-size: 32px;}
.font48 { font-size: 48px;}
.font72 { font-size: 72px;}

.bold { font-weight: bold;}
.italic { font-style: italic;}

.text_shadow5-white { text-shadow: 2px 2px 2px rgba(255,255,255, 0.7);}
.text_shadow5-black { text-shadow: 2px 2px 2px rgba(0,0,0, 0.7);}

.text_color-green { color: #C6CE55;}
.text_color-black { color: #000;}
.text_color-white { color: #fff;}
.text_color-blue { color: blue;}
.text_color-red { color: red;}
.text_color-orange { color: orange;}
.text_color-yellow { color: yellow;}
.text_color-silver { color: silver;}


.text_decoration-underline { text-decoration: underline;}

 /*---GRID---*/
.span_group{ float: left;  width: 100%; word-wrap: break-word; margin-bottom: 2%;}

.span_group > :last-child { padding-right: 0 !important; }
.span1 ,.span12, .span13, .span23, .span14, .span24, .span34, .span15, .span25, .span35, .span45 {float: left; padding-right: 2%; height: auto; }
.span1 { width: 100%; }
.span12 { width: 49%; }
.span13 { width: 32%; }
.span23 { width: 66%; }
.span14 { width: 23.5%; }
.span24 { width: 49%; }
.span34 { width: 74.5%; }
.span15 { width: 18.4%; }
.span25 { width: 38.8%; }
.span35 { width: 59.2%; }
.span45 { width: 79.6%; }
.span_padding { padding: 15px;}

.element1 { width: 10%;}
.element2 { width: 20%;}
.element3 { width: 30%;}
.element4 { width: 40%;}
.element5 { width: 50%;}
.element6 { width: 60%;}
.element7 { width: 70%;}
.element8 { width: 80%;}
.element9 { width: 90%;}
.element10 { width: 100%;}

/*---BACKGROUNDS COLORS---*/
.bg_color-white{background-color: white;}
.bg_color-black{background-color: black;}
.bg_color-red{background-color: red;}
.bg_color-orange{background-color: orange;}
.bg_color-green{background-color: green;}
.bg_color-yellow{background-color: yellow;}
.bg_color-blue{background-color: blue;}
.bg_color-silvert7 {background:none repeat scroll 0 0 rgba(51, 51, 51, 0.8);}
.bg_color-blackt { background-color: rgba( 0, 0, 0, 0.7);}

/*-----INPUT-----*/

.input1, .input2, .input3, .input4, .input5, .input6, .input7, .input8, .input9, .input10 {height: 30px; outline:none; border: none;} 
.input1 { width: 10%; }
.input2 { width: 20%; }
.input3 { width: 30%; }
.input4 { width: 40%; }
.input5 { width: 50%; }
.input6 { width: 60%; }
.input7 { width: 70%; }
.input8 { width: 80%; }
.input9 { width: 90%; }
.input10 { width: 100%; }

.text_indent5 { text-indent: 5px;}
.text_indent10 { text-indent: 10px;}
.text_indent15 { text-indent: 15px;}
.text_indent20 { text-indent: 20px;}
.text_indent25 { text-indent: 25px;}

.button-turquoise-green_sea { background-color: #1abc9c;}
.button-turquoise-green_sea:hover { background-color: #16a085;}

.button-emerald-nephritis { background-color: #2ecc71;}
.button-emerald-nephritis:hover { background-color: #27ae60;}

.button-peter_rivier-belize_hole { background-color: #3498db;}
.button-peter_rivier-belize_hole:hover { background-color: #2980b9;}

.button-amethyst-wisteria { background-color: #9b59b6;}
.button-amethyst-wisteria:hover { background-color: #8e44ad;}

.button-wet_apshalt-midnight_blue { background-color: #34495e;}
.button-wet_apshalt-midnight_blue:hover { background-color: #2c3e50;}

.button-sun_flower-orange { background-color: #f1c40f;}
.button-sun_flower-orange:hover { background-color: #f39c12;}

.button-carrot-pumpkin { background-color: #e67e22;}
.button-carrot-pumpkin:hover { background-color: #d35400;}

.button-alizarin-pomegranate { background-color: #e74c3c;}
.button-alizarin-pomegranate:hover { background-color: #c0392b;}

.button-clouds-silver { background-color: #ecf0f1;}
.button-clouds-silver:hover { background-color: #bdc3c7;}

.button-concrete-asbestos { background-color: #95a5a6;}
.button-concrete-asbestos:hover { background-color: #7f8c8d;}

/*---404 EROOR---*/
#error404 { position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 250px; text-align: center; padding: 20px 0 0 0;}


/*---ICON---*/
.icon_input {
    background-repeat: no-repeat;
    text-indent: 25%;
    background-size: 35px 100%  ;
    background-position: 0px 0px;
}

.icon10x10-right { float: right; width: 10px; height: 10px;}
.icon15x15-right { float: right; width: 15px; height: 15px;}
.icon20x20-right { float: right; width: 20px; height: 20px;}
.icon25x25-right { float: right; width: 25px; height: 25px;}
.icon30x30-right { float: right; width: 30px; height: 30px;}
.icon35x35-right { float: right; width: 35px; height: 35px;}
.icon40x40-right { float: right; width: 40px; height: 40px;}
.icon45x45-right { float: right; width: 45px; height: 45px;}
.icon50x50-right { float: right; width: 50px; height: 50px;}
.icon50x50-right { float: right; width: 50px; height: 50px;}
.icon50x50-right { float: right; width: 50px; height: 50px;}


.icon10x10-left { float: left; width: 10px; height: 10px;}
.icon15x15-left { float: left; width: 15px; height: 15px;}
.icon20x20-left { float: left; width: 20px; height: 20px;}
.icon25x25-left { float: left; width: 25px; height: 25px;}
.icon30x30-left { float: left; width: 30px; height: 30px;}
.icon35x35-left { float: left; width: 35px; height: 35px;}
.icon40x40-left { float: left; width: 40px; height: 40px;}
.icon45x45-left { float: left; width: 45px; height: 45px;}
.icon50x50-left { float: left; width: 50px; height: 50px;}

.icon10x10 { width: 10px; height: 10px;}
.icon15x15 { width: 15px; height: 15px;}
.icon20x20 { width: 20px; height: 20px;}
.icon25x25 { width: 25px; height: 25px;}
.icon30x30 { width: 30px; height: 30px;}
.icon35x35 { width: 35px; height: 35px;}
.icon40x40 { width: 40px; height: 40px;}
.icon45x45 { width: 45px; height: 45px;}
.icon50x50 { width: 50px; height: 50px;}
.icon60x60 { width: 60px; height: 60px;}
.icon70x70 { width: 70px; height: 70px;}
.icon80x80 { width: 80px; height: 80px;}
.icon90x90 { width: 90px; height: 90px;}
.icon100x100 { width: 100px; height: 100px;}


/*---TEXTAREA---*/

 input:disabled{ cursor: not-allowed;}

.label { display: block; width: 10em; clear: left; padding-top: 8px; }
.input { text-indent: 10px; }
.label, .input { float: left; }

.form li { height: 45px;}

/*---BODY-BACKGROUND-SLIDE---*/

#slideshow, img.bgM { min-height: 100%; min-width: 1024px; width: 100%; height: 100%; position: fixed; top: 0;  left: 0; z-index:-9999;}

/*---OPACITY---*/
.hover-opacity { transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity .5s ease-out scale(1.0, 1.0);
    -o-transition: opacity .5s ease-out;}
.hover-opacity:hover { opacity: 0.5;}