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


header { height: 70px; width: 100%; background-color: #000; text-align: center; } 
header nav ul li { display: inline-block; padding: 10px 3% 0 3%; border-top: 4px solid transparent;}
header nav ul li:hover { border-color: #fff; -webkit-transition: all ease-in-out 0.4s;
    -moz-transition: all ease-in-out 0.4s;
    -o-transition: all ease-in-out 0.4s;
    transition: all ease-in-out 0.4s;
	}
header nav ul li a { display: inline-block;  color: #fff;}
header nav ul li a img{ width: 25px; height: 25px;}
header nav ul li { font-family: 'Palatino Linotype'; font-size: 1.2em; font-weight: bold; }
header nav ul p { padding-top: 5px;}
#nav-left { float: left; width: 40%;}
#logo { float: left; width: 20%; padding-top: 20px;}
#logo h1 { padding-bottom: 25px; font-family: 'Perpetua Titling MT'; font-size: 2.2em; color: #fff;}
#nav-right { float: left; width: 40%; }
.responsive-image { width: 100%; height: 100%; max-width: 245px; max-height: 180px;}

#langs { position: fixed; right: 50%; margin-right: -650px; top: 30%; overflow: hidden; }
#langs ul { background-color: rgba(0,0,0,0.7); padding: 10px 0 10px 0;}
#langs li{ width: 40px; height: 25px; padding: 5px 10px 5px 10px; }
.flags { width: 40px ; height: 25px;}

#more { position: fixed; right: 50%; margin-right: -580px; top: 30%; overflow: hidden; }
#more ul { background-color: rgba(0,0,0,0.7); padding: 10px 0 10px 0;}
#more li{ width: 50px; height: 50px; padding: 5px 5px 5px 5px; vertical-align: middle; height: 100%;}

article { color: #fff; padding: 40px; line-height: 1.6em;}
article p img { border-color: white;}

.contact_form { padding-top: 50px;width: 500px; float: left;}

.gallery span { padding-right: 5px;}
.gallery img { width: 80px; height: 80px; padding-right: 10px; border: 1px solid transparent;}
.gallery img:hover { border: 1px solid #fff;}
.gallery img:last-child { padding-right: 0;}

input { padding: 5px; background-color: transparent; color: #fff; border: 1px solid silver;}
textarea { background-color: transparent; color: #fff; padding: 5px; border: 1px solid silver;}
input[type="submit"] { cursor: pointer;} 

footer { width: 100%; border-bottom: 10px solid #000; position: absolute; bottom: 0; left: 0;}
#copyright { width: 220px; margin: 0 auto; text-align: center;}