/* Common Style */
.container-wrap{ width: 100%;}

h1 { font-family: 'RobotoLight', Arial, serif; font-weight: 400; color: #FFF; }
h2 { font-family: 'RobotoLight', Arial, serif; font-size: 30px;}
h3 { font-family: 'RobotoLight', Arial, serif; font-size: 24px; padding: 0; margin: 0;}
p{ font-family: 'RobotoLight', Arial, serif; font-size: 17px; line-height: 180%;}

/* Cover Style */
#cover{ background-image: url(../images/bg_hero_wide.jpg); background-size: cover; background-position: center center; position: relative;}
#underconstruction{ position: absolute; top: 0; right: 0; z-index: 1; text-align: right;}

/* About Style */
#about{ background-color:#455A64; padding-top: 48px; padding-bottom: 48px; color: #FFF;}

#plugins{ background-color: #F4F4F4; padding-top: 48px; padding-bottom: 48px;}

/* Contact Style */
#contact{ padding-top: 48px; padding-bottom: 48px;}

/* Disclaimer Style */
#disclaimer{ background-color: #333; color: #CCC; font-size: 12px; padding: 15px 0; }

#lego{ background-image: url(../images/bg_lego.jpg); background-position: center center; position: relative;}


.icon-wrap{ width: 100px; height: 100px; margin: 0 auto 24px;}
.icon-wrap-circle{ width: 150px; height: 150px; padding: 40px; margin: 0 auto; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;}

.text-center{ text-align: center;}


input, textarea{ width: 100%; padding: 0; margin: 0; border: none; background: none; font-family: "RobotoLight", Arial, Helvetica, sans-serif; font-size: 18px; color: #F4F4F4;}
textarea:focus, input:focus{outline: 0;}

.btn { font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 18px;}
.btn-white{ background-color: #FFF; color: #999; transition-duration: 0.5s; border: solid 1px #EEE;}
.btn-white:hover, .btn-white:focus{ background-color: #FFF; color: #666; transition-duration: 0.5s; border: solid 1px #AAA;}

.btn-orange{ background-color: #FFC107; color: #FFF; transition-duration: 0.5s }
.btn-orange:hover, .btn-orange:focus{ background-color: #FFA100; color: #FFF; transition-duration: 0.5s}

.btn-blue{ background-color: #03A9F4; color: #FFF; transition-duration: 0.5s }
.btn-blue:hover, .btn-blue:focus{ background-color: #028FCC; color: #FFF; transition-duration: 0.5s}

.btn-red{ background-color: #D20005; color: #FFF; transition-duration: 0.5s }
.btn-red:hover, .btn-red:focus{ background-color: #D20005; color: #FFF; transition-duration: 0.5s}

	/** Input Styles **/
	.input-wrap{ border: solid 1px #666666; background-color:#333333; padding: 12px; margin-bottom: 20px; border-radius: 5px; position: relative;}
	.input-wrap.error{ border: solid 1px #FC0!important;}
	.input-wrap.focus{ border: solid 1px #CCC!important;}
	
	.tooltip { font-family: 'RobotoLight', Arial, serif; font-size: 14px; position: absolute; right: 15px; top: -15px;}
	.tooltip-inner{ padding: 4px 12px; background-color: #FC0;}
	.tooltip.top .tooltip-arrow { border-top-color: #FC0; border-width: 9px 9px 0; bottom: -3px; left: 50%; margin-left: -9px;}
	.tooltip.in { opacity: 1; filter: alpha(opacity=100);}
	
	.padding-xs{ padding-top: 10px; padding-bottom: 10px; }
	.padding-sm{ padding-top: 20px; padding-bottom: 20px;}
	.padding-md{ padding-top: 30px; padding-bottom: 30px;}
	.padding-lg{ padding-top: 40px; padding-bottom: 40px;}
	.padding-xl{ padding-top: 70px; padding-bottom: 70px;}

	.padding-side-xs{ padding-left: 10px; padding-right: 10px; }
	.padding-side-sm{ padding-left: 20px; padding-right: 20px;}
	.padding-side-md{ padding-left: 30px; padding-right: 30px;}
	.padding-side-lg{ padding-left: 40px; padding-right: 40px;}
	
	.text-white{ color: #FFF}
	.text-lightgrey{ color: #CCC}
	.text-yellow{ color: #FDD000}
	.text-black{ color: #000}
	.text-darkyellow{ color: #CAA90D}
	.text-blue{ color: #0C0}
	.text-red{ color: #D20005}
	.text-green{ color: #0C0}
	
	.bg-red{ background-color: #D20005;}
	.bg-blue{ background-color: #03A9F4;}
	.bg-green{ background-color: #090;}
	.bg-grey{ background-color: #607D8B;}
	.bg-darkgrey{ background-color: #455A64;}
	
	.bg-white{ background-color: #FFF;}
	.bg-orange{ background-color: #FFC107;}
	
	.bg-puzzle{background-image: url(../images/bg_puzzle_grey.gif);}


/* Mobile Screen */
@media (max-width: 767px) {
	#cover img{ width: 75%; height: 75%;}
	#underconstruction img{ width: 50%; height: 50%;}
	
	h2 { font-size: 24px;}
	h3 { font-size: 18px;}
	p{ font-size: 14px; line-height: 180%;}
	.btn { font-size: 14px;}
	
	.padding-xs{ padding-top: 5px; padding-bottom: 5px; }
	.padding-sm{ padding-top: 10px; padding-bottom: 10px;}
	.padding-md{ padding-top: 15px; padding-bottom: 15px;}
	.padding-lg{ padding-top: 20px; padding-bottom: 20px;}
	.padding-xl{ padding-top: 35px; padding-bottom: 35px;}
}