/* ==========================================================================
   Author's custom styles
   Author's note: Search for #M to quickly find queries for content hidden/ displaying on mobile screens;
   ========================================================================== */


   html{
   		height: 100%;
   		width: 100%;
   		-ms-overflow-style:scrollbar;
   }

	body{
		height: 100%;
   		width: 100%;
   		font-family: 'Open Sans', sans-serif; /* font-weights: 400,300,600,700 */
		font-weight: 300;

		background: url("../img/paper-pattern-bg.jpg") top left repeat;
		-webkit-background-size: 20%;
		-moz-background-size: 20%;
		-o-background-size: 20%;
		background-size: 20%;
		background-attachment: fixed;
	}

	*{
		padding: 0;
		margin: 0;
	}

/* ============ TYPOGRAPHY ============ */

	h1, h2, h3, h4, li, .h3-position-hr, .h3-position-en{
		color: #a9c5d1;
		text-transform: uppercase;
	}

	p, a{
		color: #fff;
	}

	.h3-position-hr{
		font-size: 2em;
		font-weight: 600;
	}

	.h3-position-en{
		font-size: 2em;
		font-weight: 600;
	}

	.slides span{
		color: #a9c5d1;
	}

	#mailto, .sq-inner-txt a{
		border-bottom: 1px solid rgba(255, 255, 255, 0);
		-webkit-transition: border 500ms ease;
		-moz-transition: border 500ms ease;
		-ms-transition: border 500ms ease;
		-o-transition: border 500ms ease;
		transition: border 500ms ease; 
	}

	#mailto:hover, .sq-inner-txt a:hover{
		border-bottom: 1px solid rgba(255, 255, 255, 0.8);
	}

	#mobile-menu .navbar-nav a{
		color: #fff;
		font-weight: 500;
	}

	.h1-align{
		display: table-cell;
		position: relative;
		vertical-align: middle;
	}

	#h1-about-align-hr{
		left: -10px;
	}

	#h1-exp-align-hr{
		left: -13px;
	}

	#h1-contact-align-hr{
		left: -12px;
	}

	#h1-about-align-en{
		left: -11px;
	}

	#h1-exp-align-en{
		left: -11px;
	}

	#h1-contact-align-en{
		left: -10px;
	}

	#about-tool-hr, #about-tool-en{
		padding-left: 4px;
		padding-top: 3px;
	}

	#exp-tool-hr, #contact-tool-hr{
		padding-left: 3px;
		padding-top: 3px;
	}

	#exp-tool-en{
		padding-left: 4px;
		padding-top: 3px;
	}

	#contact-tool-en{
		padding-left: 4.5px;
		padding-top: 3px;
	}

	p span {
		font-weight: 700;
	}

	#contact-txt p {
		margin-bottom: 0;
	}

	#top-btn{
		position: fixed;
		right: 6px;
		bottom: 6px;
		width: 40px;
		height: 40px;
		background-color: rgba(0, 0, 0, 0.6);
		display: none;
	}

	.glyphicon {
		display: block;
		font-size: 1em;
		height: 100%;
		padding: 10px 0 0;
		text-align: center;
	}


/* Mobile screen */
@media screen and (max-width: 480px){
	/* #M Typography for phones */
	h1{
		font-size: 4em;
		font-weight: 600;
	}

	.h1-position{
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		table-layout: fixed;
		display: table;
	}

	p{
		font-size: 1.2em;
		font-weight: 400;
	}

	.sq-inner-txt{
		position: relative;
		width: 100%;
		padding: 15% 10% 25% 10%;
		line-height: 190%;
	}

	.marg-bottom{
		margin-bottom: 25px;
	}
} /* End of media query */


/* Horizontal mobile and vertical tablet screens */
@media screen and (min-width: 481px) and (max-width: 768px){
	/* #M Typography for mobile */
	h1{
		font-size: 4em;
		font-weight: 600;
	}


	.h1-position{
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		table-layout: fixed;
		display: table;
	}

	p{
		font-size: 1.6em;
		font-weight: 400;
	}

	.sq-inner-txt{
		position: relative;
		width: 100%;
		padding: 15% 10% 25% 10%;
		line-height: 240%;
	}

	.marg-bottom{
		margin-bottom: 30px;
	}
} /* End of media query */


/* Tablet screens */
@media screen and (min-width: 768px) and (max-width: 990px){
	/* Typography styling for screen >767px && <=991px */
	h1{
		font-size: 4em;
		font-weight: 600;
	}

	.h1-position{
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		table-layout: fixed;
		display: table;
	}

	.h3-position-hr{
		font-size: 1.7em;
		font-weight: 700;
	}

	#about-tool-hr{
		padding-left: 4px;
		padding-top: 3px;
	}

	#exp-tool-hr, #contact-tool-hr{
		padding-left: 3px;
		padding-top: 3px;
	}

	.h3-position-en{
		font-size: 1.7em;
		font-weight: 700;
	}

	p{
		font-size: 1.7em;
		font-weight: 400;
	}

	.sq-inner-txt{
		position: relative;
		width: 100%;
		padding: 15% 10% 25% 10%;
		line-height: 36px;
	}

	.marg-bottom{
		margin-bottom: 35px;
	}

	.square-mini {
		height: 40px; 
		width: 200px;
		color: #a9c5d1;
	}/* One col and half a row */
} /* End of media query */


/* Laptop/ desktop screens */
@media screen and (min-width: 991px){
	/* Typography styling for screen >991px */
	h1{
		font-size: 4em;
		font-weight: 600;
	}

	.h1-position{
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		table-layout: fixed;
		display: table;
	}

	p{
		font-size: 1.1em;
		font-weight: 400;
	}

	.sq-inner-txt{
		position: relative;
		width: 100%;
		padding: 11% 10% 0%;
		line-height: 160%;
	}

	#sq-contact-text .sq-inner-txt{
		padding-left: 15%;
		padding-top: 17%;
	}

	.marg-bottom{
		margin-bottom: 20px;
	}

	.square-mini {
		height: 40px; 
		width: 200px;
	} /* One col and half a row */
} /* End of media query */


/* Laptop/ desktop screens */
@media screen and (min-width: 1201px){
	/* Typography styling for screen >991px */
	h1{
		font-size: 4em;
		font-weight: 600;
	}

	.h1-position{
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		table-layout: fixed;
		display: table;
	}

	p{
		font-size: 1.2em;
		font-weight: 400;
	}

	.sq-inner-txt{
		line-height: 180%;
	}

	.marg-bottom{
		margin-bottom: 25px;
	}

	.square-mini {
		height: 45px; 
		width: 225px;
	} /* One col and half a row */
} /* End of media query  */


/* Big screens */
@media screen and (min-width: 1601px){
	/* Typography styling for screen >1200px */
	h1{
		font-size: 4.2em;
		font-weight: 600;
	}


	.h1-position{
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		table-layout: fixed;
		display: table;
	}

	p{
		font-size: 1.4em;
		font-weight: 400;
	}

	.sq-inner-txt{
		position: relative;
		width: 100%;
		padding: 11% 10% 10% 10%;
		line-height: 210%;
	}

	#sq-contact-text .sq-inner-txt{
		padding-left: 15%;
	}

	.marg-bottom{
		margin-bottom: 25px;
	}

	.square-mini {
		height: 50px; 
		width: 250px;
	} /* One col and half a row */
} /* End of media query  */


/* Really big screens */
@media screen and (min-width: 1700px){
	
	p{
		font-size: 170%;
		font-weight: 400;
	}

	.sq-inner-txt{
		position: relative;
		width: 100%;
		padding: 10%;
		line-height: 240%;
	}

	#sq-contact-text .sq-inner-txt{
		padding-left: 15%;
	}

	.marg-bottom{
		margin-bottom: 30px;
	}
}




/* ============ PAGE AND CONTENT CONTAINERS ============ */

	#outer-container{
		width: 100%;
		height: 100%;
		position: relative;
		top: 0;
		left: 0;
	}

	#home, #pocetna{
		width: 100%;
		height: 100%;
		position: relative;
		top: 0;
		left: 0;
	}

	#about, #our-services, #contact, #onama, #naseusluge, #kontakt{
		position: relative;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		clear: left;
	}	


@media screen and (min-width: 991px){
	#bg-img-container{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}	
} /* End of media query  */



/* ============ BACKGROUND IMG CONTAINERS ============ */

	img{
		max-width: 100%;
		max-height: 100%;
	}


@media screen and (min-width: 991px){
	/* #M Background images hidden for mobile */
	/* Background image elements displaying for screens >991px */
	#logo{
		position: fixed;
		top: 10%;
		width: 16.6666666666666666%;
		height: 33.333333333333333%;
		z-index: 5;
	}

	#bg-square-notebook{
		position: absolute;
		top: 0;
		left: 0;
		width: 16.6666666666666666%;
		height: 66.666666666666666%;
		background: url(../img/notepad-tr.png) no-repeat left top;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* Notepad. Single col, two rows */

	#bg-square-coffee{
		position: absolute;
		top: 66.666666666666666%;
		left: 0;
		width: 16.6666666666666666%;
		height: 33.333333333333334%;
		background: url(../img/coffee-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* Coffee. Single col, single row. */

	#bg-square-watch{
		position: absolute;
		top: 33.333333333333333%;
		left: 33.333333333333332%;
		width: 16.6666666666666666%;
		height: 66.666666666666667%;
		background: url(../img/watch-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* Watch. Two cols, single row. */

	#bg-square-pens{
		position: absolute;
		top: 0;
		left: 50%;
		width: 16.6666666666666666%;
		height: 66.666666666666666%;
		background: url(../img/pens-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* Pencils. Single col, two rows. */

	#bg-square-usb{
		position: absolute;
		top: 66.666666666666666%;
		left: 50%;
		width: 16.6666666666666666%;
		height: 33.333333333333334%;
		background: url(../img/stick-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* USB. Single col, single row. */

	#bg-square-stamp{
		position: absolute;
		top: 0;
		left: 66.666666666666666%;
		width: 33.333333333333334%;
		height: 33.333333333333333%;
		background: url(../img/stamp-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* Stamp. Two cols, one row. */

	#bg-square-bowtie{
		position: fixed;
		top: 0;
		left: 16.6666666666666666%;
		width: 33.333333333333334%;
		height: 33.333333333333333%;
		background: url(../img/bowtie-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* Bowtie. Two cols, single row. */

	#bg-square-glasses{
		position: fixed;
		top: 33.333333333333333%;
		left: 16.6666666666666666%;
		width: 16.6666666666666666%;
		height: 66.666666666666667%;
		background: url(../img/glasses-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* Glasses. Single col, single row. */

	#bg-square-phone{
		position: fixed;
		top: 33.333333333333333%;
		left: 66.666666666666666%;
		width: 33.333333333333334%;
		height: 66.666666666666667%;
		background: url(../img/smartphone-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	} /* Smartphone. Two cols, two rows. */


	#about-white, #exp-white, #contact-white{
		-moz-outline: 1px solid transparent;
		-webkit-outline: 1px solid transparent;
		-ms-outline: 1px solid transparent;
		-o-outline: 1px solid transparent;
		outline: 1px solid transparent; /* To smooth out the edges during transfrom in Firefox */
	}
} /* End of media query */


/* #M Background images for mobile */
@media screen and (max-width: 991px){
	#bg-square-glasses{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 250px;
		float: left;
		background: url(../img/glasses-tm.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		pointer-events: none;
		cursor: pointer;
	} /* Glasses. Single col, single row. */

	#bg-square-bowtie{
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: 250px;
		float: left;
		background: url(../img/bowtie-t.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		pointer-events: none;
		cursor: pointer;
	} /* Bowtie. Two cols, single row. */

	#bg-square-phone{
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: 250px;
		float: left;
		background: url(../img/smartphone-t.png) no-repeat top center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		pointer-events: none;
		cursor: pointer;
	} /* Smartphone. Two cols, two rows. */
} /* End of media query  */


/* Elements for big screens */
@media screen and (min-width: 991px){

	/* #M About section hidden for mobile */
	/* ============ ABOUT US ELEMENTS ============ */
	#sq-about-head{
		position: absolute;
		top: 33.333333333333333%;
		left: 16.666666666666667%;
		width: 33.333333333333334%;
		height: 33.333333333333333%;
		overflow: hidden;
	}

	/*#about-white{
		position: absolute;
		top: 33.333333333333333%;
		left: 16.666666666666667%;
		width: 33.333333333333333%;
		height: 33.333333333333333%;
	}*/

	#about-white{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#sq-about-text{
		position: absolute;
		top: 33.333333333333333%;
		left: 50%;
		width: 50%;
		height: 66.666666666666667%;
	}

	#about-shader-0{ 
		position: absolute;
		top: 0;
		left: 16.6666666666666666%;
		width: 33.333333333333334%;
		height: 33.333333333333333%;
		opacity: 0.7;
	} /* Blocks tooltip field within section */

	#about-shader-1{ 
		position: absolute;
		top: 0;
		left: 0;
		width: 16.6666666666666666%;
		height: 100%;
		opacity: 0.7;
	} /* Left column, black */

	#about-shader-2{
		position: absolute;
		top: 66.666666666666666%;
		left: 16.666666666666667%;
		width: 33.333333333333334%;
		height: 33.333333333333334%;
		opacity: 0.7;
	} /* Bottom row, white */

	#about-shader-3{
		position: absolute;
		top: 0;
		left: 50%;
		width: 50%;
		height: 33.333333333333333%;
		opacity: 0.7;
	} /* Top-right, row, white */


	/* #M Expertise section hidden for mobile */
	/* ============ EXPERTISE ELEMENTS ============ */

	#sq-exp-head{
		position: absolute;
		left: 33.333333333333333%;
		top: 0;
		width: 33.333333333333334%;
		height: 33.333333333333333%;
		overflow: hidden;
	}


	#exp-white{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#sq-exp-text{
		position: absolute;
		left: 33.333333333333333%;
		top: 33.333333333333333%;
		width: 50%;
		height: 66.666666666666667%;
	}

	#exp-shader-0{
		position: absolute;
		top: 33.333333333333333%;
		left: 16.6666666666666666%;
		width: 16.6666666666666666%;
		height: 66.666666666666667%;
		opacity: 0.7;
	} /* Blocks tooltip field within section */

	#exp-shader-1{
		position: absolute;
		left: 0;
		top: 0;
		width: 33.333333333333333%;
		height: 33.333333333333333%;
		opacity: 0.7;
	} /* Top-left, row, black */

	#exp-shader-2{
		position: absolute;
		left: 66.666666666666666%;
		top: 0;
		width: 16.6666666666666666%;
		height: 33.333333333333333%;
		opacity: 0.7;
	} /* Top, single, black */

	#exp-shader-3{
		position: absolute;
		right: 0;
		top: 66.666666666666666%;
		width: 16.6666666666666666%;
		height: 33.333333333333334%;
		opacity: 0.7;
	} /* Bottom-left, single, black */

	#exp-shader-4{
		position: absolute;
		left: 0;
		top: 33.333333333333333%;
		width: 16.6666666666666666%;
		height: 66.666666666666667%;
		opacity: 0.7;
	} /* Left column, white */

	#exp-shader-5{
		position: absolute;
		right: 0;
		top: 0;
		width: 16.6666666666666666%;
		height: 66.666666666666666%;
		opacity: 0.7;
	} /* Right column, white */


	/* #M Contact section hidden for mobile */
	/* ============ CONTACT ELEMENTS ============ */
	#sq-contact-head{
		position: absolute;
		left: 0;
		top: 33.333333333333333%;
		width: 33.333333333333333%;
		height: 33.333333333333333%;
		overflow: hidden;
	}

	#contact-white{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#sq-contact-text{
		position: absolute;
		left: 33.333333333333333%;
		top: 33.333333333333333%;
		width: 33.333333333333333%;
		height: 66.666666666666667%;
	}

	#contact-shader-0{
		position: absolute;
		top: 33.333333333333333%;
		left: 66.666666666666666%;
		width: 33.333333333333334%;
		height: 66.666666666666667%;
		opacity: 0.7;
	} /* Blocks tooltip field within section */

	#contact-shader-1{
		position: absolute;
		left: 0;
		top: 0;
		width: 66.666666666666666%;
		height: 33.333333333333333%;
		opacity: 0.7;
	} /* Top-left, row, black */

	#contact-shader-2{
		position: absolute;
		left: 0;
		top: 66.666666666666666%;
		width: 33.333333333333333%;
		height: 33.333333333333334%;
		opacity: 0.7;
	} /* Bottom, row, black */

	#contact-shader-3{
		position: absolute;
		right: 0;
		top: 0;
		width: 33.333333333333334%;
		height: 33.333333333333333%;
		opacity: 0.7;
	} /* Bottom-left, single, black */
} /* End of media query  */



/* #M Elements for small screens */
@media screen and (max-width: 991px){
	
	/* About mobile section */
	#sq-about-head{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 250px;
		float: left;
	}

	#about-white{
		position: relative;
		width: auto;
		height: auto;
		padding: 125px 0;
	}

	#sq-about-text{
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		float: left;
	}

	/* Expertise mobile section */
	#sq-exp-head{
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: 250px;
		float: left;
	}

	#exp-white{
		position: relative;
		width: auto;
		height: auto;
		padding: 125px 0;
	}

	#sq-exp-text{
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		float: left;
		margin-top: -10px;
	}

	/* Contact mobile section */
	#sq-contact-head{
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: 250px;
		float: left;
	}

	#contact-white{
		position: relative;
		width: auto;
		height: auto;
		padding: 125px 0;
	}

	#sq-contact-text{
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		float: left;
	}
}

/* ============ SQUARE (HELPER) CLASSES ============ */
	.square-black{
		background-color: #393536;
	}

	.square-white{
		background-color: #ffffff;
	}

	.square-blue{
		background-color: #a9c5d1;
	}

	.sq-border-mini{
		border-left: 0.7em solid #a9c5d1;
	}

	.sq-border-l{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-left: 1.3em solid #a9c5d1;
	}


	/* Visibility controls */
	.layer-1{
		z-index: 4;
	}

	.layer-2{
		z-index: 9;
	}

	.layer-3{
		z-index: 15;
	}

	.layer-4{
		z-index: 22;
	}

	.layer-5{
		z-index: 29;
	}


/* ============ NAVIGATION  ============ */

	a, a:hover, a:focus, btn, button, btn:active, btn:hover, btn:focus, .current, li, .nav-active-white, .nav-active-blue{
	transition: all 200ms linear 0s;
	-moz-transition: all 200ms linear 0s;
	-webkit-transition: all 200ms linear 0s;
	-ms-transition: all 200ms linear 0s;
	-o-transition: all 200ms linear 0s;
	outline:none!important;
	text-decoration: none;
	color: #fff;
	}

	:-moz-any-link:focus {
		outline: none;
	}


/* Right-hand side navigation styling */
@media screen and (min-width: 991px){
	/* #M Navigation hidden on mobile */
	#right-nav{
		position: fixed;
		top: 11%;
		right: 0;
		z-index: 12;
	}

	#mobile-nav{
		display: none;
	}

	@media screen\0{
		#right-nav{
			margin-right: 1.2%;
		}
	} /* Only for IE9+ */

	ul{
		position: absolute;
		right: 0;
		list-style-type: none;
	}

	li{
		position: relative;
		width: 1.1em;
		height: 1.1em;
		margin-bottom: 0.4em;
	}


	/* Right-hand navigation language button */
	#lang-btn{
		position: fixed;
		top: 11%;
		right: 0;
		margin-top: -20px;
	}

	#lang-btn a{
		position: relative;
		width: 1.1em;
		height: 1.1em;
		display: block;
	}

	#lang-btn a#link-lang{
		background-color: transparent;
		background: url(../img/icon-arrows.png) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	#lang-btn a#link-lang:hover{
		background-position: left top;
	}

	#lang-btn a#link-lang.icon-blue:hover{
		background-position: right top;
		color: #a9c5d1;
	}


	/* Right-hand navigation hover text  */ 	
	#hover-home, #hover-about, #hover-exp, #hover-contact, #hover-lang{
		position: absolute;
		top: -0.2em;
	  	right: 1.5em;
	  	text-align: right;
	  	width: 10em;
	}

	.nav-hover-txt{
		font-weight: 300;
		font-size: 1em;
		font-weight: 700;
	}

	/* Toggle hover text visibility */
	#nav-home span, #nav-about span, #nav-exp span, #nav-contact span, #nav-lang span, #link-lang span{
	  display: block;
	  visibility: hidden;
	  opacity: 0;
	  transition:         all .5s;
	  -moz-transition:    all .5s;
	  -webkit-transition: all .5s;
	  -o-transition:      all .5s;
	  -ms-transition:     all .5s;
	}

	#nav-home:hover span, #nav-about:hover span, #nav-exp:hover span, #nav-contact:hover span, #nav-lang:hover span, #link-lang:hover span{
	  visibility: visible;
	  opacity: 1;
	}

	/* Right-hand navigation styling on scrolling */
	#right-nav a{
		width: 1.1em;
		height: 1.1em;
		background-color: #373434;	
		display: block;	
	}

	a#link-home.current, a#link-home:hover{
		color: #fff;
		background-color: #fff;
	}

	a#link-about.current, a#link-exp.current, a#link-contact.current{
		background-color: #a9c5d1;
		color: #a9c5d1;
	}

	a#link-home.hov-blue:hover, a#link-about:hover, a#link-exp:hover, a#link-contact:hover{
		background-color: #a9c5d1;
		color: #a9c5d1;	
	}

	a#link-about.hov-white:hover, a#link-exp.hov-white:hover, a#link-contact.hov-white:hover{
		background-color: #fff;
		color: #fff;		
	}


	
	/* ============ TOOLTIP ELEMENTS  ============ */

	.tip-holder span{
		display: none;
	}

	.tip-holder:hover span{
	    display: block;
	    position: fixed;
	    overflow: hidden;
	    z-index: 1;
	}

	.touch .tip-holder .tip-sm{
		display: none;
	} /* Hide tooltips on touch devices. Modernizr applies .touch class to touch devices. */

} /* End of media query */


/* #M Navbar for mobile styling */
@media screen and (max-width: 991px){
	/* Other elements hidden */

	#mobile-nav{
		position: relative;
		width: 100%;
		height: auto;
		float: left;
	}

	.navbar{
		background-color: #373434;
		margin-bottom: 0px;
		border: none;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 0;
	}

	.navbar-brand{
		position: relative;
		width: 180px;
		height: auto;
		padding: 0.7em 0em 0em 0em;
	}

	.navbar-inverse .navbar-toggle .icon-bar{
		background-color: #a9c5d1;
		margin-bottom: 9.5px;
		width: 50px;
		height: 10px;
		border-radius: 0;
	}

	.navbar-toggle{
		position: relative;
		background: none;
		border: none;
		margin: 0.5em 0 0;
		padding: 1em 0;
		border-radius: 0;
	}

	.navbar-collapse{
		border: none;
		box-shadow: none;
		float: right;
		padding-right: 80px;
		text-align: right;
	}

	.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    	background-color: transparent;
	}

	ul.nav.navbar-nav li a{
		padding-right: 0;
		line-height: 30px;
	}

	ul.nav.navbar-nav li:last-child{
		margin-bottom: 20px;
	}

	#nav-line{
		margin-bottom: 10px;
		color: #a9c5d1;
	} /* Bottom margin for the separator line in mobile nav between section links and language link. */

	div#mobile-menu.navbar-collapse.collapse.in ul.nav.navbar-nav li a:hover{
		color: #a9c5d1;
	}

	div#mobile-menu.navbar-collapse.collapse.in ul.nav.navbar-nav li a.current{
		color: #a9c5d1;
	}

	
} /* End of media query  */




/* Loader */
@-webkit-keyframes risenfall {
	to {
		-webkit-transform: scaleY(0);
		transform: scaleY(0);
	}
}

@keyframes risenfall {
	to {
		-webkit-transform: scaleY(0);
		transform: scaleY(0);
	}
}


#loader {
	position: relative;
	top: 40%;
	margin: 0 auto;
	width: 200px;
	min-height: 74px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	background: #222222;
	border: none;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	z-index: 1001;
	background: url("../img/boric-tos.png") top left no-repeat;
		background-size: cover;
}

#loader div {
	width: 100%;
	height: 100%;
	background: #222222;
	margin-right: .5rem;
	z-index: 1001;
	-webkit-transform-origin: center top;
	-ms-transform-origin: center top;
	transform-origin: center top;
	position: absolute;
	top: 0;
}

#loader div {
	-webkit-animation: risenfall 1.5s 1 normal forwards cubic-bezier(0.53, 0.14, 0.83, 0.67);
	animation: risenfall 1.5s 1 normal forwards cubic-bezier(0.53, 0.14, 0.83, 0.67);
}

#loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}

#loader-wrapper .loader-section {
	position: fixed;
	top: 0;
	/*width: 51%;*/
	width: 100%;
	height: 100%;
	background: #222222;
	z-index: 1000;
	-webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
	-ms-transform: translateX(0);  /* IE 9 */
	transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
}


#loader-wrapper .loader-section.section-top {
	top: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-top {
	-webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
	-ms-transform: translateY(-100%);  /* IE 9 */
	transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}


.loaded #loader {
	-webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
	-ms-transform: translateY(-100%);  /* IE 9 */
	transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.3s 0.3s ease-out;  
	transition: all 0.3s 0.3s ease-out;


}
.loaded #loader-wrapper {
	visibility: hidden;

	-webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
	-ms-transform: translateY(-100%);  /* IE 9 */
	transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.3s 0.3s ease-out;  
	transition: all 0.3s 0.3s ease-out;
}

/* Noload for mobile */
    .noload #loader-wrapper .loader-section.section-top {
        opacity: 0;
        z-index: 1; 
    }

    .noload #loader {
        opacity: 0; 
        z-index: 1;      
    }

    .noload #loader-wrapper {
        visibility: hidden;  
    }

/* JavaScript Turned Off */
.no-js #loader-wrapper {
	display: none;
}
.no-js h1 {
	color: #222222;
}

@media screen and (max-width: 990px){
	/* Noload for mobile */
    #loader-wrapper .loader-section.section-top {
        opacity: 0;
        z-index: 1; 
    }

    #loader {
        opacity: 0; 
        z-index: 1;      
    }

    #loader-wrapper {
        visibility: hidden;  
    }

}

/* end loader */