/* Main Styles */
html { min-height: 100%; position: relative; margin: 0; }
body { margin: 0; }
.no-wrap { white-space: nowrap; }
a, h1, h2, h3, .color, .navbar .navbar-brand, .navbar-nav>li a { color: #43853D; }
h1 { font-size: 32px; border-bottom: 1px solid #43853D; padding-bottom: 3px; margin-left: 10px; margin-right: 10px; }
h2 { font-size: 26px; padding-left: 5px; }
h3 { font-size: 21px; padding-left: 5px; }
a:visited { text-decoration: none; }
a:hover { color: #026E00; transition: color 0.5s; }
.text-note { font-weight: bold; font-size: 120%; margin: 10px 0; }
.relative { position: relative; }
.centered { text-align: center; }
.left-aligned { text-align: left; }
.right-aligned { text-align: right; }
.table > thead > tr > .centered-header-cell { vertical-align: middle; text-align: center; }
.clear:after { content: " "; display: block; clear: both; }
.table thead { background-color: #43853D; color: white; }
.alert a { color: #333; }
.alert-box { margin-top: 30px; margin-bottom: 30px; }
.radio-selected, .radio-selected:hover, .radio-not-selected, .radio-not-selected:hover,
	.checkbox-selected, .checkbox-selected:hover, .checkbox-not-selected, .checkbox-not-selected:hover {
	background-position: 2px center; background-repeat: no-repeat; }
.radio-selected, .radio-selected:hover { background-image: url('../images/radio-selected-16x16.png'); }
.radio-not-selected, .radio-not-selected:hover { background-image: url('../images/radio-not-selected-16x16.png'); }
.checkbox-selected, .checkbox-selected:hover { background-image: url('../images/checkbox-selected-16x16.png'); }
.checkbox-not-selected, .checkbox-not-selected:hover { background-image: url('../images/checkbox-not-selected-16x16.png'); }
.dropdown-toggle > .glyphicon:first-child { padding-right: 3px; }

.block { padding: 0 10px 5px; }
.text-block { padding: 0 10px; text-align: justify; }



/* Animations */
@keyframes header-logo-slide-right { 0% { margin-left: -200px; opacity: 0; } 100% { margin-left: -15px; opacity: 1; } }
@keyframes header-icons-slide-right { 0% { margin-left: -5%; opacity: 0; } 100% { margin-left: 0; opacity: 1; } }
@keyframes header-icons-slide-left { 0% { margin-left: 5%; opacity: 0; } 100% { margin-left: 0; opacity: 1; } }



/* Navigation bar Styles */
.navbar { margin-bottom: 0; background: white url('../images/dark-clouds_1920x180.jpg') no-repeat center; background-size: cover; border: 0; }
.navbar .navbar-brand { font-size: 2.25em; font-weight: bold; text-shadow: 2px 1px #333; }
.navbar .navbar-brand img { background-color: white; }
.navbar .navbar-brand .navbar-text { margin: 0 0 0 5px; }
.navbar-nav > li a {}
.navbar-nav > .active > a:before, .navbar-nav > li > a:before { content: ""; display: inline-block; height: 32px; vertical-align: middle; }
.navbar-nav .with-icon:before { width: 32px; margin-right: 5px; background: url('../images/empty.png') no-repeat 0 top; }
.navbar-nav .icon-programs:before { background-image: url('../images/icons/programs-16x16.png'); }
.navbar-nav .icon-websites:before { background-image: url('../images/icons/websites-16x16.png'); }
.navbar-nav .icon-istria:before { background-image: url('../images/icons/istria-16x16.png'); }
.navbar-nav .icon-drawings:before { background-image: url('../images/icons/drawings-16x16.png'); }
.navbar-nav .dropdown-menu a:before { content: ""; display: inline-block; height: 16px; vertical-align: middle; }


/* Footer Styles */
.footer { padding: 10px; text-align: center; background-color: #333; background: linear-gradient(to bottom, #333, #444); color: white; box-shadow: inset 0 2px 3px #888; }
.footer img { height: 32px; margin-left: 5px; }


/* Carousel and Thumnails Styles */
.carousel .owl-item .item { margin: 3px; }
.carousel .owl-item .item img { display: block; width: 100%; height: auto; cursor: pointer; } /* http://owlgraphic.com/owlcarousel/demos/images.html */
.thumbs-collection { position: relative; padding: 10px; }
.thumbs-collection .thumbs-item { position: relative; float: left; margin: 5px; display: block; display: inline-block; }
.thumbs-collection .thumbs-item .title { text-align: center; }
.thumbs-collection .thumbs-item img.thumb { max-width: 100%; cursor: pointer; }
.thumbs-collection .thumbs-item .logos { position: absolute; right: -5px; bottom: -8px; }
.thumbs-collection .thumbs-item .logos img.icon { float: right; margin: 2px; z-index: 10; }


/* Programs/Website Styles */
.windows-logo { float: left; width: 48px; height: 48px; margin-right: 10px; background: url('../images/windows-logo-48x48.png') no-repeat center; cursor: help; }
.show-program .img-preview { position: relative; text-align: center; }
.show-program .img-preview img.preview { max-width: 100%; }
.show-program .img-preview .download-btn { position: absolute; width: 48px; height: 48px; display: block; bottom: -8px; margin-left: -12px; left: 50%; background: url('../images/download-green-48x48.png') no-repeat center; }
table.prog-details th { text-align: right; }
table.prog-details th .symbol { float: left; display: block; padding-top: 2px; }
.btn-theme { padding: 8px 20px; background-color: #43853D; color: white; font-weight: bold; transition: color .5s ease-in-out; }
.btn-theme:hover, .btn-theme:active { color: #333; }
.btn-theme-md .text, .btn-theme-lg .text { display: inline-block; vertical-align: top; }
.btn-theme-md .text { padding-top: 3px; }
.btn-theme-md .glyphicon { font-size: 24px; }
.btn-theme-lg .text { padding-top: 7px; }
.btn-theme-lg .glyphicon { font-size: 32px; }
.websites.thumbs-collection .thumbs-item { min-width: 150px; text-align: center; }
.websites.thumbs-collection .thumbs-item img.thumb { height: 130px; width: auto; }


/* Slider for fullscreen image preview */
.fullscreen-slider, .fullscreen-slider .slider-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
.fullscreen-slider { display: flex; flex-direction: column; justify-content: center; }
.fullscreen-slider .slider-overlay { background-color: rgba(32,32,32,0.9); }
.fullscreen-slider [aria-action="close"] { position: fixed; top: 0; right: 0; display: block; color: white; font-size: 36px; padding: 20px; cursor: pointer; }
.fullscreen-slider .slider-image-holder { position: relative; text-align: center; padding: 10px; }
.fullscreen-slider .slider-image-holder img { max-width: 100%; cursor: move;  }
.fullscreen-slider .slider-image-holder .image-title { color: white;  }



/* Styles for smart-phones and tablets */
@media (max-width: 767px)
{
	h1 { border-bottom-width: 2px; }
	/* h1 { background-color: #43853D; color: white; margin: 0 0 5px 0; padding: 10px; } */
	.sm-centered { text-align: center; }
	.container-fluid { padding: 0; }
	.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin: 0; }
	.navbar .navbar-brand { padding-left: 4px; padding-right: 0; margin-top: -15px; }
	.navbar .navbar-brand img { width: 34px; display: inline; }
	.navbar .navbar-brand span { display: inline-block; margin-left: -5px; line-height: 56px; vertical-align: middle; }
	.navbar .navbar-toggle { margin-right: 5px; }
	.nav a { font-size: 20px; }
	.nav > li a { color: white; }
	.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background: none; }
	.navbar-nav > li a { padding-left: 30px; }
	.navbar-nav > li a:hover, .navbar-nav > li a:focus { color: #333; background-color: rgba(255,255,255,0.3); }
	.navbar-nav .open .dropdown-menu > li > a { padding-left: 50px; height: 32px; }
	.navbar-collapse { background-color: rgba(255,255,255,0.3); }
	.dropdown-menu .divider { background-color: white; margin-left: 50px; margin-right: 50px; opacity: 0.5; }
	.navbar-toggle .icon-bar { background-color: #43853D; height: 4px; }
	.navbar .logos-panel { display: none; }

	.btn.btn-back { display: none; }

	.footer .footer-item:not(:first-child):before { content: " "; display: block; margin: 15px; height: 2px; background-color: #843547; background: linear-gradient(to right, #6A3441, #843547, #6A3441); }

	.thumbs-collection { text-align: center; }
	.thumbs-collection .thumbs-item { float: none; }
	.thumbs-collection .thumbs-item:not(:first-child):before { content: " "; display: block; margin-top: 20px; }

	.show-website .site-logo { display: block; margin: 0 auto; }
}


/* Styles for larger screens (computers) */
@media (min-width: 768px)
{
	body { margin-bottom: 68px; } /* TO DO: to be adjusted */
	h1 { text-align: center; }
	.container-fluid { width: 100%; }
	.navbar { border-radius: 0; box-shadow: 2px 2px 3px #888; }
	.navbar .navbar-brand { line-height: 50px; animation: header-logo-slide-right 1.5s; }
	.navbar .navbar-brand span { display: none; }
	.navbar .navbar-brand img { width: 80%; padding: 5px; border: 1px solid #666; box-shadow: 2px 2px 3px rgba(64,64,64,0.5); }
	.navbar-right { padding-top: 77px; padding-bottom: 3px; }
	.navbar-nav > li a { cursor: pointer; }
	.navbar-nav > li > a { font-weight: bold; }
	.navbar-nav > li > a:hover { color: white; background-color: rgba(255,255,255,0.3); }
	.nav .open > a, .nav .open > a, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #026E00; color: white; }
	.navbar .logos-panel { position: absolute; height: 100%; left: 130px; right: 0; }
	.navbar .logos-panel img { position: absolute; }
	.navbar .logos-panel img.slide-left { animation: header-icons-slide-left 1.5s; }
	.navbar .logos-panel img.slide-right { animation: header-icons-slide-right 1.5s; }
	.navbar .logos-panel .logo-html5 { left: 0.2%; top: 33%; height: 48px; }
	.navbar .logos-panel .logo-css3 { left: 6%; top: 7%; height: 48px; }
	.navbar .logos-panel .logo-js { left: 8%; top: 60%; height: 48px; }
	.navbar .logos-panel .logo-bower { left: 16%; top: 17%; height: 48px; }
	.navbar .logos-panel .logo-nodejs { left: 20%; top: 53%; height: 62px; }
	.navbar .logos-panel .logo-npm { left: 27%; top: 1%; height: 62px; }
	.navbar .logos-panel .logo-angular { left: 36%; top: 35%; height: 48px; }
	.navbar .logos-panel .logo-bootstrap { left: 44%; top: 52%; height: 48px; }
	.navbar .logos-panel .logo-php { left: 49%; top: 7%; height: 48px; }
	.navbar .logos-panel .logo-mysql { left: 55%; top: 23%; height: 62px; }
	.navbar .logos-panel .logo-mssql { left: 69%; top: 30%; height: 32px; }
	.navbar .logos-panel .logo-vs { left: 75%; top: 6%; height: 48px; }
	.navbar .logos-panel .logo-java { left: 86%; top: 12%; height: 48px; }
	
	.content-holder { padding: 5px; }
	.btn.btn-back { float: right; margin-top: 5px; margin-right: 5px; }
	
	#screenshots-carousel img { max-height: 300px; }
	.thumbs-collection .thumbs-item .logos img.icon { opacity: 0.85; transition: opacity .5s ease-in-out; cursor: help; }
	.thumbs-collection .thumbs-item .logos img.icon:hover { opacity: 1; }
	.show-program .img-preview .download-btn { opacity: 0.75; transition: opacity .5s ease-in-out; }
	.show-program .img-preview .download-btn:hover { opacity: 1; }
	.show-website .site-logo { float: right; margin-left: 10px; margin-bottom: 10px; margin-top: 10px; }
	
/* 	.navbar-nav .open .icon-prestations:before { background-image: url('../images/icons/prestations_open_32x32.png'); }
	.navbar-nav .open .icon-nous:before { background-image: url('../images/icons/nous_open_32x32.svg'); } */
	
	.fullscreen-slider [aria-action="close"] { opacity: .7; transition: opacity .4s ease; }
	.fullscreen-slider [aria-action="close"]:hover { opacity: 1; }

	.footer { position: absolute; bottom: 0; width: 100%; letter-spacing: 2px; }
	.footer img { position: relative; height: 48px; opacity: .75; transition: all .4s ease; padding: 3px; }
	.footer img:hover { opacity: 1; padding: 0; }
}