@import url("reset.css");
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,100&subset=latin,cyrillic-ext,latin-ext);

html {
	min-height: 100%;
	position: relative;
}
body {
    background: #252525 url("../images/bg.png") no-repeat left 160px;
    color: #9f9f9f;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 21px;
    font-size: 14px;
    min-height: 100%;
}
/* Typography */
h1, h2, h3, h4, h5 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: -1px;
    padding-top:5px;
}
h1 {font-size: 24px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
a{text-decoration: none; color: #196ab8;}
strong, b {font-weight: bold;}
i {font-style: italic;}
p {margin-bottom: 15px;}


#largeTriangle {
	width: 30%;
	height: 0;
	padding-bottom: 30%;
	background: url("../images/bigTriangle.png") no-repeat center center;
	position: absolute;
	bottom: 0;
	right: 0;
	max-height: 800px;
	max-width: 800px;
	z-index: 999;
}


#sideNavigation {
    position: absolute;
    width: 310px;
    height: 346px;
    top: 0;
    left: 0;
    background: url("../images/SideNav.png") no-repeat;
    z-index: 20;
}
    #logo {
        position: absolute;
        top:43px;
        left: 23px;
    }
    #sideLang {
        position: absolute;
        width: 60px;
        height: 75px;
        top: 18px;
        right: 22px;
        text-transform: uppercase;
    }
        .topLang, .bottomLang, .activeLang {
            position: absolute;
            display: block;
            width: 32px;
            height: 19px;
            text-align: center;
            line-height: 18px;
            font-size: 11px;
        }
            .topLang { top:9px; left: 5px; }
            .bottomLang { left: 5px; bottom: 8px; }
            .activeLang { right: 4px; top:28px; }
        #sideLang a { color: #7b7b7b; }
        #sideLang a:hover { color: #FFF; }
        #sideLang .activeLang a { color: #FFF; font-weight: bold;}
    .desktopNav {
        width: 160px;
        overflow: auto;
        margin:118px 0 0 23px;  
    }
        .desktopNav a {
            display: block;
            width: 100%;
            float: left;
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            padding: 7px 0;
            color: #dbdbdb;
        }
            .desktopNav a span {display: none;}
            .desktopNav a.active, .desktopNav a:hover  {color: #FFF;}
            .desktopNav a.active span {display: inline;}


.pageHeader {
    width: 100%;
    height: 240px;
    position: relative;
    overflow: hidden;
    line-height: 60px;
}
    .background {
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-position:50% 50%\9 !important;
    }
    .not-fullscreen { height: 240px; }
    .pageHeader h1 {
        position: absolute;
        display: block;
        width: 100%;
        height: 60px;
        bottom: 0;
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        color: #FFF;
        color: rgba(255,255,255,0.3);
        background: black;
        background: rgba(0,0,0,0.45);
        margin: 0;
        letter-spacing: 0;

    }
    .pageHeader h1 span {
        display: block;
        width: 1068px;
        text-align: center;
        margin: 0 0 0 126px;
    }


.contentWrap {
    width: 1073px;
    position: relative;
    z-index: 21;
    margin:20px 0 0 127px;
    overflow: auto;
    padding-bottom: 30px;
}
    .marginOffest {
        /* -6px */
        margin:14px 0 0 121px;
    }
    .highlight {
        border-left: 5px solid #1068bb;
        font-size: 16px;
        padding: 2px 0 7px 10px;
    }
        .highlight p {
            margin-bottom: 0px;
        }
    .offerWrap {
        width: 100%;
        float: left;
        overflow: auto;
        margin-bottom: 35px;
    }
    .offerList {
        width: 49%;
    }
	.box {
		float: left;
		position: relative;
		width: 25%;
		height: 0;
		padding-bottom: 25%;
	}
		.boxInner {
			position: absolute;
			left: 6px;
			right: 6px;
			top: 6px;
			bottom: 6px;
			overflow: hidden;
			background: #088be6;
		}
		.boxInner img {
			width: 100%;
		}
		.boxTitle {
			position: absolute;
			bottom: 10px;
			width: 80%;
			padding: 10px 10%;
			background: #252525;
			background: rgba(37,37,37,0.8);
			color: #fff;
			font-size: 16px;
			text-transform: uppercase;
			font-weight: 700;
			line-height: 1;
		}
		.boxTitle span {
			display: inline-block;
			width: 100%;
			font-size: 12px;
			font-weight: 300;
			text-transform: none !important;
		}
	.left {float:left;}
	.right {float: right;}
	.imageList {
		float: left;
		width: 70%;
		width: calc(100% - 270px);
	}
		.imageList img {
			width: 100%;
			float: left;
			margin-bottom: 20px;
		}
	.galleryInfo {
		width: 27%;
		width: calc(250px);
		float: right;
	}
		.galleryInfo p {
			margin-bottom: 5px;
			font-size: 14px;
		}
		.galleryInfo a {
			font-size: 16px;
			text-transform: uppercase;
		}
	#galleryButtons {
		position: absolute;
	}
    .pictureDesc {
        margin-top: -20px;
        margin-bottom: 11px;
        position: relative;
        display: block;
        float: left;
        font-style: italic;
    }
.info {
	width: 99%;
	padding: 20px 0;
	margin: 0 auto;
	overflow: auto;
	text-align: center;
}
	.info h1 {
		font-size: 16px;
		font-weight: 300;
		margin-bottom: 0;
		color: #9f9f9f;
	}
	.info h3 {
		font-size: 22px;
	}
	.info a {
		font-size: 28px;
		text-transform: uppercase;
		font-weight: 100;
	}

.leftSide {
	width: 70%;
	width: calc(100% - 425px);
	float: left;
	
}
.rightSide {
	width: 30%;
	width: calc(400px);
	overflow: auto;
	float: right;
}
.us {
	float: left;
	width: 100%;
	overflow: auto;
	margin-bottom: 25px;
}
.us img {
	float: left;
	margin-right: 10px;
}
.us i {
display: inline-block;
margin-bottom: 5px;
}

form {
	width: 100%;
	overflow: auto;
}
	#contact_form {
		margin-top:48px;
		float: left;
	}
	input[type="text"], input[type="email"] {
		width: 100%;
		height: 45px;
		border: 0;
		padding: 0;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		padding:15px 10px;
		margin-bottom: 5px;
		float: left;
		background: #353535;
		color: #a6a6a6;
		font-size: 12px;
		float: left;
	}
	textarea {
		width: 100%;
		border: 0;
		padding: 0;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		padding:15px 10px;
		height: 133px;
		background: #353535;
		resize: none;
		color: #a6a6a6;
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        float: left;
        margin-bottom: 5px;
	}
	input[type="button"], input[type="submit"] {
		width: 100%;
		border: 0;
		padding: 0;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		padding:15px 10px;
		float: left;
		text-align: center;
		background: #1068bb;
		color: #FFF;
		text-transform: uppercase;
		cursor: pointer;	
		float: left;
	}

/* Animations */
.pageHeader { animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
.contentWrap { animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; }
.noDelay { animation-delay:0; -moz-animation-delay:0; -webkit-animation-delay:0; }
.animatedFast {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

/* Responsive stuff */
@media all and (max-width: 1590px), all and (max-height: 800px) {
	#largeTriangle {
		display: none;
	}
}
@media all and (max-width: 1230px) {
    .contentWrap {
        width: 80%;
        width:calc(100% - 138px);
        margin-left:127px;
    }
    .marginOffest {
        /* -6px */
        margin:14px 0 0 121px;
    }
    .pageHeader h1 span {
        width: 80%;
        width:calc(100% - 147px);
        margin: 0 0 0 127px;
    }
}
@media all and (max-width: 800px) {
	.box {
      width: 33.3%;
      padding-bottom: 33.3%;
    }
	.imageList {
		float: left;
		width: 100%;
	}
	.galleryInfo {
		width: 100%;
		margin-bottom: 20px;
	}
	
.leftSide {
	width: 100%;
	float: left;
	
}
.rightSide {
	width: 100%;
	display: none;
}
	
}
@media all and (max-width: 600px) {
    .contentWrap {
        width: 100%;
        width:calc(100% - 40px);
        margin: 0 auto;
    }
	.box {
      width: 50%;
      padding-bottom: 50%;
    }
    .pageHeader h1 span {
        width: 100%;
        margin: 0;
    }
    
#sideNavigation {
    position: absolute;
    top: 0;
    width: 100%;
    height: 210px;
    background: none;
    z-index: 20;
    opacity: 0.5;
}
    #logo {
        position: absolute;
        top:20px;
        left: 20px;
    }
    	#logo img {
	    	height: 18px;
    	}
    #sideLang {
        position: absolute;
        left: 0;
        left: 20px;
        top: 22px;
        width: 30%;
        height: 20px;
    }
        .topLang, .bottomLang, .activeLang {
            position:static;
            float: left;
            width: 33%;
            text-align: left;
            line-height: 18px;
            font-size: 14px;
            color: red !important;
        }
        
    .desktopNav {
    	position: absolute;
    	bottom: 0;
        width: 100%;
        overflow: auto;
        margin:0;
    }
        .desktopNav a {
            display: block;
            text-align: center;
            width: 100%;
            float: left;
            font-size: 14px;
            height: 35px;
            line-height: 35px;
            border-top: 1px solid #2a5583;
        }
        .desktopNav .active span {
	        display: none !important;
        }
        .mobileNav {
        	display: none;
	        width: 100%;
	        height: 100%;
	        position: absolute;
	        background: url("../images/mobBg.jpg") center center;
        }
    
		.pageHeader {
			height: 210px;
			margin-bottom: 20px;
		}

	#menu {
		position: absolute;
		z-index: 999;
		top:30px;
		right: 20px;
		display: block;
		font-size: 10px; /* change this */
		width: 30px;
		height: auto;
	}
	
	#menu span {
	  background: #fff;
	  display: block;
	  position: relative;
	  -webkit-transform: translate3d(0,0,0);
	}
	
	#menu span,
	#menu span:before,
	#menu span:after {
	  width: 100%;
	  height: .2em;
	  -moz-transition:       all 0.4s;
	  -o-transition:         all 0.4s;
	  -webkit-transition:    all 0.4s;
	  transition:            all 0.4s;
	  -webkit-transform: translate3d(0,0,0);
	}
	
	#menu span:before,
	#menu span:after {
	  background: #fff;
	  content: " ";
	  margin-top: -.6em;
	  position: absolute;
	}
	
	#menu span:after {
	  margin-top: .6em;
	}
	
	#menu.on span {
	  background: transparent;
	}
	
	#menu.on span:before {
	  -moz-transform: rotate(45deg) translate(.5em, .4em);
	  -ms-transform: rotate(45deg) translate(.5em, .4em);
	  -o-transform: rotate(45deg) translate(.5em, .4em);
	  -webkit-transform: rotate(45deg) translate(.5em, .4em);
	  transform: rotate(45deg) translate(.5em, .4em);
	}
	
	#menu.on span:after {
	  -moz-transform: rotate(-45deg) translate(.45em, -.35em);
	  -ms-transform: rotate(-45deg) translate(.45em, -.35em);
	  -o-transform: rotate(-45deg) translate(.45em, -.35em);
	  -webkit-transform: rotate(-45deg) translate(.45em, -.35em);
	  transform: rotate(-45deg) translate(.45em, -.35em);
	} 
	.offerList {
		width: 100%;
	}
	
}
@media all and (max-width: 400px) {
	.box {
      width: 100%;
      padding-bottom: 100%;
    }
}