@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

/*====================================================================================
	CUSTOM RESET
====================================================================================*/


a { margin:0; padding:0; font-size:100%; background:transparent; text-decoration:none; color:#333; }
a:hover,
a:visited,
a:active,
a:focus { color:#333; text-decoration:none; }

table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #CCC; margin:1em 0; padding:0; }
input, select { padding:0; margin:0; vertical-align:middle; }
ul, ol { margin:0; padding:0; }
ul, ul li { list-style:none; }

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background-color:rgba(0,0,0,0.3); border-radius:2px; }
::-webkit-scrollbar-thumb { background-color:rgba(0,0,0,0.3); border-radius:2px; }

*:focus { outline:0 !important; }
:focus { outline:0 !important; }
*:disabled { background-color:#EBEBE4 !important; color:#BBB !important; text-indent:-999px; }

input, textarea, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline:0;
}

.fl { float:left !important; }
.fr { float:right !important; }
.cl { clear:left !important; }
.cr { clear:right !important; }
.cb { clear:both !important; }

.ofh { overflow:hidden !important; }
.db { display:block !important; }
.dn { display:none !important; }

.tl { text-align:left; }
.tc { text-align:center; }
.tr { text-align:right; }


/*====================================================================================
	GENERAL STYLES
====================================================================================*/

html,
body { width:100%; height: 100%; position:relative; }

html { font-size:62.5%; }
body { font-size:1.6rem; font-weight:300; background-color:#252525; color:#999; cursor:default; }

.boxed-layout { width:980px; margin:0 auto;	padding:0 0 0 0; }
.boxed-layout:after { content:''; display:table; clear:both; }
.group:after { content:''; display:table; clear:both; }
.clearfix:after { content:''; display:table; clear:both; }

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

input[type=text],textarea{-webkit-user-select:text;}

.no-select { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; }

h1,h2,h3,h4 { font-family:'Open Sans'; font-weight:400; margin:0; }
h1 { font-size:3.4rem; }
h2 { font-size:2.8rem; }
h3 { font-size:2.4rem; }
h4 { font-size:1.8rem; }

/*====================================================================================
	SITE WRAPPER
====================================================================================*/

#site-wrapper { overflow-x:hidden; }
/*
#site-wrapper { overflow-x:hidden; position:relative; -webkit-overflow-scrolling: touch; }
*/



/*====================================================================================
	BOXES
====================================================================================*/


.box { color:#FFF; margin-bottom:20px; }
.box.box-hidden { display:none; }
.box .content { position:relative; padding:15px 20px; border-radius:4px; }
.box .content ul { margin:0; padding:0; }
.box .content ul li { margin:0; padding:0; list-style:none; }
.box .content ul li a { color:inherit; font-weight:bold; }

.box .content h4 { font-size:1.4rem; font-weight:700 !important; padding-bottom:10px; border-bottom-width:2px; border-bottom-style:solid; margin-bottom:10px; }
.box.warning-box .content h4 { border-color:#753A15; }
.box.success-box .content h4 { border-color:#088019; }
.box.result-box .content h4 { border-color:#222; }
.box.error-box .content h4 { border-color:#BF0E4A; }
.box.info-box .content h4 { border-color:#0D72A7; }

.box.warning-box .content { background-color:#FFDE3C; color:#190B03; }
.box.success-box .content { background-color:#237D13; color:#FFF; }
.box.result-box .content { background-color:#EEE; color:#222; }
.box.error-box .content { background-color:#C52C2C; color:#FFF; }
.box.info-box .content { background-color:#1F8FDE; color:#FFF; }



.box .content.with-icon { padding-left:80px; }
.box .content .icon { display:none; }
.box .content.with-icon .icon { display:block; }

.box .icon { position:absolute; top:50%; left:18px; width:48px; height:48px; margin-top:-24px; float:left; }
.box.warning-box .icon svg { fill:#FFF; }
.box.success-box .icon svg { fill:#FFF; }
.box.error-box .icon svg { fill:#FFF; }
.box.info-box .icon svg { fill:#FFF; }



/*====================================================================================
	HEADER
====================================================================================*/

#main-header { height:140px; background-color:#252525; }
#main-header .column { position:relative; }
#main-header #site-logo { width:360px; height:140px; margin:0 auto; background:url('/assets/img/autoordu-logo.png') center center no-repeat; background-size:contain; overflow:hidden; text-indent:-2048px; }
#main-header .contact-info { position:absolute; top:50%; margin-top:-14px; right:15px; font-size:1.9rem; color:#DDD; }
#main-header .contact-info a { color:#CCC; }
#main-header .contact-info svg { display:inline-block; width:24px; height:24px; vertical-align:middle; fill:#FC0; }

@media only screen and (max-width : 680px) {

	#main-header #site-logo { width:210px; margin:0; float:left; }

}

@media only screen and (max-width : 380px) {

	#main-header #site-logo { width:210px; height:80px; margin:0 auto; background-position:bottom center; float:none; }
	#main-header .contact-info { position:relative; display:block; text-align:center; width:100%; top:auto; left:auto; right:auto; margin:0; }

}


/*====================================================================================
	HERO
====================================================================================*/

#hero {
	height:420px;
	background-image:url('/assets/img/tools-pattern.png');
	background-position:center center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-color:#333;

}

#hero .container { position:relative; height:100%; }
#hero .row { position:relative; height:100%; }
#hero .column { position:relative; height:100%; }
#hero .bg-image { width:580px; height:430px; position:absolute; bottom:20px; right:-20px; background-image:url('/assets/img/banner-old-timer-car-reflected.png'); background-position:center center; background-size:contain; background-repeat:no-repeat; z-index:2; }
#hero .column:after { content:''; position:absolute; top:0; left:20%; width:500px; height:100%; background-color:#000; opacity:0.2; z-index:1; }
#hero .column:after {
	-webkit-transform:skewX(-30deg);
	-ms-transform:skewX(-30deg);
	transform:skewX(-30deg);
}
#hero .column:before { content:''; position:absolute; top:0; right:60%; width:2000px; height:100%; background-color:#EEE; opacity:1; z-index:1; }
#hero .column:before {
	-webkit-transform:skewX(-50deg);
	-ms-transform:skewX(-50deg);
	transform:skewX(-50deg);
}

#hero #query-license-plate { position:absolute; display:block; left:80px; top:50%; margin-top:-120px; z-index:3; }
#hero #query-license-plate label { display:block; font:4.2rem 'Open Sans'; font-weight:300; padding:0 0 10px 20px; color:#0A0A0A; }
#hero #query-license-plate .input-field { position:relative; width:420px; padding:6px; background-color:#191919; box-shadow:15px 25px 5px rgba(0,0,0,0.3); }
#hero #query-license-plate .input-field input { font-size:4.2rem; width:100%; font-weight:bold; text-align:center; height:75px; color:#222; background-color:#FFF; padding:0 20px 0 60px; border:none; border-radius:0; text-transform:uppercase; }
#hero #query-license-plate .input-field:after { content:'TR'; color:#FFF; background-color:#0539B3; padding:0 10px; position:absolute; top:6px; left:6px; width:40px; height:75px; line-height:75px; text-align:center; }

@media only screen and (max-width :1199px) {

	#hero .bg-image { right:-120px; }

}

@media only screen and (max-width : 991px) {

	#hero #query-license-plate { left:20px; }
	#hero #query-license-plate .input-field { width:320px; }
	#hero .bg-image { width:540px; height:400px; bottom:30px; right:-160px; }

}

@media only screen and (max-width : 680px) {

	#hero { height:640px; }
	#hero .bg-image { width:440px; height:380px; bottom:10px; right:-50px; z-index:5; }
	#hero #query-license-plate { width:100%; top:60px; left:0; margin:0; padding:0 40px; }
	#hero #query-license-plate .input-field { width:100%; }
}

/*====================================================================================
	SERVICE - CATEGORIES
====================================================================================*/

#service-categories .box { position:relative; top:-50px; overflow:hidden; margin-bottom:20px; background-color:#151515; border-bottom:4px solid #FC0; box-shadow:0 5px 10px rgba(0,0,0,0.2); }
#service-categories .box h3 { position:relative; height:65px; line-height:65px; color:#222; background-color:#FC0; text-align:center; z-index:1; }
#service-categories .box img { width:100%; }

#service-categories .box .content { position:relative; height:175px; z-index:2; }
#service-categories .box .content .info { font-size:1.5rem; position:absolute; bottom:0; left:0; padding:15px; }
#service-categories .box .content .info p { color:#999; text-shadow:0 1px 2px rgba(0,0,0,0.5); padding:0; margin:0; }

#service-categories .box .bg { width:100%; height:175px; position:absolute; top:65px; left:0; background-position:top right; background-size:120%; background-repeat:no-repeat; }
#service-categories .box .bg { transition: all 0.3s ease-in-out; }

#service-categories .box .bg.oil { background-image:url('/assets/img/service-oil.jpg'); }
#service-categories .box .bg.filter { background-image:url('/assets/img/service-filter.jpg'); background-position:top left; }
#service-categories .box .bg.other { background-image:url('/assets/img/service-antifreeze.jpg'); background-position:top left; }



#service-categories .box .bg:after { content:''; opacity:0.9; position:absolute; bottom:0; left:-140px; width:240px; height:300px; background-color:#151515; }
#service-categories .box .bg:after {
	-webkit-transform:skewX(20deg);
	-ms-transform:skewX(20deg);
	transform:skewX(20deg);
}
#service-categories .box:hover .bg { -webkit-filter:blur(8px); filter:blur(8px); background-position:top left; }
#service-categories .box:hover .bg.filter { background-position:top right; }
#service-categories .box:hover .bg.other { background-position:top right; }

#service-categories .box.reservation { border-bottom-color:#FFF; }
#service-categories .box.reservation h3 { color:#FFF; font-weight:300; background-color:#EC6400; }
#service-categories .box.reservation .bg { background-color:#D24F00; }
#service-categories .box.reservation .bg:after { opacity:0.6; }
#service-categories .box.reservation:hover .bg { -webkit-filter:blur(0px); filter:blur(0px); }

#service-categories .box.reservation .content { padding-top:15px;  }
#service-categories .box.reservation .content .line { padding:0 15px 10px 15px; }
#service-categories .box.reservation .content .line input { width:100%; padding:9px 14px; background-color:#FFF; border:none; border-radius:4px; color:#222; }
#service-categories .box.reservation .content .line input[type=submit] { background-color:#09F; color:#FFF; font:1.8rem 'Open Sans'; font-weight:200; }

@media only screen and (max-width : 440px) {

	#service-categories .column { width:100%; }

}




/*====================================================================================
	GALLERY SECTION
====================================================================================*/

#photo-gallery { padding:50px 0; }
#photo-gallery .col-md-3 { margin-bottom:30px; }
#photo-gallery .photo { position:relative; cursor:pointer; }
#photo-gallery .photo a { display:block; position:relative; width:100%; padding-top:calc(100% * 360 / 480); overflow:hidden; }
#photo-gallery .photo a img { transition: all 120ms linear; position:absolute; top:50%; left:50%; width:100%; box-shadow:0 5px 10px rgba(0,0,0,0.2); }
#photo-gallery .photo a img {
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}
.no-touchevents #photo-gallery .photo:hover a img {
	-webkit-transform:translate(-50%, -50%) scale(1.3);
	-ms-transform:translate(-50%, -50%) scale(1.3);
	transform:translate(-50%, -50%) scale(1.3);
	-webkit-filter:blur(5px);
	filter:blur(5px);
}

.no-touchevents #photo-gallery .photo .overlay { display:none; }
.no-touchevents #photo-gallery .photo:hover .overlay { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.6); }
.no-touchevents #photo-gallery .photo:hover .overlay:after { content:''; position:absolute; top:50%; left:50%; width:40px; height:40px; border:4px solid #DDD; border-radius:50%; margin-left:-20px; margin-top:-20px; }
.no-touchevents #photo-gallery .photo:hover .overlay:before { content:''; position:absolute; top:50%; left:50%; width:8px; height:24px; background-color:#DDD; border-radius:0 0 2px 2px; margin-left:-4px; }
.no-touchevents #photo-gallery .photo:hover .overlay:before {

	-webkit-transform-origin:0 0;
	-ms-transform-origin:0 0;
	transform-origin:0 0;

	-webkit-transform:translate(14px, 14px) rotate(-45deg);
	-ms-transform:translate(14px, 14px) rotate(-45deg);
	transform:translate(14px, 14px) rotate(-45deg);

}

@media (max-width : 480px) {

	#photo-gallery .col-md-3 { width:100%; }

}


#cesur-photo-gallery { display:none; position:fixed; top:0; left:0; bottom:0; right:0; background-color:rgba(0,0,0,0.8); z-index:99; }
#cesur-photo-gallery,
#cesur-photo-gallery .cesur-photo-image { transition: all 400ms linear; }

#cesur-photo-gallery .cesur-photo-image { position:absolute; top:50%; left:50%; width:0; height:0; }
#cesur-photo-gallery .cesur-photo-image {
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;

	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);

}

#cesur-photo-gallery a.cesur-photo-close { display:block; position:absolute; top:20px; right:20px; width:32px; height:32px; }
#cesur-photo-gallery a.cesur-photo-close {
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#cesur-photo-gallery a.cesur-photo-close:after { content:''; background-color:#AAA; position:absolute; top:12px; left:0;  width:32px; height:8px; }
#cesur-photo-gallery a.cesur-photo-close:before { content:''; background-color:#AAA; position:absolute; top:0; left:12px; width:8px; height:32px; }
#cesur-photo-gallery a.cesur-photo-close:hover:after,
#cesur-photo-gallery a.cesur-photo-close:hover:before { background-color:#FC0; }



#cesur-photo-gallery.open { display:block; }
#cesur-photo-gallery.open .cesur-photo-image { width:calc(100% - 100px); height:calc(100% - 100px); }
#site-wrapper.gallery-open { filter:blur(15px); }




/*====================================================================================
	QUERY RESULT SECTION
====================================================================================*/

#query-result { padding:50px 0; background-color:#FFF; }
#query-result {

	background-image:url('/assets/img/tools-pattern.png');
	background-position:center center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-color:#333;
}

#query-result h2 { font-size:2.1rem; color:#AAA; font-weight:300; margin-bottom:20px; margin-left:20px; text-shadow:0 2px 2px rgba(0,0,0,0.5); }
#query-result .table-view { color:#222; }
#query-result .box { margin:0; }


/*====================================================================================
	CONTACT SECTION
====================================================================================*/

#contact-section { position:relative; height:720px; background-color:#222; }
#contact-section .map-view { width:100%; height:100%; }
#contact-section .map-view #google-map { width:100%; height:100%; background-color:#222; }

#contact-section #contact-info { position:absolute; bottom:80px; left:50%; width:calc(100% - 160px); max-width:960px; padding:30px; background-color:#FFF; color:#222; box-shadow:0 3px 3px rgba(0,0,0,0.2); }
#contact-section #contact-info {
	transform:translateX(-50%);
}
#contact-section #contact-info h2 { text-align:center; font-size:3.6rem; font-weight:300; padding:0 0 20px 0; margin:0 0 20px 0; border-bottom:2px solid rgba(0,0,0,0.1); }
#contact-section #contact-info .left,
#contact-section #contact-info .right { width:calc(50% - 40px); }
#contact-section #contact-info .left { float:left; }
#contact-section #contact-info .right { float:right; }
#contact-section #contact-info .line { position:relative; min-height:180px; }
#contact-section #contact-info .line i { position:absolute; display:block; top:0; left:0; width:100%; height:100%; opacity:0.1; z-index:1; }
#contact-section #contact-info .line i svg { width:100%; height:100%; fill:#000; }
#contact-section #contact-info .line span { display:block; position:relative; z-index:2; padding:60px 0 0 0; font:4.2rem 'Open Sans'; font-weight:300; text-align:center; }
#contact-section #contact-info .right .line span { font-size:2.6rem; }


@media (max-width : 960px) {

	#contact-section #contact-info .line span { font-size:3.2rem; }
	#contact-section #contact-info .right .line span { font-size:2.2rem; }

}

@media (max-width : 768px) {

	#contact-section { height:900px; }
	#contact-section #contact-info { width:calc(100% - 60px); bottom:30px; }
	#contact-section #contact-info .left,
	#contact-section #contact-info .right { float:none; width:100%; }
	#contact-section #contact-info .line { padding:20px 0; min-height:auto; text-align:center; }
	#contact-section #contact-info .line i { position:relative; display:block; width:100%; height:64px; margin-bottom:15px; }
	#contact-section #contact-info .line span { font-size:3.2rem; padding:0 0 0 20px; display:inline-block; text-align:center; }
	#contact-section #contact-info .right .line span { font-size:2.2rem; }

}



/*====================================================================================
	TABLE VIEW
====================================================================================*/

.table-view h4 { font:21px 'Open Sans'; font-weight:700; color:#222; line-height: 24px; padding:20px 0; margin:0; }

/* FLEX TABLE STYLES
--------------------------------------------------------------------------------------------------*/

.table-elem { width:100%; font-size:16px; }

.table-elem .table-row { height:40px; overflow:hidden; width:100%; display:flex; flex-flow:row; flex-wrap:wrap; }
.table-elem .table-row.heading { height:52px; background-color:#222 !important; color:#FFF !important; }
.table-elem .table-row.heading .table-column { height:52px; line-height:52px; padding:0 10px; }
.table-view .table-row:after { content:''; display:table; clear:both; }

.table-elem .table-row:nth-of-type(even) { background-color:#FFF; }
.table-elem .table-row:nth-of-type(odd) { background-color:#EEE; }
.table-elem .table-row.selected { background-color:#AEE4F1 !important; }
.no-touchevents .table-elem .table-row:hover { background-color:#FFFFD3; }

.table-elem .table-row .table-column { height:40px; padding:8px 10px 0 10px; flex:1 1 120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-elem .table-row .table-column:after { content:''; display:table; clear:both; }
.table-elem .table-row .table-column:last-child { text-align:right; }
.table-elem .table-row .table-column:first-child { text-align:left; }

.table-elem .table-row .table-column.fixed { flex:0 1 120px !important; }
.table-elem .table-row .table-column.hidden { display:none !important; }

.table-elem .table-row .table-column.actions svg { fill:#222; width:24px; height:24px; margin:0 5px; vertical-align:middle; border-radius:4px; }
.table-elem .table-row .table-column.actions .red svg { fill:#C00; width:21px; height:21px; }
.table-elem .table-row .table-column.actions .green svg { fill:#62BB00; width:21px; height:21px; }


.table-elem .table-row-preview { background-color:#D1F6FF; padding:15px; }
.table-elem .table-row-preview dl { margin-bottom:0; }
.table-elem .table-row-preview dl dt { float:left; clear:both; width:150px; padding:5px 10px 5px 0; background-color:#AFC4CA; border-radius:4px; text-align:right; }
.table-elem .table-row-preview dl dd { margin-left:154px; padding:5px 10px 5px 10px; background-color:#FFF; border-radius:4px; margin-bottom:4px; text-overflow:ellipsis; overflow:hidden; }
.table-elem .table-row-preview dl dd svg { fill:#222; width:24px; height:24px; margin:0 5px; vertical-align:middle; border-radius:4px; }
.table-elem .table-row-preview dl dd .red svg { fill:#C00; width:21px; height:21px; }
.table-elem .table-row-preview dl dd .green svg { fill:#62BB00; width:21px; height:21px; }


/* RESPONSIVE TABLE FIELDS
--------------------------------------------------------------------------------------------------*/

@media (max-width:900px){
	.table-elem .table-row .table-column { display:none; }
	.table-elem .table-row .table-column:last-child,
	.table-elem .table-row .table-column.sm { display:block; }
}

@media (max-width:480px){
	.table-elem .table-row .table-column,
	.table-elem .table-row .table-column.sm { display:none; }
	.table-elem .table-row .table-column:last-child,
	.table-elem .table-row .table-column.ss { display:block; }
}


/*====================================================================================
	ORDER HISTORY
====================================================================================*/

.order-history span.sales-status { display:inline-block; padding:2px 5px; border-radius:4px; text-shadow:0 1px 1px rgba(0,0,0,0.5); width:100%; max-width:100px; text-align:center; vertical-align:top; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.order-history span.sales-status.red { background-color:#C00; color:#FFF; }
.order-history span.sales-status.green { background-color:#62BB00; color:#FFF; }
.order-history span.sales-status.orange { background-color:#FFA500; color:#FFF; }
.order-history span.sales-status.blue { background-color:#00C4FF; color:#FFF; }
.order-history span.sales-status.yellow { background-color:#F3E43B; color:#FFF; }
.order-history span.sales-status.gray { background-color:#A2A2A2; color:#FFF; }


/*====================================================================================
	PAGINATOR
====================================================================================*/

.paginator { font-size:0; float:right; margin-bottom:20px;  }
.paginator a { display:inline-block; font-size:1.6rem; margin:0 0 0 5px; min-width:42px; text-align:center; padding:12px 12px; background-color:#EEE; color:#222; border-radius:4px; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.no-touchevents .paginator a:hover { background-color:#DDD }
.paginator a.current { background-color:#FC0 !important; }
.paginator a.disabled { cursor:default; background-color:transparent !important; min-width:auto; padding:12px 4px; color:#BBB !important; text-shadow:none !important; }
.paginator a svg { position:relative; top:3px; width:16px; height:16px; fill:#333; }
.paginator form { display:inline-block; vertical-align:top; }
.paginator input[type=text] { display:inline-block; color:#222; font-size:1.6rem !important; margin:0 0 0 5px; text-align:center; width:60px; padding:10px 12px; border:2px solid #FC0; border-radius:4px; vertical-align:top; background-color:#FC0; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.paginator input[type=text]:focus { border:2px solid #EEE; background-color:#FFF; }
.paginator input[type=submit] { display:none; }
.paginator.right { float:right; padding-bottom:20px; text-align:center; }

@media (max-width:768px){

	.paginator.right { width:100%; float:none; }

}


/*====================================================================================
	PRELOADER ANIMATION
====================================================================================*/


@-webkit-keyframes spin {
	0% {
		-webkit-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}
@keyframes spin {
	0% {
		-webkit-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

.preloader { width:100%; height:120px; position:relative; }
.loading {
	position:absolute;
	top:50%; left:50%;
	margin-top:-24px;
	margin-left:-24px;
	border-radius: 50%;
	width:48px;
	height:48px;
	border:4px solid rgba(0,0,0,0.3);
	border-top-color:#FC0;
	-webkit-animation: spin 1s infinite linear;
	animation: spin 1s infinite linear;
}


/*====================================================================================
	MODAL
====================================================================================*/

#modal { z-index:999; display:none; position:fixed; top:0; left:0; right:0; bottom:0; }
#modal .overlay { position:absolute; z-index:3; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.5); }
#modal .modal-dialog { display:none; z-index:2; margin-top:0; margin-bottom:0; height:100vh; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:center;  -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; }
#modal .modal-dialog .white-area { display:block; z-index:4; padding:20px; background-color:#FFF; margin:0 auto; border-radius:10px; }
#modal .modal-dialog h3 { text-align:center; }


/*====================================================================================
	FOOTER
====================================================================================*/

#main-footer {

	padding:50px 0;
	background-color:#222;
	color:#AAA;
	text-align:right;

}
#main-footer p { padding:0; margin:0; }
#main-footer b { font:3.2rem 'Open Sans'; font-weight:300; color:#FC0; padding:0; margin:0; }
#main-footer span.credit { font-size:1.3rem; }
#main-footer span.credit a,
#main-footer span.credit a:active,
#main-footer span.credit a:visited,
#main-footer span.credit a:hover,
#main-footer span.credit a { color:#FFF; text-decoration:none; }



/*====================================================================================
	MEDIA QUERIES
====================================================================================*/

@media only screen and (min-width : 320px) {

}

@media only screen and (min-width : 480px) {

}

@media only screen and (min-width : 768px) {

}

@media only screen and (min-width : 992px) {

}

@media only screen and (min-width : 1200px) {

}


/*
@media only screen and (max-width : 1200px) {}
@media only screen and (max-width : 992px) {}
@media only screen and (max-width : 768px) {}
@media only screen and (max-width : 480px) {}
@media only screen and (max-width : 320px) {}
*/