@charset "utf-8";
/* CSS Document */

/******************************

COLOR PALETTE

#28262d - Headings Color
#909090 - Body copy
#452b78 - (Spanish Violet)


[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Home
	3.1 Header
		3.1.1 Logo
		3.1.2 Main Navigation
		3.1.3 Search
		3.1.4 Hamburger
	3.2 Home Title
	3.3 Next Section Scroll
5. Portfolio
6. Footer


******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900|Roboto:300,400,500,700,900');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 2;
	font-weight: 400;
	background: #FFFFFF;
	color: #6e6e6e;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 1.86;
	font-weight: 400;
	color: #606060;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 1px #ffa07f;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
p a:hover
{
	color: #FFFFFF;
	background: #ffa07f;
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	background: #ffd9bf;
	color: #ff6b09;
}
p::selection
{
	background: #ffd9bf;
}
h1{font-size: 48px;}
h2{font-size: 24px;}
h3{font-size: 20px;}
h4{font-size: 14px;}
h5{font-size: 11px;}
h1, h2, h3, h4, h5, h6
{
	color: #28262d;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
::-webkit-input-placeholder
{
	font-size: 14px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	color: #9988ba !important;
}
:-moz-placeholder /* older Firefox*/
{
	font-size: 14px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	color: #9988ba !important;
}
::-moz-placeholder /* Firefox 19+ */ 
{
	font-size: 14px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	color: #9988ba !important;
} 
:-ms-input-placeholder
{ 
	font-size: 14px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	color: #9988ba !important;
}
::input-placeholder
{
	font-size: 14px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	color: #9988ba !important;
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.bez_1
{
	-webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
	-moz-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
	-ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
	-o-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
	transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.button
{
	display: inline-block;
	height: 54px;
	width: 174px;
	text-align: center;
	border: solid 2px #452b78;
	background: transparent;
}
.button a
{
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 50px;
	text-transform: uppercase;
	color: #452b78;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}

/*********************************
3. Home
*********************************/

.home
{
	width: 100%;
	height: 372px;
}
.home_background_container
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.home_background
{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/*********************************
3.1 Header
*********************************/

.header
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 128px;
	background: rgba(27, 11, 51, 0.52);
	z-index: 10;
}
.header.scrolled
{
	height: 80px;
	background: rgba(27, 11, 51, 0.92);
}

/*********************************
3.1.1 Logo
*********************************/

.logo
{
	padding-left: 57px;
	flex-basis: 50%;
}
.logo a
{
	font-size: 36px;
	font-weight: 500;
	color: #fefefe;
	letter-spacing: 0.1em;
	line-height: 128px;
}
.logo a span
{
	font-weight: 800;
	color: #ff6b09;
	text-transform: uppercase;
}

/*********************************
3.1.2 Main Navigation
*********************************/

.main_nav
{
	flex-basis: 200%;
}
.main_nav ul
{
	display: inline-block;
	margin-right: 100px;
	-webkit-transform: translateY(-4px);
	-moz-transform: translateY(-4px);
	-ms-transform: translateY(-4px);
	-o-transform: translateY(-4px);
	transform: translateY(-4px);
}
.main_nav ul li
{
	display: inline-block;
	margin-right: 25px;

}

.main_nav > li
 {
		float:left;
}

.main_nav li a {
				;
				color:#FFFFFF;
				text-decoration:none;
				padding:10px 12px;
				display:block;
			}

.main_nav li a:hover {
				color:#00afe5;
			}

.main_nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
			}

.main_nav li:hover > ul {
				display:block;
			}

.main_nav li ul li {
				position:relative;
				display: block;
				text-align: left;
				background-color: #1a87be;

			}


/*********************************
3.1.3 Search
*********************************/

.search
{
	display: inline-block;
	margin-right: 49px;
	width: 237px;
	height: 100%;
}
.search_content
{
	width: 100%;
	height: 100%;
}
.search_button
{
	width: 40px;
	height: 40px;
	background: transparent;
	cursor: pointer;
}
.search_button:active
{
	background: #301b54;
}
.search_form
{
	position: absolute;
	right: 0;
	top: 90px;
	width: 237px;
	height: 40px;
	visibility: hidden;
	opacity: 0;
}
.search_form.active
{
	top: 75px;
	visibility: visible;
	opacity: 1;
}
.search_input
{
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	color: #1b0b32;
	padding-left: 20px;
	outline: none !important;
	border: none !important;
	box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
}

/*********************************
3.1.4 Hamburger
*********************************/

.hamburger_container
{
	display: none;
	cursor: pointer;
	margin-right: 40px;
	flex-basis: 40px;
	text-align: right;
}
.hamburger_container i
{
	font-size: 24px;
	padding: 10px;
	color: #FFFFFF;
}
.hamburger_container:hover i
{
	color: #ff6b09;
}
.band
{
	margin-right: 50px;
	margin-bottom: 10px;
}

/*********************************
3.2 Home Title
*********************************/

.home_title
{
	position: absolute;
	bottom: 61px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align: center;
}
.home_title h2
{
	font-size: 30px;
	font-weight: 500;
	color: #FFFFFF;
	margin-bottom: 15px;
}

/*********************************
3.3 Next Section Scroll
*********************************/

.next_section_scroll
{
	cursor: pointer;
	z-index: 10;
	padding: 10px;
}
.next_section i
{
	display: block;
	color: #FFFFFF;
}
.next_section i:first-child
{
	margin-bottom: -4px;
}
.next_section_scroll:hover i
{
	color: #ff6b09;
}

/*********************************
4. Menu
*********************************/

.menu_container
{
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background: #FFFFFF;
	z-index: 11;
	opacity: 0;
	-webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
	-moz-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
	-ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
	-o-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
	transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}
.menu_container.active
{
	right: 0;
	opacity: 1;
}
.menu
{
	width: 100%;
	height: 100%;
}
.menu_close
{
	position: absolute;
	top: 50px;
	right: 30px;
	cursor: pointer;
}
.menu_close i
{
	font-size: 28px;
}
.menu_close:hover i
{
	color: #ff6b09;
}
.menu ul
{
	padding-top: 115px;
	padding-right: 50px;
}
.menu ul li
{
	position: relative;
}
.menu ul li::after
{
	display: block;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: -10px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ff6b09;
	content: '';
}
.menu ul li.active a
{
	font-weight: 700;
}
.menu ul li a
{
	color: #000;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu ul li a:hover
{
	color: #ff6b09;
}

/*********************************
5. Portfolio
*********************************/

.portfolio
{
	padding-top: 120px;
	padding-bottom: 120px;
}
.portfolio_categories
{

}
.portfolio_category
{
	display: inline-block;
	margin-right: 38px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	color: #28262d;
}
.portfolio_items
{
	margin-top: 90px;
}
.card
{
	flex-direction: row;
	border: none;
	margin-bottom: 79px;
}
.card:last-child
{
	margin-bottom: 0px;
}
.card-img-top
{
	border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.card_image
{
	width: 50%;
}
.card_image::after
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background: rgba(69, 43, 120, 0);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.card:hover .card_image::after
{
	background: rgba(69, 43, 120, 0.8);
}
.card-body
{
	width: 50%;
	padding-left: 30px;
	padding-right: 0px;
	padding-top: 0px;
	margin-top: -6px;
}
.card-header
{
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	color: #838383;
	text-transform: uppercase;
	border-radius: auto;
	padding: 0px;
	background: transparent;
	border-bottom: none;
	margin-bottom: -1px;
}
.card-title
{
	font-size: 24px;
	font-weight: 400;
	color: #2e2e2e;
	margin-bottom: 16px;
}
.card:hover .card-title
{
	color: #452b78;
}
.card-text
{
	line-height: 1.86;
}
.card-link
{
	margin-top: 24px;
}
.card-link a
{
	font-size: 14px;
	font-weight: 600;
	color: #452b78;
	text-transform: uppercase;
}

/*********************************
6. Footer
*********************************/

.footer
{
	padding-top: 99px;
	padding-bottom: 82px;
	border-top: solid 1px #dcdcdc;
}
.footer_logo
{
	padding-left: 0px;
	margin-bottom: 39px;
}
.footer_logo a
{
	color: #452b78;
	line-height: 1;
}
.footer_intro p
{
	margin-bottom: 0px;
}
.footer_social
{
	margin-top: 27px;
}
.footer_social ul
{
	display: inline-block;
	margin-left: -5px;
}
.footer_social ul li
{
	display: inline-block;
	margin-right: 2px;
}
.footer_social ul li a
{
	padding: 5px;
}
.footer_social ul li a i
{
	font-size: 20px;
	color: #bab6c3;
	margin-left: 30px;
}
.footer_social ul li a:hover i
{
	color: #1b0d37;
}
.footer_cr
{
	font-size: 10px;
	font-weight: 500;
	color: #cacaca;
	margin-top: 65px;
}
.footer_cr_2
{
	display: none;
	font-size: 16px;
	font-weight: 500;
	color: #cacaca;
	margin-top: 65px;
}
.footer_col
{
	margin-bottom: 27px;
	margin-left: 30px;
}
.footer_col:last-child
{
	margin-bottom: 0px;
}
.footer_col_title
{
	font-size: 18px;
	font-weight: 500;
	color: #28262d;
	margin-bottom: 9px;
}
.footer_col ul li
{
	margin-bottom: 4px;
}
.footer_col ul li a
{
	font-size: 14px;
	font-weight: 500;
	color: #606060;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_col ul li a:hover
{
	color: #28262d;
}
@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. 1600px
2. 1440px
3. 1280px
4. 1199px
5. 1024px
6. 991px
7. 959px
8. 880px
9. 768px
10. 767px
11. 539px
12. 479px
13. 400px

******************************/


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

/************
2. 1440px
************/

@media only screen and (max-width: 1440px)
{
	.main_nav ul
	{
		margin-right: 80px;
	}
	.main_nav ul li
	{
		margin-right: 50px;
	}
}

/************
3. 1380px
************/

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

/************
3. 1280px
************/

@media only screen and (max-width: 1280px)
{
	.logo
	{
		padding-left: 50px;
	}
	.logo a
	{
		font-size: 28px;
	}
	.search
	{
		width: auto;
		margin-right: 40px;
	}
	.main_nav ul
	{
		margin-right: 68px;
	}
	.next_section_scroll
	{
		display: block;
	}
	.footer_logo
	{
		padding-left: 0px;
	}
}

/************
4. 1199px
************/

@media only screen and (max-width: 1199px)
{
	.card
	{
		flex-direction: column;
	}
	.card_image
	{
		width: 100%;
	}
	.card-body
	{
		width: 100%;
		padding: 0px;
		margin-top: 37px;
	}
}

/************
4. 1100px
************/

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

/************
5. 1024px
************/

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

/************
6. 991px
************/

@media only screen and (max-width: 991px)
{
	.main_nav
	{
		display: none;
	}
	.hamburger_container
	{
		display: inline-block;
	}
	.footer_social
	{
		margin-bottom: 30px;
	}
	.footer_cr
	{
		display: none;
	}
	.footer_cr_2
	{
		display: block;
	}
}

/************
7. 959px
************/

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

/************
8. 880px
************/

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

/************
9. 768px
************/

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

/************
10. 767px
************/

@media only screen and (max-width: 767px)
{
	h1
	{
		font-size: 36px;
	}
	.logo
	{
		padding-left: 30px;
	}
	.portfolio_category
	{
		margin-right: 25px;
	}
	.band
	{
		margin-right: 8px;
	}
}

/************
11. 575px
************/

@media only screen and (max-width: 575px)
{
	.logo
	{
		padding-left: 15px;
	}
	.hamburger_container
	{
		margin-right: 5px;
	}
	.footer_col ul li a
	{
		font-size: 14px;
	}
	.footer_cr_2
	{
		font-size: 14px;
	}
}

/************
11. 539px
************/

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

/************
12. 480px
************/

@media only screen and (max-width: 480px)
{
	h1{font-size: 24px;}
	h2{font-size: 20px;}
	p{font-size: 15px;}
	.header
	{
		height: 68px;
	}
	.header.scrolled
	{
		height: 50px;
		background: rgba(27, 11, 51, 0.92);
	}
	.logo a
	{
		font-size: 18px;
	}
	.button
	{
		height: 40px;
		width: 140px;
		font-size: 11px;
		line-height: 37px;
	}
	.button a
	{
		font-size: 11px;
		line-height: 37px;
	}
	.section_title span
	{
		font-size: 14px;
		margin-top: 22px;
	}
	.card-header
	{
		font-size: 10px;
	}
	.card-title
	{
		font-size: 20px;
		margin-bottom: 13px;
	}
	.card-text
	{
		font-size: 13px;
	}
	.card-link
	{
		margin-top: 16px;
	}
	.portfolio_category
	{
		margin-right: 20px;
		display:block;
	}
	.portfolio_category a
	{
		font-size: 13px;
	}

	.portfolio
	{
	padding-top: 40px;
	}

}

/************
13. 479px
************/

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

/************
14. 400px
************/

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