/* Style Css to This Template */
/* Template Name: Starter Theme to Web Projects*/


/*** BODY ***/
body {
    font-family: 'Roboto', sans-serif;
	font-size: 1.3em;
	line-height: 1.8em;
	color: #161616;
	background-color: transparent;
	letter-spacing: 0.03em;
}
/*** THE END BODY ***/

/*** MEDIA ***/
@media only screen and (max-width: 768px) {
.prjct-wrt-right {
    font-size: 1.5em !important;
    top: 9% !important;
}

.prjct-wrt-left {
    font-size: 1.5em !important;
    top: 9% !important;
}

.h1, h1 {
	font-size: 2.6em !important;
}

.tfv {
	font-size: 2.6em !important;
	text-align: center;
}

.hero-bg {
    height: 30vh !important;
	padding-top: 10vh !important;
	padding-left: 15px !important;
}

.h2, h2 {
	font-size: 1.8em !important;
}

.btn-allprojects {
	font-size: .9em !important;
}

.prjct-bg {
	margin-top: 3em !important;
	margin-bottom: 3em !important;
}

.img-prjct-logo {
	display:none !important;
}

.lg-col-wrt {
	font-size: 1.8em !important;
	padding: 3% !important;
	margin-top: 200px !important;
}

.lg-col-wrt2 {
	font-size: 1.8em !important;
	padding: 3% !important;
	text-align: center !important;
}

.lg-col-ttl {
	font-size: 1.6em !important;
	padding-left: 3%;	
}

.lg-col-ttl2 {
	font-size: 2.6em !important;
	padding-left: 3% !important;	
}

.lg-col-bg {
	margin-top: 3em !important;
	margin-bottom: 3em !important;
}

.lg-col-bg2 {
	margin-top: 3em !important;
	margin-bottom: .5em !important;
	/* display: none !important; */
}

.nav-ttl {
	top: 36px !important;
	font-size: 1.3em !important;
	position: absolute !important;
	left: 5% !important;
	display: none;
}

.img-hr-lg {
    height: 35px !important;
    width: 35px !important;
	margin-top: 27px !important;
	/* display: none; */
}

.ftr-lnk {
	font-size: 1.8em !important;
	height: 3em !important;
    text-align: center !important;
	padding-left: 0px !important;
}

.prjct-wrt-left-wrk {
	font-size: 1.5em !important;
	top: 9.5% !important;
}

.prjct-wrt-right-wrk {
	font-size: 1.5em !important;
    top: 9.5% !important;	
}

.img-prjct-wrk {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.img-prjct-wrk:hover {
	padding-right: 0px !important;
	padding-left: 0px !important;
	border-radius: 0px !important;
}

.prjct-wrt-left-wrk-big {
	font-size: 1.5em !important;
	top: 9.5% !important;
}

.img-prjct-wrk-big {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.img-prjct-wrk-big:hover {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.img-prjct {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.img-prjct:hover {
	border-radius: 0px !important;
}

.works-hero-bg {
    height: 50vh !important;
    padding-top: 28vh !important;	
}

.blog-hero-bg {
	padding-top: 31vh !important;
}

.lgs-bg {
	margin-top: 0em !important;
	margin-bottom: 0.6em !important;
}

.btn-ltstlk {
	padding: 3em !important;
	font-size: 1em !important;
}

.img-lg-col2 {
	padding-left: 0px !important;
	padding-right: 0px !important;
	/* display: none !important; */
}

.shw-cs2 {
	font-size: 2.5em !important;
	padding-top: 5% !important;
}

.shw-cs {
	font-size: 1.1em !important;
}

.shw-cs3 {
	font-size: 1.1em !important;
	text-align: center !important;
	padding-left: 0px !important;
}

.shw-cs4 {
    font-size: 1.8em !important;
}

.shw-cs4-r {
    font-size: 1.1em !important;
}

.allprojects-bg {
	margin-bottom: 2em !important;
    margin-top: 2em !important;
}

.allprojects-lgs-bg2 {
	margin-bottom: 3.6em !important;
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
	margin-right: 0px !important;
}

.slider-bg {
	padding-bottom: 0 !important;
}

}
/*** THE END MEDIA ***/



/*** GENERAL LINK ***/
a:-webkit-any-link {
	text-decoration: underline;
}
/*** THE END GENERAL LINK ***/

/*** h1, h2, h3, h4, h5, h6, h7, h8, h9, ***/
.h1, h1 {
	font-size: 3.1em;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.7em;
	font-family: 'Roboto', sans-serif;
	color: #161616;
}

.h2, h2 {
	font-size: 2em;
	font-weight: 300;
	letter-spacing: .03em;
	line-height: 1.7em;
    font-family: 'Roboto', sans-serif;
	color: #161616;
}

.h3, h3 {
	font-size: 1.3em;
	font-weight: 400;
	letter-spacing: .03em;
	line-height: 1.7em;
	color: #999;
	font-family: 'Roboto', sans-serif;	
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	margin-top: 0;
	margin-bottom: 0;
}

h1.fade-anime-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allows the content to wrap to the next line if necessary */
}

h1.fade-anime-top img {
	margin-right: 10px;
}

h1.fade-anime-top a:first-child img {
    margin-left: 30px;  /* Padding to the first icon after the text */
}


/*** THE END h1, h2, h3, h4, h5, h6, h7, h8, h9, ***/

/*** HERO HEADER ***/
.hero-bg {
	background: transparent;
	margin: 0 auto;
	text-align: left;
	height: 50vh;
	padding-top: 20.5vh;
}
/*** THE END HERO HEADER ***/

/*** SLIDER HERO HEADER ***/
.slider-bg {
	background: transparent;
	margin: 0 auto;
	text-align: center;
	padding-top: 5em;
	padding-bottom: 5em;	
}
/*** THE END SLIDER HERO HEADER ***/

/*** BLOG HERO HEADER ***/
.blog-hero-bg {
	background: transparent;
	margin: 0 auto;
	text-align: center;
	height: 45vh;
	padding-top: 25vh;
}
/*** THE END BLOG HERO HEADER ***/

/*** WORKS HERO HEADER ***/
.works-hero-bg {
	background: transparent;
	margin: 0 auto;
	text-align: center;
	height: 65vh;
	padding-top: 30vh;
}
/*** THE END WORKS HERO HEADER ***/

/*** FOOTER BACKGROUND ***/
.footer-bg {
	margin-top: 5em;
	margin-bottom: 4.3em;
	height: 11em;
}
/*** THE END FOOTER BACKGROUND ***/

/*** FOOTER LINKS ***/
.ftr-lnk {
	font-size: 2em;
	letter-spacing: .04em;
	line-height: 1.7em;
	text-align: left;
	color: #161616;
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
    height: 2.5em;
    padding-left: 0;
}

.ftr-lnk:hover {
	color: #161616;
	text-decoration: none;
}
/*** THE END FOOTER LINKS ***/

/*** SERVICES WRT ***/
.lg-col-wrt2 {
	font-size: 2em;
	line-height: 1.8em;
	letter-spacing: .04em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #161616;
	text-align: center;
	margin-top: 60px;
}
/*** THE END SERVICES WRT ***/

/*** WRITE AND PHOTO ***/
.lg-col-wrt {
	font-size: 2em;
	line-height: 1.8em;
	padding-left: 1%;
	letter-spacing: .04em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #161616;
	padding-right: 3% !important; /* todo: remove this */
}
/*** THE END WRITE AND PHOTO ***/

/*** SINGLE WORK PAGE TITLE ***/
.lg-col-ttl2 {
	font-size: 3em;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.7em;
	font-family: 'Roboto', sans-serif;
	color: #161616;
	padding-left: 1%;
}
/*** THE END SINGLE WORK TITLE ***/


/*** SINGLE WORK PHOTO COVER ***/
.img-lg-col2 {
  border-radius: 0px;
  max-width: 100%;
  height: auto;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
   transition: all .5s ease;
   display: table;
   position: relative;
   animation: animatebottom 3s;
   padding-right: 1%;
   padding-left: 1%;   
}
/*** THE END SINGLE WORK PHOTO COVER ***/

/*** PROJECT BACKGROUND ***/
.prjct-bg {
	background: transparent;
    margin-top: 5em;
	margin-bottom: 5em;
}
/*** THE END PROJECT BACKGROUND ***/

/*** ALL PROJECTS BUTTON BACKGROUND ***/
.allprojects-bg {
	width: auto;
	height: auto;
	text-align: center;
	margin-bottom: 5em;
	margin-top: 5em;
}
/*** THE END ALL PROJECTS BACKGROUND ***/

/*** SOCIAL LINKS ***/
.soc-lnk {
	color: #2937f0;
    font-weight: 500;
}

.soc-lnk:focus {
	color: #2937f0;
}

.soc-lnk:hover {
	color: #161616;
	border-bottom: 2px solid #161616;
}

/*** THE END SOCIAL LINKS ***/

/*** SHOWCASE FONT STYLE ***/
.shw-cs {
    font-size: 1.1em;
    font-weight: 300;
    letter-spacing: .06em;
    line-height: 1.7em;
    font-family: 'Roboto', sans-serif;
    color: #969696;
    padding-left: 3%;
    /* font-style: italic; */
	padding-top: 1%;
}

.shw-cs4 {
    font-size: 1.8em;
    font-weight: 300;
    letter-spacing: .06em;
    line-height: 1.7em;
    font-family: 'Roboto', sans-serif;
    color: #161616;
    padding-left: 3%;
	padding-top: 2%;
	max-width: 100%;
}

.shw-cs4-r {
    font-size: 1.2em;
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.7em;
    font-family: 'Roboto', sans-serif;
    color: #161616;
    padding-left: 3%;
	padding-top: 3%;
	padding-right: 3%;
	max-width: 100%;
	float: right;
}

.shw-cs2 {
    font-size: 2.5em;
    color: #161616;
    font-weight: 700;
    max-width: 100%;
    padding-left: 3%;
    padding-top: 5%;	
}

.shw-cs3 {
    font-size: 1.1em;
    color: #161616;
    font-weight: 400;
    max-width: 100%;
    padding-left: 5%;
    padding-bottom: 2%;	
}
/*** THE END SHOWCASE FONT STYLE ***/

/*** WORK PAGE PROJECT COVER ***/
.img-prjct-wrk {
  border-radius: 0px;
  max-width: 100%;
  height: auto;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
   transition: all .5s ease;
   display: table;
   position: relative;
   padding-left: 1%;
   padding-right: 1%;
   animation: animatebottom 3s;
}

.img-prjct-wrk-big {
  border-radius: 0px;
  max-width: 100%;
  height: auto;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
   transition: all .5s ease;
   display: table;
   position: relative;
   padding-left: 2%;
   padding-right: 2%;
}

.img-prjct-wrk:hover {
  cursor: pointer;
  opacity: .7;
  -webkit-transform: scale(0.96);
  -ms-transform: scale(0.96);
  transform: scale(0.96);
}

.prjct-wrt-right-wrk {
   position: absolute; 
   right:3%;
   top:12%;
   font-size: 2.6em;
   color: #161616;
   font-weight: 700;
   max-width: 100%;
}

.prjct-wrt-left-wrk {
   position: absolute; 
   left:3%;
   top:12%;
   font-size: 2.6em;
   color: #161616;
   font-weight: 700;
   max-width: 100%;
}

.prjct-wrt-left-wrk-big {
   position: absolute; 
   left:3%;
   top:7%;
   font-size: 2.6em;
   color: #161616;
   font-weight: 700;
   max-width: 100%;	
}

.img-prjct-wrk-big:hover {
  cursor: pointer;
  opacity: .7;
}
/*** THE END WORK PAGE PROJECT COVER ***/

/*** HOME PAGE PROJECT COVER ***/
.img-prjct {
  border-radius: 0px;
  max-width: 100%;
  height: auto;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
   transition: all .5s ease;
   display: table;
   position: relative;
   padding-left: 1em;
   padding-right: 1em;
   animation: animatebottom 3s;
}

.img-prjct:hover {
  cursor: pointer;
  opacity: .7;
   -webkit-transform: scale(0.92);
   -ms-transform: scale(0.92);
   transform: scale(0.92);  
}

.prjct-wrt-right {
   position: absolute; 
   right:3%;
   top:9%;
   font-size: 2.6em;
   color: #161616;
   font-weight: 700;
   max-width: 100%;
}

.prjct-wrt-left {
   position: absolute; 
   left:3%;
   top:9%;
   font-size: 2.6em;
   color: #161616;
   font-weight: 700;
   max-width: 100%;
}
/*** THE END HOME PAGE PROJECT COVER ***/

/*** COL STYLE ***/
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	position: relative;
    min-height: 1px;
    padding-left: 0px;
    padding-right: 0px;
}
/*** THE END COL STYLE ***/

/*** PAGE LOADING ***/
.preloading {
   -webkit-animation-duration: 5s;
   animation-duration: 5s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
         
@-webkit-keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}
         
@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}
         
.fadeIn {
   -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
   background: #fff;
}
/*** THE PAGE LOADING ***/

/*** EFFECT STYLE ***/
.fade-anime-right {
	position: relative;
	animation: animateright 3s;
	max-width: 100%;	
}

@keyframes animateright { 
    from {right:-300px;opacity:0} to {right:0;opacity:1}
}

.fade-anime-bottom {
	position: relative;
	animation: animatebottom 3s;
	max-width: 100%;
}

@keyframes animatebottom { 
    from {bottom:-300px;opacity:0} to {bottom:0;opacity:1}
}

.fade-anime-left {
	position: relative;
	animation: animateleft 3s;
	max-width: 100%;	
}

@keyframes animateleft { 
    from {left:-300px;opacity:0} to {left:0;opacity:1}
}

.fade-anime-top {
	position: relative;
	animation: animatetop 3s;
	max-width: 100%;	
}   

@keyframes animatetop {
	from {top:-300px;opacity:0} to {top:0;opacity:1}
}

.fade-anime-zoom { 
    animation:animatezoom 3s;
}

@keyframes animatezoom { 
    from {transform:scale(0)} to{transform:scale(1)}
}

.fade-anime-fade {
	animation:fading 10s infinite;
}

@keyframes fading {
	0%{opacity:0}50%{opacity:1}100%{opacity:0}
}

.fade-anime-opacity {
	animation: opac 3s;
}

@keyframes opac {
	from{opacity:0} to{opacity:1}
}
/***THE END EFFECT STYLE ***/

/*** SLIDER EFFECT ***/
.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    animation: animatebottom 3s;
}
/*** THE END SLIDER EFFECT ***/

/*** SLIDE CAPTION ***/

.carousel-caption {
    position: initial;
    left: 15%;
    right: 15%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0);
	animation: animatebottom 3s;
}

.glyphicon-chevron-left:before {
	color: #fff;
}

.glyphicon-chevron-right:before {
	color: #fff;
}

.carousel-indicators {
	display: none;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
	font-size: 42px;
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
	margin-right: 0px;
}

.highlight {
	background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-10&color=f8e473);
	margin: -2px -6px;
	padding:  2px  6px;
}

.highlight-blue {
	background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-9&color=ADD8E6);
}

/*** THE END SLIDE ***/