Changing color of active col - html

Question

I am trying to remove the color of the column border after you have clicked on the image (screenshot). I have been looking through the whole code and been trying to change the colors but am not sure what to change in order to remove the border color. Please advise.
body{font-family:'Roboto',sans-serif;overflow-x:hidden}
#portfolio .portfolio-item{margin:0 0 15px;right:0}
#portfolio .portfolio-item .portfolio-link{display:block;position:relative;max-width:400px;margin:0 auto}
#portfolio .portfolio-item .portfolio-link .caption{background:rgba(255,204,204,.7);position:absolute;width:100%;height:100%;opacity:0;transition:all ease .5s;-webkit-transition:all ease .5s;-moz-transition:all ease .5s}
#portfolio .portfolio-item .portfolio-link .caption:hover{opacity:1}
#portfolio .portfolio-item .portfolio-link .caption .caption-content{position:absolute;width:100%;height:20px;font-size:20px;text-align:center;top:50%;margin-top:-12px;color:#FC9F9F}
.btn-social,.scroll-top,.scroll-top .btn{width:50px;height:50px}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i{margin-top:-12px}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,#portfolio .portfolio-item .portfolio-link .caption .caption-content h4{margin:0}
#portfolio *{z-index:2}
#media (min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}}
.floating-label-form-group{position:relative;margin-bottom:0;padding-bottom:.5em;border-bottom:1px solid #eee}
.floating-label-form-group input,.floating-label-form-group textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:none;border-radius:0;font-size:1.5em;background:0 0;box-shadow:none!important;resize:none}.floating-label-form-group label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:.85em;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;-moz-transition:top .3s ease,opacity .3s ease;-ms-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease}.
floating-label-form-group:not(:first-child){padding-left:14px;border-left:1px solid #eee}
.floating-label-form-group-with-value label{top:0;opacity:1}.floating-label-form-group-with-focus label{color:#FC9F9F}
form .row:first-child .floating-label-form-group{border-top:1px solid #eee}
.btn-outline{color:#FC9F9F;font-size:20px;border:2px solid #FC9F9F;background:0 0;transition:all .3s ease-in-out;margin-top:15px}
.btn-outline.active,.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#FC9F9F;background:#fff;border:2px solid #fff}
.btn-primary.active,.btn-primary:active,.btn-success.active,.btn-success:active,.open .dropdown-toggle.btn-primary,.open .dropdown-toggle.btn-success{background-image:none}
.btn-primary{color:#FC9F9F;background-color:#FC9F9F;border-color:#FC9F9F;font-weight:700}
.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#FC9F9F;border-color:#FC9F9F}
.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary:active,fieldset[disabled]
.btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#FC9F9F;border-color:#FC9F9F}
.btn-primary .badge{color:#FC9F9F;background-color:#FC9F9F}.btn-success{color:#FC9F9F;background-color:#FC9F9F;border-color:#FC9F9F;font-weight:700}
.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.open .dropdown-toggle.btn-success{color:#fff;background-color:#FC9F9F;border-color:#FC9F9F}
.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled]
.btn-success:hover{background-color:#FC9F9F;border-color:#FC9F9F}.btn-success .badge{color:#FC9F9F;background-color:#fff}
.btn-social{display:inline-block;border:2px solid #FC9F9F;border-radius:100%;text-align:center;font-size:20px;line-height:45px}
.btn.active,.btn:active,.btn:focus{outline:0}.scroll-top{position:fixed;right:2%;bottom:2%;z-index:1049}
.scroll-top .btn{font-size:20px;border-radius:100%;line-height:28px}.scroll-top .btn:focus{outline:0}
.portfolio-modal .modal-content{border-radius:0;background-clip:border-box;-webkit-box-shadow:none;box-shadow:none;border:none;min-height:100%;padding:100px 0;text-align:center}
.portfolio-modal .modal-content h2{margin:0;font-size:3em}.portfolio-modal .modal-content img{margin-bottom:30px}.portfolio-modal .modal-content .item-details{margin:30px 0}
.portfolio-modal .close-modal{position:absolute;width:75px;height:75px;background-color:transparent;top:25px;right:25px;cursor:pointer}
.portfolio-modal .close-modal:hover{opacity:.3}
.portfolio-modal .close-modal .lr{height:75px;width:1px;margin-left:35px;background-color:#FC9F9F;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);z-index:1051}
.portfolio-modal .close-modal .lr .rl{height:75px;width:1px;background-color:#FC9F9F;transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);z-index:1052}
.portfolio-modal .modal-backdrop{opacity:0;display:none}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>J</title>
<!-- Bootstrap Core CSS -->
<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/freelancer.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/simplegrid.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Roboto:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Navigation -->
</head>
<body>
<header>
<div class="container navbar-container navbar-fixed-top" role="navigation">
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://"><img onload="this.style.opacity='1!important';" class= "logo" src="img/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left active"><a href="http://www.> PORTFOLIO </a></li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<style>
.row {
background: #ffffff;
padding: 0px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #4a4a4a;
}
#media (min-width:468px) and (max-width:690px){
.content {
font-size: 14px;
}
</style>
<!-- Portfolio Grid Section -->
<br>
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h4></h4>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
</div>
</div>
</section>
<!---End Contet-->
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h4 style=" font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #4a4a4a;">LOGOS</h4>
<hr class="star-primary">
<img src="img/logos.png" class="img-responsive img-centered" alt="">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/cake.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/circus.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/game.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/safe.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/submarine.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span>Copyright © 2017. . All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/freelancer.min.js"></script>
</body>
</html>

Answer 1

Set outline:none on focus
.portfolio-link:focus {
outline: none;
}