/*-----------------
1. Reset.css
2. Bootstrap Helper Classes
3. Hamburger and Menu Styling
4. Home Page sections Styling
5. About Page Styling
6. Portfolio Page
7. All Media Queries
------------------*/


/*----- 1. Reset.css -----*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* --- Common Styles ---*/

h1 {
	font-family: Roboto;
  font-size: 16px;
}

p {
	font-family: Roboto;
	font-size: 14px;
}


/*----- Helper Classes -----*/

html * {
	text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
   margin:0;
   padding:0;
   height:100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Poppins;
	color: #FFFFFF;
}


*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


::-moz-selection {
    color: #1106CC;
    background: #FFFFFF;
}

::selection {
    color: #FFF;
    background: #bf4452;
}

.nopadding {
	padding: 0;
}

.custompadding {
	padding-left: 35px;
	padding-right: 35px;
}

.custom-padding {
	padding-left: 10px;
	padding-right: 10px;
}


#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   opacity: 1;
   background-color: #F9F9F9;
   z-index: 999;
   text-align: center;
}

.spacer {
	width: 100%;
	height: 50px;
}

.spacer-big {
	width: 100%;
	height: 100px;
}



/* -----Body Border -----*/

#top, #bottom, #left, #right {
	background: #FFFFFF;
	position: fixed;
  z-index: 111;
	}
#left, #right {
		top: 0; bottom: 0;
		width: 10px;
		}
#left { left: 0; }
#right { right: 0; }

#top {
		left: 0; right: 0;
		height: 10px;
	}
#bottom {
		left: 0; right: 0;
		height: 10px;
	}

#top { top: 0; }
#bottom { bottom: 0; }

/* ------ Body Border End ------*/


.logo {
	position: absolute;
	top: 25px;
	left: 15px;
	font-family: 'Poppins';
	font-size: 16px;
	line-height: 1;
	z-index: 11;
	white-space: nowrap;
	color: #222222;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.back-btn {
	top: 10px;
	font-size: 21px !important;
}

.text {
	top: 13px;
	font-size: 21px;
}

.logo:hover, .logo:focus {
	text-decoration: none;
	color: #333333;
}


/* -----------------------------------------------------
------------- 3. Home Page -----------------------------
-------------------------------------------------------*/

.main {
  width: 100%;
  height: 100%;
}

.intro {
  	padding: 200px 0 50px 0 ;
	position: relative;
  	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
  	background-position: 50% 50%;

}

.intro .intro-title {
	padding: 0 0 30px 0;
}

.intro .intro-title h1 {
	font-family: Roboto;
	font-size: 28px;
	font-weight: 400 !important;
	line-height: 1.3;
	color: #FFFFFF;
	padding: 5px 10px;
	background: #bf4452;
	display: inline-block;
}

.intro h1 {
  font-family: Roboto;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  color: #FFFFFF;
}

.intro .sub-content {
	padding: 20px 0 20px 0;
}

.intro .sub-content p span {
	font-family: Roboto;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	margin-right: 10px;
	color: #FFFFFF;
}


.intro .sub-content p {
	font-family: Roboto;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.5;
	color: #CCCCCC;
}


/* -------- Intro Var 1 ---------- */

.intro-1 {
  padding: 200px 0 50px 0 ;
	background: #F9F9F9;
}

.intro-1 .inner {
	padding: 0 0 30px 0;
	max-width: 400px;
	margin: 0 auto;
}

.intro-1 img {
	margin-bottom: 20px;
}

.intro-1 h1 {
	font-size: 42px;
  color: #bf4452;
  line-height: 1.3;
  font-family: 'Playfair Display';
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 5px 0;
}

.intro-1 h4 {
	font-family: 'Poppins';
	font-size: 16px;
	color: #333333;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.4;
	margin: 0 0 20px 0;
}

.intro-1 p {
	font-size: 14px;
	color: #A1A1A1;
	line-height: 1.4;
	font-family: 'Poppins';
	font-weight: 400;
	letter-spacing: 1px;
}

.intro-1 a {
	color: #bf4452;
	text-decoration: none;
}

.intro-1 i {
	display: inline-block;
	font-size: 42px;
	color: #bf4452;
	margin-top: 30px;
	text-decoration: none;
}



/* About Page Styling Starts */

.profile {
	padding: 100px 0 0 0;
	background: #FFFFFF;
	position: relative;
	font-family: Roboto;
	font-weight: 500;
}

.profile-content .bold {
	font-size: 16px;
	font-weight: 400 !important;
	color: #000000;
	line-height: 1.6;
	letter-spacing: 0;
	margin: 20px 0 0 0;
}

.profile-content p {
	font-size: 15px;
	color: #606060;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0.5px;
	margin: 20px 0 0 0;
}

.profile-highlights {
	background: #bf4452;
	padding: 30px;
	position: relative;
	margin-top: 100px;
}


.profile-highlights .experience h4, .profile-highlights .awards h4 {
	font-family: Roboto;
	font-size: 16px;
	color: #fff;
	font-weight: 600;
	margin: 0 0 50px 0;
	text-align: center;
	text-transform: uppercase;
}

.profile-highlights .experience ul {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #DDDDDD;
}

.profile-highlights .experience ul li {
	list-style-type: none;
	margin: 0 0 10px 0;
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.4;
	color: #FFF;
}

.profile-highlights .awards ul li {
	list-style-type: none;
	margin: 0 0 10px 0;
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.2;
	color: #fff;
}

/*--------------------------------------------------------
--------------- Services Styling Starts ------------------
--------------------------------------------------------*/

.services {
	padding: 100px 0 100px 0;
	background: #FFFFFF;
	position: relative;
	font-family: Roboto;
	font-weight: 500;
}

.services .service-block {
	/* padding: 50px 50px 60px 50px; */
	padding: 20px 20px;
    margin-top: 2vw;
}


.services .service-block .icon {
	padding: 0 0 40px 0;
}

.services .service-block .icon i {
	display: inline-block;
  position: relative;
  width: 120px;
  height: 120px;
	padding-left: 0;
  text-decoration: none;
  text-align: center;
  color: #bf4452;
	background: #F9F9F9;
  font-size: 62px;
  font-weight: normal;
  line-height: 2em;
	box-shadow: 0 5px 15px #E0C0C0;
  -webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius: 50%;
}


.services .service-block .icon i:hover {
	background: #F3F3F3;
	box-shadow: 0 5px 15px #E0C0C0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
}



.services .service-block .service-text p {
	font-size: 16px;
	line-height: 1.4;
}

/*-----------------------------------------------------
--------------- Services Styling Ends -----------------
-----------------------------------------------------*/


/*-------------------------------------------------------------
--------------- Single Project Styling Starts -----------------
--------------------------------------------------------------*/

.project-page {
	padding: 150px 0 100px 0;
	background: #F4F4F4;
}


.project-page .project-intro h1 {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1px;
	color: #111111;

}

.project-page .project-intro p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	margin: 20px 0 0 0;
}

.project-page .project-intro img {
	margin: 30px 0 30px 0;
}


.project-nav {
	padding: 100px 0 0 0;
	overflow: hidden;
}

.project-main i {
	font-size: 34px;
	font-weight: 700;
	color: #444444;
}

.project-nav .nav-icon {
	display: inline;
	font-size: 32px;
	color: #666666;
	float: left;
}

.project-nav .nav-icon.right {
	display: inline;
	float: right;
}

.project-nav .inner-nav {
	display: inline;
}

.project-nav .inner-nav a {
	display: block;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 400;
	color: #666666;
	margin: 8px 0 0 30px;
	text-decoration: none;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.project-nav .right {
	text-align: right;
}

.project-nav .right a {
	display: block;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 400;
	color: #666666;
	text-decoration: none;
	margin: 8px 30px 0 0;
}

.project-nav .inner-nav:hover a {
	margin-left: 20px;
}

.project-nav .right:hover a {
	margin-right: 20px;
}

.project-nav .project-main i {
	font-size: 32px;
	margin-top: 3px;
}

/* ----------------------------------------------------
----------- Footer Styling Starts Here ----------------
-----------------------------------------------------*/

.footer {
	padding: 100px 0 50px 0;
	background: #bf4452;

}

.footer .contact-link {
	padding: 0 0 100px 0;
}

.footer .contact-link img  {
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
}


.footer .contact-link a::before {
	content: "";
	display: block;
	height: 50px;
	width: 1px;
	background: #FFFFFF;
	margin: 0 auto;
	margin-bottom: 20px;
}

.footer .contact-link a {
	font-family: Roboto;
	font-size: 24px;
	letter-spacing: 0;
	color: #FFFFFF;
	display: inline-block;
	transition: all .2s ease-in-out;
}

.footer .contact-link a:hover {
	text-decoration: none;
	-webkit-transform: scale(1.05);
}

.footer .contact-link a:focus {
	text-decoration: none;
}


.footer .social ul {
	list-style-type: none;
	margin-top: 0;
}

.footer .social ul li {
	display: inline;
	margin-right: 15px;
}

.footer .social ul li a {
	font-family: Roboto;
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1;
	text-decoration: none;
}

.footer .social ul li a:hover {
	color: #FFFFFF;
}

.footer .address {
	text-align: right;
}

.footer .address h2 {
	font-family: Roboto;
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.4;
}


/* -------------------------------------------------------
----------- Bact-to-Top Styling Starts Here --------------
---------------------------------------------------------*/


.back-to-top {
	background: #bf4452;
	margin: 0;
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	z-index: 90;
	display: none;
	box-shadow: 0 2px 10px #E0C0C0;
	text-decoration: none;
	color: #0E1729;
}

.back-to-top i {
	position: relative;
	left: 15px;
	top: 10px;
	font-size: 24px;
	color: #FFFFFF;
	-webkit-transition: 200ms;
	-moz-transition: 200ms;
	-o-transition: 200ms;
	transition: 200ms;
}

.back-to-top:hover {
  background: #bf4452;
  color: #FFFFFF;
}

.back-to-top:hover i {
	top: 8px;
}

.back-to-top:focus {
  color: #FFFFFF;
}


/*Media Queries*/

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

	.logo {
		position: absolute;
		top: 25px;
		left: 25px;
	}

	.intro {
	  padding: 250px 0 100px 0 ;
	}

	.intro .intro-title h1 {
		font-size: 34px;
	}

	.intro h1 {
	  font-size: 30px;
	}

	.intro-1 {
		padding: 150px 0 100px 0 ;
	}

	.intro-1 h1 {
		font-size: 42px;
	}

	.profile {
		padding: 100px 0 0 0;
	}

	.profile .container::before {
		left: 100px;
		top: 100px;
	}

	.profile-highlights {
		padding: 75px;
		margin-top: 0;
	}


	.work {
		padding: 200px 0 0 0;
	}

	.work .container::before {
		left: 100px;
		top: 100px;
	}

	.services {
		padding: 100px 0 100px 0;
	}

	.services .container::before {
		left: 100px;
		top: 100px;
	}


	.footer .contact-link a {
		font-size: 42px;
	}

}

@media only screen and (max-width: 801px) {
	.profile-highlights {
		margin-top: 75px;
	}
	#canvas{
		display:none;
	}
	.intro{
		/* background-color: #000; */
		background-image: url('../images/rline_2.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

}