/*-----------------------------------------------------------------------------------

	Theme Name: TiraTs
	Author: TiraTs WebTeam
	Version: 1.0
	
	- 1.Basic
	- 2.Color & Background Color & Background Image
	- 3.Basic Layout Styles
	- 4.align & float
	- 5.margin & padding
	- 6.Sections
	- 7.Columns & Grids - 5column
	- 8.img

-----------------------------------------------------------------------------------*/

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,300,700);
@import url(http://fonts.googleapis.com/css?family=Dosis:300,400,700);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300');
@import url(/css/font.css);

/* ----------------------------------------------------------------
	1.Basic
-----------------------------------------------------------------*/

/*
html, body { height:100%; }
*/

body {
	font-family: 'Roboto', sans-serif;
	/*font-family: 'Lato', sans-serif;
     font-family: 'Nanum Gothic', sans-serif; */
    font-size: 14px;
    font-weight: 300;
    color: #444;
}

header, section, nav, article, aside, footer { display: block; }

a img {border: none;}
img {max-width: 100%;}
iframe { border: none !important;}

dl, dt, dd, ol, ul, li {margin:0; padding:0;}

.clear {clear:both; display:block; font-size:0px; height:0px; line-height:0; width:100%; overflow:hidden;}

::selection {background:#1ABC9C; color:#FFF; text-shadow:none;}
::-moz-selection {background:#1ABC9C; color:#FFF; text-shadow: none;}/* Firefox */
::-webkit-selection {background:#1ABC9C; color:#FFF; text-shadow: none;}/* Safari */

:active,:focus { outline: none !important; }

.hidden { display: none !important; }
.nothidden { display: block !important; }
.inline-block {
	float: none !important;
	display: inline-block !important;
}

.bold {font-weight: bold;}
small { color: #aaa; }


/* ----------------------------------------------------------------
	2.Color & Background Color & Background Image
-----------------------------------------------------------------*/

/*===== COLOR =====*/

.color-white {color:#fff;}
.color-white2 {color:#ccc;}
.color-tirablue {color:#0098c5;}
.color-blue {color:#3498DB;}
.color-bluegreen {color:#32c5d2;}
.color-green {color:#1ABC9C;}
.color-red {color:#eb5d68;}
.color-orange {color:#FF6B57;}
.color-purple {color:#b771b0;}
.color-purple2 {color:#5D4157;}

/*===== Background COLOR =====*/

.bg-white {background-color:#fff;}
.bg-yellow {background-color: #f7e674;}
.bg-whiteyellow {background-color: #f6fad9;}
.bg-tirablue {background-color:#0098c5;}
.bg-blue {background-color:#3498DB;}
.bg-bluegreen {background-color:#32c5d2;}
.bg-darkblue {background-color:#235d82;}
.bg-green {background-color:#1ABC9C;}
.bg-foundrygreen {background-color:#47b475;}
.bg-red {background-color:#eb5d68 !important;}
.bg-warmerred {background-color: #d7403e;}
.bg-orange {background-color:#FF6B57;}
.bg-orange2 {background-color: #f68864;}
.bg-purple {background-color:#b771b0;}
.bg-purple2 {background-color:#5D4157;}
.bg-gray1 {background-color:#f9f9f9;}
.bg-gray2 {background-color:#666;}
.bg-gray3 {background-color:#333;}
.bg-mauve {background-color:#bfaed2;}
.bg-mauve {background-color:#bfaed2;}
.bg-darkbrown {background-color:#2c140d;}


/*===== Background Image =====*/

.bgi-gray1white { background: url('/img/parallax/bgi-gray1white.gif') center ; background-repeat: repeat-y; }
.bgi-gray2white { background: url('/img/parallax/bgi-gray2white.gif') center ; background-repeat: repeat-y; }
.bgi-gray3white { background: url('/img/parallax/bgi-gray3white.gif') center ; background-repeat: repeat-y; }


/* ----------------------------------------------------------------
	4.align & float
-----------------------------------------------------------------*/

.tright { text-align: right !important; }
.tleft { text-align: left !important; }
.fright { float: right !important; }
.fleft { float: left !important; }
.fnone { float: none !important; }
.center { text-align: center !important; }
.divcenter {
	position: relative !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.vertical-middle {height: auto !important; left: 0;}


/* ----------------------------------------------------------------
	5.margin & padding
-----------------------------------------------------------------*/

/* margin */

.allmargin { margin: 50px !important; }
.leftmargin { margin-left: 50px !important; }
.rightmargin { margin-right: 50px !important; }
.topmargin { margin-top: 50px !important; }
.bottommargin { margin-bottom: 50px !important; }

.allmargin-sm { margin: 30px !important; }
.leftmargin-sm { margin-left: 30px !important; }
.rightmargin-sm { margin-right: 30px !important; }
.topmargin-sm { margin-top: 30px !important; }
.bottommargin-sm { margin-bottom: 30px !important; }

.allmargin-xs { margin: 15px !important; }
.leftmargin-xs { margin-left: 15px !important; }
.rightmargin-xs { margin-right: 15px !important; }
.topmargin-xs { margin-top: 15px !important; }
.bottommargin-xs { margin-bottom: 15px !important; }

.allmargin-lg { margin: 80px !important; }
.leftmargin-lg { margin-left: 80px !important; }
.rightmargin-lg { margin-right: 80px !important; }
.topmargin-lg { margin-top: 80px !important; }
.bottommargin-lg { margin-bottom: 80px !important; }

@media only screen and (max-width: 767px) {
	.allmargin { margin: 30px !important; }
	.leftmargin { margin-left: 30px !important; }
	.rightmargin { margin-right: 30px !important; }
	.topmargin { margin-top: 30px !important; }
	.bottommargin { margin-bottom: 30px !important; }
	.topmargin-m { margin-top: 30px !important; }

	.allmargin-sm { margin: 20px !important; }
	.leftmargin-sm { margin-left: 20px !important; }
	.rightmargin-sm { margin-right: 20px !important; }
	.topmargin-sm { margin-top: 20px !important; }
	.bottommargin-sm { margin-bottom: 20px !important; }
	.topmargin-sm-m { margin-top: 20px !important; }
	
	.allmargin-xs { margin: 10px !important; }
	.leftmargin-xs { margin-left: 10px !important; }
	.rightmargin-xs { margin-right: 10px !important; }
	.topmargin-xs { margin-top: 10px !important; }
	.bottommargin-xs { margin-bottom: 10px !important; }	

	.allmargin-lg { margin: 50px !important; }
	.leftmargin-lg { margin-left: 50px !important; }
	.rightmargin-lg { margin-right: 50px !important; }
	.topmargin-lg { margin-top: 50px !important; }
	.bottommargin-lg { margin-bottom: 50px !important; }
	
.nomargin {margin: 0 !important; }
.noleftmargin { margin-left: 0 !important; }
.norightmargin { margin-right: 0 !important; }
.notopmargin { margin-top: 0 !important; }
.nobottommargin { margin-bottom: 0 !important; }	
    
    .xstopmargin { margin-top:10px; }

	
}	

/* padding */

.allpadding { padding: 50px !important; }
.leftpadding { padding-left: 50px !important; }
.rightpadding { padding-right: 50px !important; }
.toppadding { padding-top: 50px !important; }
.bottompadding { padding-bottom: 50px !important; }

.allpadding-sm { padding: 30px !important; }
.leftpadding-sm { padding-left: 30px !important; }
.rightpadding-sm { padding-right: 30px !important; }
.toppadding-sm { padding-top: 30px !important; }
.bottompadding-sm { padding-bottom: 30px !important; }

.allpadding-lg { padding: 80px !important; }
.leftpadding-lg { padding-left: 80px !important; }
.rightpadding-lg { padding-right: 80px !important; }
.toppadding-lg { padding-top: 80px !important; }
.bottompadding-lg { padding-bottom: 80px !important; }

@media only screen and (max-width: 767px) {
	.allpadding { padding: 30px !important; }
	.leftpadding { padding-left: 30px !important; }
	.rightpadding { padding-right: 30px !important; }
	.toppadding { padding-top: 30px !important; }
	.bottompadding { padding-bottom: 30px !important; }
	.toppadding-m { padding-top: 30px !important; }

	.allpadding-sm { padding: 20px !important; }
	.leftpadding-sm { padding-left: 20px !important; }
	.rightpadding-sm { padding-right: 20px !important; }
	.toppadding-sm { padding-top: 20px !important; }
	.bottompadding-sm { padding-bottom: 20px !important; }
	.toppadding-sm-m { padding-top: 20px !important; }

	.allpadding-lg { padding: 50px !important; }
	.leftpadding-lg { padding-left: 50px !important; }
	.rightpadding-lg { padding-right: 50px !important; }
	.toppadding-lg { padding-top: 50px !important; }
	.bottompadding-lg { padding-bottom: 50px !important; }
}

.nopadding { padding: 0 !important; }
.noleftpadding { padding-left: 0 !important; }
.norightpadding { padding-right: 0 !important; }
.notoppadding { padding-top: 0 !important; }
.nobottompadding { padding-bottom: 0 !important; }


/* ----------------------------------------------------------------
	6.Sections & parallax
-----------------------------------------------------------------*/

.section {
	position: relative;
	margin: 60px 0;
	padding: 60px 0;
	background-color: #F9F9F9;
	overflow: hidden;
}

.section .container { z-index: 2; }

.parallax {
	/* background-color: transparent; */
	background-attachment: fixed;
	background-position: 50% 0;
	background-repeat: no-repeat;
	overflow: hidden;
}


/* ----------------------------------------------------------------
	7.Columns & Grids - 5column
-----------------------------------------------------------------*/

.col_1_5 { width: 16.8%; }
.col_2_5 { width: 37.6%; }
.col_3_5 { width: 58.4%; }
.col_4_5 { width: 79.2%; }
.col_1_5,
.col_2_5,
.col_3_5,
.col_4_5 {
	display: block;
	position: relative;
	margin-right: 4%;
	float: left;
}
.col_last { margin-right:0 !important; clear: right; }

.col_1_5-sm { width:19.2%; display: block; position: relative; margin-right: 1%; float: left; }


/* ----------------------------------------------------------------
	8.img
-----------------------------------------------------------------*/
.img-100 { width:100%; max-width:100px;}
.img-200 { width:100%; max-width:200px;}
.img-390 { width:100%; max-width:390px;}
.img-750 { width:100%; max-width:750px;}
.img-1170 { width:100%; max-width:1170px;}


.thumbnailBox { border:1px solid #eee; }