@charset "utf-8";
@-ms-viewport { width: device-width;}
@-o-viewport { width: device-width;}
@viewport { width: device-width;}

@viewport {
	width: auto; // auto | device-width | length | percentage

	// 'width' sets both max and min-width. It's a shorthand descriptor.
	max-width: auto;
	min-width: auto;

	// 'zoom' equates to 'initial-scale' in meta tag.
	// Values of 1.0 or 100% mean no zoom.
	zoom: auto; // auto | number | percentage

	max-zoom: 5; // Largest allowed zoom factor.
	min-zoom: 0.25; // Smallest allowed zoom factor.

	// Can the zoom factor be changed by user interaction?
	// Equates to 'user-scalable' in meta tag.
	user-zoom: zoom; // fixed | zoom

	// Lock orientation or leave to auto.
	orientation: auto; // auto | portrait | landscape
	
}
	
/* ==============================================================================================
                                    Common Styles
================================================================================================= */
@font-face {
  font-family: 'FaWebFont';
  src: url('../font/fa-webfont.woff2') format('woff2'),
       url('../font/fa-webfont.woff') format('woff'),
       url('../font/fa-webfont.ttf') format('truetype');
}




html,html a {
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;	
}

body {
	background-color:#ffffff;
	font-family: 'Roboto', arial, sans-serif;
	height:auto;
	width:100%;
}

/*  floating header */
.nav-up {top: -80px;}
.nav-down { top: 0;display:block;}
header {
background-color: #ffffff;
height: 60px; position: fixed; top: 0;
transition: top 0.2s ease-in-out;
width: 100%; overflow:hidden; z-index:999;
line-height:1;
}
header h1 {
font-family: 'Montserrat', sans-serif;
color:#333333; padding:0; font-weight:normal; text-align:center;
}
header h1 a {color:#333333; text-decoration:none;}
header h1 a:hover {color:#212121;}
header h1 {	font-size:20px; margin:18px 45px;}
/* .totop { position:absolute; width:50px; margin:16px 10px; right:0;} */
/*ending - floating header*/
.container { margin-top:60px; margin-bottom:0;background-color:#dedede; overflow:auto;}
footer { width:100%; float:left; overflow:hidden;}
.col1, .col2, .col3, .col4 {float:left;}
.col1 img, .col2 img, .col3 img, .col4 img {width:100%;}
.wrapper {float:left; width:100%; clear:both;}

h3 { font-size:30px; font-weight:100; line-height:1.4;}
h4 { font-size:30px; font-weight:100; line-height:1.4;}
p {font-size:30px; font-weight:400; line-height:1.5;}


/* Home rollover animation */

.singlelist {	overflow: hidden;}
.singlelist img { width:100%; display:inline; }
.singlelist {position:relative; line-height:0;}
.singlelist a {display:block;}
.singlelist p a {text-decoration:none; color:#b8bfbf;}
.singlelist .capover {background-color:#000000; color:#b8bfbf;}
.singlelist .capover { margin:0; padding:0; font-size:14px; position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; opacity:0; display:block;opacity: 0; display: block; 
-webkit-transition: all .2s ease-out; 
-moz-transition: all .2s ease-out; 
-o-transition: all .2s ease-out; transition: all .2s ease-out;}
.singlelist:hover .capover { opacity:0.9;}
.singlelist:hover .capoverdes { bottom: 15%;}
.capoverdes {
	position: absolute;
	display: block;
	left: 10%;
	right: 10%;
	bottom: 10%;
	top:10%;
	line-height: 1.6 !important;
	text-align: left;
	-webkit-transition: all .2s ease-out; 
	-moz-transition: all .2s ease-out; 
	-o-transition: all .2s ease-out; transition: all .2s ease-out;
}
.capoverdes h5 {
	font-size:30px;	
	text-align:left;
	line-height:125%;
	/*margin-left:2% !important; */
	color: #efefef;
	font-weight:100;
	/*opacity: .50;*/
}
.capoverdes p {
	font-size:18px;	
	text-align:left;
	line-height:130%;
	color: #999999;
	margin-top:10px;
	/*margin-left:2% !important; */
	/*opacity: .50;*/
}

/* End - Home rollover animation */
.titlelight {background-color:#d8d8d8; text-align:center; padding:40px 0; color:#333333;} 
.titledark {background-color:#333333; text-align:center; padding:40px 0; color:#d8d8d8;}
.titledark span, .titlelight span {margin:0 30px;}
.titledark h4, .titlelight h4 {font-weight:300; padding:0 8%;}

.detailtext {padding:50px 0;}
.detailtext h4 {font-weight:300;}
.detailtext h3 {font-weight:300;}
.detailtext .left { float:left; margin:0 2% 30px 4%; width:26%;}
.detailtext .right { float:left; margin:0 4% 30px 2%; width:60%;}
.detailtext .equal {float:left; margin:0 3% 30px 3%; width:42%;}
.detailtext p { font-size:16px; margin-bottom:30px;}
.detailtext .left h4 { margin-bottom:0px; padding-bottom:0;} 
.detailtext .right h4 { margin-bottom:20px; padding-bottom:0;}

.footerdesleft { background-color:#191919; min-height:320px;}
.footerdesrit { background-color:#262626; min-height:320px;}
.footerdesleft h4, .footerdesrit h4 { margin-left: 8%; margin-top:5%; color:#bbbbbb; }
.footerdesleft p, .footerdesrit p { margin-left: 8%; margin-top:5%; color:#999999; font-size:16px; float:left; margin-right:10%; }
.footerdesleft p span, .footerdesrit p span {font-size:18px; font-weight:500; color:#efefef;}
.footerdesleft a, .footerdesrit a {text-decoration:none; color:#cccccc;}
.footerdesleft a:hover, .footerdesrit a:hover {text-decoration:none; color:#eeeeee;}

.social p a {color:#aaaaaa; margin:0 12px; padding:3px 0; text-decoration:none; border-bottom:1px dotted #999999;}
.social p a:hover {color:#dddddd; border-bottom:1px dotted #666666; }
footer {background-color:#4d4d4d; padding:40px 0; color:#dddddd; font-size:14px; line-height:1;}
footer p { font-size:14px;}
/* ==============================================================================================
                                    Responsive Styles
================================================================================================= */
/* ------------------------------ Above 768 -------------------------------------*/
@media (min-width: 768px) {
.container { margin-left:40px;margin-right:40px; }
.col1 { width:100%;}
.col2 {width:50%;}
.col3 {width:33.3%;}
.col4 {width:25%;}

.detailtext {padding:50px 0;}
.detailtext .left { float:left; margin:0 2% 30px 4%; width:26%;}
.detailtext .right { float:left; margin:0 4% 30px 2%; width:60%;}
.detailtext .equal {float:left; margin:0 3% 30px 3%; width:42%;}
.detailtext p { font-size:16px;}
.detailtext .left h3 { margin-bottom:0px; padding-bottom:0;} 
.detailtext .right h4 { margin-bottom:20px; padding-bottom:0;}


.social {float:left; width:40%; padding-left:3%;}
.copyr {float:right; width:40%; text-align:right; padding-right:3%; margin-top:0;}

.homeintro h4 {max-width:780px; margin:0 auto 20px auto; padding:0 7%;}
.homeintro p { font-size:20px; max-width:780px; margin:0 auto 20px auto; font-weight:300; padding:0 7%;}
}
/* ------------------------------ Below 768 -------------------------------------*/
@media (max-width: 767px) {
.container { margin-left:14px;margin-right:14px; }
.col1 { width:100%;}
.col2 {width:100%;}
.col3 {width:100%;}
.col4 {width:100%;}

.detailtext {padding:50px 0;}
.detailtext .left { float:left; margin:0 8% 30px 8%; width:82%;}
.detailtext .right { float:left; margin:0 8% 30px 8%; width:82%;}
.detailtext .equal {float:left; margin:0 8% 30px 8%; width:82%;}
.detailtext p { font-size:16px;}
.detailtext .left h3 { margin-bottom:0px; padding-bottom:0;} 
.detailtext .right h4 { margin-bottom:20px; padding-bottom:0;}

.social {float:left; width:82%; padding:0 8%; text-align:center;}
.copyr {float:left; width:82%; text-align:center; padding:0 8%; margin-top:20px;}

.homeintro h4 {max-width:780px; margin:0 auto 20px auto; padding:0 7%;}
.homeintro p { font-size:20px; max-width:780px; margin:0 auto 20px auto; font-weight:300; padding:0 7%;}

}