@import "bootstrap.less";

////// Bootstrap overrides

// Links
@linkColor:             @white;
@linkColorHover:        darken(@linkColor, 15%);

// Typography
@baseFontSize:          12px;
@baseFontFamily:        "MuseoSans", Helvetica, Arial, sans-serif;
@baseLineHeight:        18px;
@textColor:             @white;

// Buttons
@primaryButtonBackground:    @linkColor;

//Mixins

//Type
h1, h2, h3, h4, h5, h6 {
	color: @textColor;
}












////// Opio Stilez

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-100-webfont.eot');
		src: url('../font/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-100-webfont.woff') format('woff'),
				 url('../font/museosans-100-webfont.ttf') format('truetype'),
				 url('../font/museosans-100-webfont.svg#MuseoSans100') format('svg');
		font-weight: 100;
		font-style: normal;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-300-webfont.eot');
		src: url('../font/museosans-300-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-300-webfont.woff') format('woff'),
				 url('../font/museosans-300-webfont.ttf') format('truetype'),
				 url('../font/museosans-300-webfont.svg#MuseoSans300') format('svg');
		font-weight: 300;
		font-style: normal;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-500-webfont.eot');
		src: url('../font/museosans-500-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-500-webfont.woff') format('woff'),
				 url('../font/museosans-500-webfont.ttf') format('truetype'),
				 url('../font/museosans-500-webfont.svg#MuseoSans500') format('svg');
		font-weight: 500;
		font-style: normal;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-700-webfont.eot');
		src: url('../font/museosans-700-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-700-webfont.woff') format('woff'),
				 url('../font/museosans-700-webfont.ttf') format('truetype'),
				 url('../font/museosans-700-webfont.svg#MuseoSans700') format('svg');
		font-weight: 700;
		font-style: normal;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-900-webfont.eot');
		src: url('../font/museosans-900-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-900-webfont.woff') format('woff'),
				 url('../font/museosans-900-webfont.ttf') format('truetype'),
				 url('../font/museosans-900-webfont.svg#MuseoSans900') format('svg');
		font-weight: 900;
		font-style: normal;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-100italic-webfont.eot');
		src: url('../font/museosans-100italic-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-100italic-webfont.woff') format('woff'),
				 url('../font/museosans-100italic-webfont.ttf') format('truetype'),
				 url('../font/museosans-100italic-webfont.svg#MuseoSans100Italic') format('svg');
		font-weight: 100;
		font-style: italic;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-300italic-webfont.eot');
		src: url('../font/museosans-300italic-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-300italic-webfont.woff') format('woff'),
				 url('../font/museosans-300italic-webfont.ttf') format('truetype'),
				 url('../font/museosans-300italic-webfont.svg#MuseoSans300Italic') format('svg');
		font-weight: 300;
		font-style: italic;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-500italic-webfont.eot');
		src: url('../font/museosans-500italic-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-500italic-webfont.woff') format('woff'),
				 url('../font/museosans-500italic-webfont.ttf') format('truetype'),
				 url('../font/museosans-500italic-webfont.svg#MuseoSans500Italic') format('svg');
		font-weight: 500;
		font-style: italic;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-700italic-webfont.eot');
		src: url('../font/museosans-700italic-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-700italic-webfont.woff') format('woff'),
				 url('../font/museosans-700italic-webfont.ttf') format('truetype'),
				 url('../font/museosans-700italic-webfont.svg#MuseoSans700Italic') format('svg');
		font-weight: 700;
		font-style: italic;
}

@font-face {
		font-family: 'MuseoSans';
		src: url('../font/museosans-900italic-webfont.eot');
		src: url('../font/museosans-900italic-webfont.eot?#iefix') format('embedded-opentype'),
				 url('../font/museosans-900italic-webfont.woff') format('woff'),
				 url('../font/museosans-900italic-webfont.ttf') format('truetype'),
				 url('../font/museosans-900italic-webfont.svg#MuseoSans900Italic') format('svg');
		font-weight: 900;
		font-style: italic;
}

* {
	//-moz-box-sizing: border-box;
	//-webkit-box-sizing: border-box;
	//box-sizing: border-box;
	.transition(all .1s ease-in-out);
}

// TODO - ACTIVATE TRANSITIONS ON SINGLE ELEMENTS, NOT ALL

html {

}

body {
	background: black;
	padding-top: 95px;
}

/* Mozilla based browsers */
::-moz-selection {
	background-color: white;
	color: black;
}

/* Works in Safari */
::selection {
	background-color: white;
	color: black;
}

/* TYPO */

.h1lines {
	padding: 18px 30px;
	border-top: 1px solid rgb(35,35,35);
	border-bottom: 1px solid rgb(35,35,35);
	margin: 0 0 30px 0;
	position: relative;
}

.quote {
line-height: 1.4em;
font-size: 20px;
padding: 20px 30px 30px 30px;
border-top: 1px solid rgb(35,35,35);
border-bottom: 1px solid rgb(35,35,35);
text-align: center;
font-style: italic;
position: relative;
color: white;
margin: 35px 20px !important;
}

.quote span {
position: absolute;
right: 0;
text-align: right;
font-size: 14px;
margin: 20px 35px 0 0;
line-height: 1.25em;
font-style: normal;
font-weight: bold;
color: rgb(160,160,160);
}

hr {
border: none;
border-top: 1px solid rgb(35,35,35);
height: 0px;
}

/* CONTACT FORM */

.contactForm {
	.left,
	.right {
		float: left;
		width: 277px;
	}
	.left {
		margin: 0 13px 0 0;
	}
	.right {
		margin: 0 0 0 13px;
	}
	label {
		font-size: 15px;
		color: rgb(140,140,140);
		font-weight: bold;
		top: 7px;
		left: 10px;
	}
	.textBox {
		label {
			top: 10px !important;
		}
	}
}

.contactForm .nameBox,
.contactForm .emailBox,
.contactForm .subjectBox,
.contactForm .telBox {
margin: 0 0 15px 0;
position: relative;
}

.contactForm .textBox  {
clear: both;
position: relative;
}

.contactForm input#name,
.contactForm input#email,
.contactForm input#tel {
width: 265px;
//margin: 4px 34px 10px 0;
padding: 5px;
font-size: 15px;
}

.contactForm select {
width: 265px;
//margin: 4px 34px 10px 0;
padding: 1px 5px 1px 5px;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
font-size: 15px;
color: rgb(140,140,140);
	font-weight: bold;
}

.contactForm textarea {
margin: 4px 30px 10px 0;
width: 580px;
padding: 5px;
font-size: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.contactForm label {
	
}

.contactForm span.error {
	font-size: 12px;
	color: rgb(255,50,50);
}

/* BUTTONS */

.button {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
display: inline-block;
padding: 13px 25px;
border-radius: 3px;
margin: 0 0 5px 0;
text-align: center;
position: relative;
font-weight: 600;
color: rgb(170,170,170);
cursor: pointer;
}

.button:hover,
.button.active {
background: rgb(25,25,25) !important;
color: white;
text-decoration: none;
}

.button.fixed {
width: 170px;
}

.button.floatRight{
float: right;
}

.rightContentButtonList,
.rightContentPortfolioButtonList {
list-style-type: none !important;
padding: 0;
margin: 0 !important;
}

.rightContentPortfolioButtonList {
border-top: 1px solid rgb(35,35,35);
padding: 20px 0 20px 0;
margin: 30px 0 0 0 !important;
}

.rightContentButtonList li,
.rightContentPortfolioButtonList li {
width: 210px;
margin: 0 !important;
}

.button.contact,
.button.arrow  {
text-align: left;
padding: 13px 25px 13px 50px;
}

.button.contact:before {
content: "";
display: block;
background: url(/inc/img/iconLetter.png) no-repeat;
position: absolute;
width: 27px;
height: 15px;
top: 13px;
left: 15px;
}

.button.contact:hover:before {
background: url(/inc/img/iconLetter.png) 0 -15px no-repeat;
}

.button.contact.fixed,
.button.arrow.fixed {
width: 135px;
}

.button.arrow:before {
content: "";
display: block;
background: url(/inc/img/slideshowArrows80.png) -17px -108px no-repeat;
position: absolute;
width: 16px;
height: 18px;
top: 12px;
left: 17px;
.transition(all .1s ease-in-out);
}

.button.arrow:hover:before {
background: url(/inc/img/slideshowArrows80.png) -48px -108px no-repeat;
}

.button.news {
margin-top: 10px;
}

/* CONTAINERS */

header,
#slideshowContainer,
#contentContainer,
#newsContainer,
#servicesContainer,
#serviceNav,
#portfolioNav,
#portfolioContainer,
.footerContent {
	.container-fixed();
}

#portfolioNav {
	margin: -25px auto 30px auto;
}

#contentContainer,
#newsContainer {
	padding: 45px 0 30px 0;
}

#headerContainerOuter {
height: 95px;
width: 100%;
background: black;
box-shadow: 0 0 5px black;
position: fixed;
top: 0;
z-index: @zindexFixedNavbar;
}

#headerContainerOuter.mini {
height: 50px;
}

#headerContainerOuter.mini header nav {
top: 16px;
}

#headerContainerOuter.mini header nav ul li {
margin: 0 0 0 5px;
}

#headerContainerOuter.mini header nav ul li a {
padding: 7px 9px;
font-size: 11px;
}

#headerContainerOuter.mini #logo {
transform: scale(.5);
-ms-transform: scale(.5); /* IE 9 */
-webkit-transform: scale(.5); /* Safari and Chrome */
-o-transform: scale(.5); /* Opera */
-moz-transform: scale(.5); /* Firefox */
height: 48px;
position: absolute;
top: 0px;
left: 0px;
width: 60px;
}

#slideshowContainerOuter,
#servicesContainerOuter,
#portfolioContainerOuter {
/*padding: 75px 0;*/
padding: 0;
background: rgb(245,245,245);
.transition(none);
}

.slideshowContainerOuterNavPadding,
.portfolioContainerOuterNavPadding {
padding: 75px 0 !important;
}

header,
#slideshowContainerOuter,
#slideshowContainer,
#servicesContainer,
#portfolioContainer {
position: relative;
}

.paddedContent {
width: 870px;
margin: 0 auto;
}

#slideshowContainer {
//display: none;
}

/* HEADER */

header #logo {
display: block;
width: 190px;
height: 48px;
background: url(/inc/img/logoOpio.png) no-repeat;
position: absolute;
top: 22px;
}

header #logo div {

}

header nav {
position: absolute;
top: 40px;
right: 0;
}

header nav ul {
	list-style: none;
	margin: 0;
}

header nav ul li {
float: left;
margin: 0 0 0 30px;
}

header nav ul li a {
text-transform: uppercase;
font-weight: 700;
padding: 12px 15px;
.border-radius(3px);
}

header nav ul li a:hover,
header nav ul li.active a {
background: rgb(25,25,25);
text-decoration: none;
}

/* TOP SLIDESHOW */

#topSlideshow {
width: 865px;
height: 535px;
margin: 0 auto;
position: relative;
border-radius: 8px;
}

#topSlideshow:after {
display: block;
content: url(/inc/img/slideshowShadow.png);
position: absolute;
bottom: -51px;
}

#topSlideshow.startpageSlideshow:after {
display: none;
}


.topSlideshowItem {
width: 865px;
height: 535px;
position: relative;
display: none;
.transition(none);
}

.topSlideshowItem.first {
display: block;
}

.topSlideshowItem img,
.video-js-box,
video {
border-radius: 8px;
}

#topSlideshowPrev,
#topSlideshowNext {
width: 39px;
height: 83px;
position: absolute;
top: 225px;
cursor: pointer;
opacity: 0;
border-radius: 3px;
box-shadow: 2px 2px 4px rgba(200,200,200,.3);
}

@media only screen and (device-width: 768px) {
#topSlideshowPrev,
#topSlideshowNext {
opacity: 1;
}
}

#slideshowContainerOuter:hover #topSlideshowPrev,
#slideshowContainerOuter:hover #topSlideshowNext,
#portfolioContainerOuter:hover #topSlideshowPrev,
#portfolioContainerOuter:hover #topSlideshowNext {
opacity: 1;
}

#topSlideshowPrev {
background: black url(/inc/img/slideshowArrows.png) 0 0 no-repeat;
left: -40px;
}

#topSlideshowPrev:hover {
background: black url(/inc/img/slideshowArrows.png) -39px 0 no-repeat;
}

#topSlideshowNext {
background: black url(/inc/img/slideshowArrows.png) -39px -83px no-repeat;
right: -40px;
}

#topSlideshowNext:hover {
background: black url(/inc/img/slideshowArrows.png) 0px -83px no-repeat;
}

#slideshowMoveUpContainer {
position: absolute;
bottom: 0;
width: 100%;
z-index: 100;
}

#slideshowMoveUp {
display: none;
margin-left: auto;
margin-right: auto;
left: 450px;
width: 83px;
height: 0px;
border-radius: 3px 3px 0 0;
background: rgb(19,19,19) url(/inc/img/slideshowArrowDown.png) 0 -39px no-repeat;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

}

#slideshowContainerOuter:hover #slideshowMoveUp {
height: 39px;
}

#slideshowMoveUp:hover {
background-position: 0 0;
}

@media only screen and (max-height: 830px) {
#slideshowMoveUp {
display: block;
}
}

/* SERVICES */

.services {
	margin: 0;
	list-style: none;
}


/* SERVICE and PORTFOLIO MENU */

#serviceNav nav ul,
#portfolioNav nav ul {
	margin: 0;
	list-style: none;
	li {
		float: left;
		margin: 0 18px 0 0;
		a {
			color: rgb(128,128,128);
			text-transform: uppercase;
			font-size: 12px;
			&.button {
				padding: 7px 10px;
				border-radius: 3px;
				margin: 0;
			}
			&.active,
			&:hover {
				color: white;
				text-decoration: none;
				cursor: pointer;
			}
		}
		input,
		label {
			display: none;
		}
	}
}

/* PORTFOLIO */

#portfolioSlideshow {
	width: 900px;
	margin: 0 auto;
	position: relative;
	left: 17px;
	ul {
		margin: 0;
		padding-bottom: 10px;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		.transition(all .3s ease-in-out);
		.portfolioBox {
			display: block;
			width: 270px;
			height: 255px;
			background: black url(/inc/img/serviceBoxBg.png);
			margin: 10px 25px 15px 25px;
			position: relative;
			.border-radius(5px);
			&:after {
				display: block;
				content: url(/inc/img/serviceBoxShadow.png);
				position: absolute;
				bottom: -25px;
			}
			&:hover .portfolioIcon {
				background: rgb(0,0,0) !important;
			}
			&:hover .text {
				opacity: 1;
			}
			a:hover {
				text-decoration: none;
			}
			.text {
				opacity: 0;
				z-index: 120;
				position: absolute;
				bottom: 30px;
				left: 30px;
			}
			h2,
			h2 span.date,
			span.tags {
				cursor: pointer;
			}
			h2,
			span.tags {
				margin: 0 20px 5px 0;
			} 
			h2 span.date {
				color: rgb(100,100,100);
			}
		}
		.portfolioIcon {
			position: absolute;
			top: 0;
			left: 0;
			width: 270px;
			height: 255px;
			border-radius: 5px;
		}
	}
}

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

.sticky {
	.transition(none);
	&.stick {
		position: fixed;
		top: 75px;
	}
}

/* CONTENT */

#contentContainerOuter {
background: url(/inc/img/bgPattern.png) rgb(19,19,19);
box-shadow: 0 0 5px black;
position: relative;
z-index: 900;
}

#contentContainer {

}

#contentBoxes {
display: -moz-box;
display: -webkit-box;
display: box;
width: @gridRowWidth;
position: relative;
}

.leftContent,
.rightContent {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
padding: 0 30px 0 30px;
}

.leftContent {
position: relative;
width: 680px;
padding-right: 45px;
}

.rightContent {
position: relative;
border-left: 1px solid rgb(35,35,35);
width: 280px;
}

#newsContainerOuter {
background: rgb(13,13,13);
}

#twitterBirdie {
position: relative;
top: 5px;
left: -6px;
margin: 0 10px 0 0;
}

.twitterFeed {
margin: 20px 0 0 0;
}

.portfolioImage {
box-shadow: 0px 0px 2px 2px rgba(10,10,10,.85);
border: 1px solid black;
background: url(/inc/img/bgPattern.png) rgb(25,25,25);
}

.portfolioImage:hover {
box-shadow: 0px 0px 4px 4px rgba(10,10,10,.85);
}

div.portfolioImageMask {
width: 581px;
height: 345px;
position: relative;
}

div.portfolioImageMask .top,
div.portfolioImageMask .right,
div.portfolioImageMask .bottom,
div.portfolioImageMask .left {
position: absolute;
background: url(/inc/img/bgPattern.png) rgb(25,25,25);
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}

div.portfolioImageMask .top.hovering,
div.portfolioImageMask .right.hovering,
div.portfolioImageMask .bottom.hovering,
div.portfolioImageMask .left.hovering {
height: 0;
}

div.portfolioImageMask .top {
border-top: 1px solid black;
width: 580px;
height: 45px;
}

div.portfolioImageMask .right {
border-right: 1px solid black;
border-top: 1px solid black;
right: 0;
width: 45px;
height: 345px;
}

div.portfolioImageMask .bottom {
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
bottom: -1px;
width: 580px;
height: 45px;
}

div.portfolioImageMask .left {
border-left: 1px solid black;
border-top: 1px solid black;
width: 45px;
height: 345px;
}



#topSlideshowPager {
position: absolute;
right: 25px;
top: 30px;
}

#topSlideshowPager div {
float: left;
height: 12px;
width: 13px;
padding: 5px;
background: white;
margin: 0 0 0 10px;
background: url(/inc/img/slideshowPagerInactive.png) center center no-repeat;
cursor: pointer;
}

#topSlideshowPager div.activeSlide {
background: url(/inc/img/slideshowPagerActive.png) center center no-repeat;
}


/* NEWS */

#newsCarousel {
	.transition(none);
}

#newsCarousel li {
width: 435px;
padding: 0 0 0 2px;
float: left;
}

#newsCarousel li .content {
margin: 15px 0 0 0;
}

#newsCarousel li h2 {
margin: 0 0 8px 0;
}

#newsCarousel li span.date {
cursor: default;
font-weight: 600;
font-size: 12px;
}

#newsCarousel li p {
margin: 8px 25px 0 0;
}

#newsCarouselButtons {
position: absolute;
top: 25px;
right: 30px;
}

#newsCarouselButtons div {
height: 22px;
width: 17px;
margin: 0 0 0 20px;
float: left;
cursor: pointer;
}

#newsCarouselButtons div#newsCarouselPrev {
background: url(/inc/img/slideshowArrows.png) -49px -31px no-repeat;
}

#newsCarouselButtons div#newsCarouselPrev:hover {
background: url(/inc/img/slideshowArrows.png) -10px -31px no-repeat;
}

#newsCarouselButtons div#newsCarouselNext {
background: url(/inc/img/slideshowArrows.png) -13px -114px no-repeat;
}

#newsCarouselButtons div#newsCarouselNext:hover {
background: url(/inc/img/slideshowArrows.png) -51px -114px no-repeat;
}

/* jCarousel */

.jcarousel-clip {
overflow: hidden;
width: 870px;
}

/* GOOGLE MAPS */



/* FOOTER */

footer {
	padding: 45px 0 10px 0;
	background: black;
	font-size: 12px;
	color: rgb(230,230,230);
	box-shadow: 0 0 5px black;
	position: relative;
	z-index: 1000;
	.footerContent {
		position: relative;
		#footerNav,
		#footerAddress,
		#footerContact,
		#footerIcons {
			float: left;
		}
		#footerNav {
			width: 470px;
			display: none;
			ul {
				display: none;
				list-style: none;
				margin: 0;
				li {
					margin: 0 10px 15px 0;
					float: left;
					a {
						text-transform: uppercase;
						font-weight: 500;
						padding: 7px 10px;
						font-size: 11px;
						.transition(all .1s ease-in-out);
						.border-radius(3px);
						&:hover {
							background: rgb(10,10,10);
							text-decoration: none;
						}
					}
				}
			}
		} //footerNav
		#footerAddress {
			margin-left: 200px;
			width: 135px;
			display: none;
		}
		#footerContact {
			width: 135px;
			display: none;
		}
		#footerIcons {
			width: 100%;
			text-align: center;
			a {
				display: inline-block;
				width: 43px;
				height: 42px;
				margin: 0 0 0 7px;
				background-color: rgb(10,10,10);
				background-image: url(/inc/img/socialIcons.png);
				.transition(all .1s ease-in-out);
				.border-radius(3px);
				&.facebook {
					background-position: 0 0;
				}
				&.facebook:hover {
					background-position: 0 42px;
				}
				&.twitter {
					background-position: 129px 0;
				}
				&.twitter:hover {
					background-position: 129px 42px;
				}
				&.vimeo {
					background-position: 86px 0;
				}
				&.vimeo:hover {
					background-position: 86px 42px;
				}
				&.skype {
					background-position: 43px 0;
				}
				&.skype:hover {
					background-position: 43px 42px;
				}
			}
		}
		.copyright {
			margin: 25px 0;
			text-align: center;
			color: rgb(100,100,100);
			font-size: 11px;
		}
	}
}