body{font-family:'Roboto', sans-serif;margin-top:56px;}
@media screen and (min-width:768px){
	body{margin-top:68px;}
}
img{max-width:100%;}
section{min-height:100vh;position:relative;overflow:hidden;}
nav a{color:#fff;text-decoration:none;}
.navbar-toggler{box-sizing:border-box;display:block;width:40px;height:40px;border:solid 1px #FFF;background-image:url(../img/menu-icon.svg);background-position:center;background-size:60% !important;background-color:transparent;background-repeat:no-repeat;border-radius:0;}
.navbar{background-color:#17475d;}
.navbar,footer{letter-spacing:1px;white-space:nowrap;}
.navbar{font-size: 1.5rem;}
.logo:hover,.logo:focus{color:white;opacity:.8;}
.offcanvas{
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(left, #df037a, #fb2807); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #df037a, #fb2807); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #df037a, #fb2807); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df037a', endColorstr='#fb2807',GradientType=1 ); /* IE6-9 */
}
@media screen and (min-width: 768px) {
	.offcanvas {
		background: none;
		filter: none;		
	}
}
.navbar .nav-link {
	color: white;
}
.navbar .nav-link:focus,
.navbar .nav-link:hover{
	opacity: .8;
}



.btn-close{color:white;background: none;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 900;font-size: 1.5rem;line-height:0;}
.dropdown ul{list-style: none;padding:0;}
.dropdown ul li{border-bottom: 1px solid white;}
.dropdown ul li a{display: block;padding: 10px 5px;color: white;text-decoration: none;}
.dropdown ul li a:hover,.dropdown ul li a:focus {opacity: .8}

.home, .portfolio{
	background: #17475d; /* Old browsers */
	background: -moz-radial-gradient(bottom right, circle, #17475d, #1c1a25); /* FF3.6-15 */
	background: -webkit-radial-gradient(bottom right, circle, #17475d, #1c1a25); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(circle at bottom right, #17475d, #1c1a25); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17475d', endColorstr='#1c1a25',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	color:#fff;
}
.about{
	background: #17475d; /* Old browsers */
	background: -moz-radial-gradient(top left, circle, #08fdca, #24dbb7); /* FF3.6-15 */
	background: -webkit-radial-gradient(top left, circle, #08fdca, #24dbb7); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(circle at top left, #08fdca, #24dbb7); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08fdca', endColorstr='#24dbb7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
footer{
	background-color:#64656b;
	font-size: 1.1rem;
}
footer a{color:white !important;}
.im-a{font-family: 'Shrikhand', Impact, "Arial Black", Gadget, sans-serif;font-size:3rem;opacity:0;transition: opacity .75s;}
@media screen and (min-width: 768px){
	.im-a{margin-left: -30px;}
}
.designer-container{padding-left:25px;padding-right:25px;}
@media screen and (min-width:768px){
	.designer-container{padding-left:auto;padding-right:auto;}
}
.designer,
.developer{
	opacity:0;
	transition: all .5s;
}
.im-a.active,
.designer.active,
.developer.active{
	opacity:1;
}
.designer{
	width:220px;
	height:52px;
	background-image:url(../img/designer.svg);
	margin-bottom: 20px;
}
.developer{
	width:270px;
	height:33px;
	background-image:url(../img/developer.svg);
	margin-bottom: 31px;
	margin-top: 9px;
}
.designer-list{margin-left: 23px;}
.home li{/*font-family: 'Oswald', "Helvetica Neue", Helvetica, Arial, sans-serif;*/letter-spacing:3px;text-transform:uppercase;transition:all .1s;opacity:0;margin-left:-15px;}
.home li.active{opacity:1;margin-left:0;}
.ir{text-indent:-1000px;white-space:nowrap;overflow:hidden;background-size:100%;background-repeat:no-repeat;}
h2{text-align:center;font-family: 'Alfa Slab One', Impact, "Arial Black", Gadget, sans-serif;font-size:2.5em;margin:.5em 0 .25em;letter-spacing:2px;text-transform:uppercase;}
h3,.h3,h4,.h4,h5,.h5{/*font-family: 'Oswald', "Helvetica Neue", Helvetica, Arial, sans-serif;*/letter-spacing: 1px;}
.portfolio .h4{letter-spacing:5px;text-transform:uppercase;}
hr{border-top: 1px solid #fff;}
.portrait-container{display:block;margin:300px auto 20px;text-align:center;}
.portfolio-container .col>div{background-size:100%;background-position:50%;background-repeat: no-repeat; height:100px;}
.portfolio-overlay{width:calc(100% - 48px);height:100%;position:absolute;bottom:0%;left:24px;background-color:rgba(0,0,0,.5);color:white;display: flex; align-content: center; align-items:center;justify-content:center;transition: .15s;text-shadow: 0px 0px 7px rgba(0,0,0,1);color:#FFD133;}
@media screen and (min-width: 768px) {
	.portfolio-overlay{bottom:100%;background-color:rgba(0,0,0,.7);}
	.portfolio-container a:focus .portfolio-overlay,
    .portfolio-container a:hover .portfolio-overlay
    {bottom:0;}
	.portfolio-container .col>div{height:200px;}
}
.portrait{width:170px;border-radius:50%;border:solid 2px #fff;display:block;margin:20px auto;}
.skillset .table-cell{vertical-align:middle;border-bottom:solid 1px #FFF;letter-spacing: 1px;}
.skillset .table-cell.row-one{padding-left:0;width:42%;text-align:right;border-right:solid 1px #FFF;border-bottom:solid 1px #FFF;}
.table{display:table;width:100%;}
.table-cell{margin:0 auto;display:table-cell;vertical-align:middle;position:relative;}
.container{margin:0 auto;max-width:1300px;padding:0 1.5em;position:relative;width:100%;}
.table-row{display:table-row;}
.table-cell{margin:0 auto;display:table-cell;vertical-align:middle;position:relative;width:100%;padding:0 20px;}
/*.about{font-family: 'Oswald', "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 1.3rem;}*/
.fill{display:block;transition:width 2.5s ease-out;width:0;color:#fff;font-size:.9em;padding:3px 10px;overflow:hidden;border-radius:5px;
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(left, #df037a, #fb2807); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #df037a, #fb2807); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #df037a, #fb2807); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df037a', endColorstr='#fb2807',GradientType=1 ); /* IE6-9 */
}
.cell.hundred{width:100%;}
.fill-scrolled.hundred{width:100%;}
.cell.eighty{width:80%;}
.fill-scrolled.eighty{width:120%;}
.cell.seventy{width:70%;}
.fill-scrolled.seventy{width:130%;}
.cell.sixty{width:60%;}
.fill-scrolled.sixty{width:140%;}
.cell.fourty{width:40%;}
.fill-scrolled.fourty{width:160%;}
.cell.thirty{width:30%;}
.fill-scrolled.thirty{width:170%;}
.cell.twenty{width:20%;}
.fill-scrolled.twenty{width:180%;}
.text-info {color:#17475d !important;}
.portfolio-text .col {
	background: #F9F9F9;
}
.portfolio-text .col-second {
	background-color: #f5f5f5;
    border-top: 1px solid #dee2e6;
}
@media screen and (min-width: 768px) {
	.portfolio-text .col-second {
        border-top: none;
		border-left: 1px solid #dee2e6;
	}
}
.ui-ux .container-fluid:nth-child(odd) {background-color: #F9F9F9;}
.ui-ux .container .container-fluid {background-color: transparent;}
.w-75{width: 75%;}

/*  SWIPER OVERRIDE */
.swiper-frame {
	background-color: #EEE;
	overflow: hidden;
}
.swiper-container {
	width: 100%;
	height: 100%;
	background-color: white;
}
.swiper-slide {
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
	background-color: rgba(0, 0, 0, 0.15);
	background-size: 70%;
}

.swiper-button-next {
	right: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%236e6e6e'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev {
	left: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%236e6e6e'%2F%3E%3C%2Fsvg%3E");
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: #3299BB;
}

.logos img {
	max-width: 200px;
}

@media only screen and (min-width: 350px) {
	.logos img {
		max-width: 250px;
	}
}

@media only screen and (min-width: 500px) {
	.logos img {
		max-width: 300px;
	}
	.logos img.logo-vertical {
		max-width: 370px;
	}
	.logos img.logo-horizontal {
		max-width: 420px;
	}
}
.swiper-frame.illustration .swiper-animation {
	height: 400px;
}

@media only screen and (min-width: 600px) {
	.turtle-fish img {
		max-width: 500px;
	}
}