@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

* {
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

img {
    border: none;
    max-width: 100%;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

body{
    font-family: 'Montserrat', sans-serif;
    background:#f2f3f8;
    margin: 0;
    padding: 0;
}
.navbar:before,.navbar:after{
    content: '';
    display: table;
   }
   .navbar:after{
       clear: both;
   }
   .navbar-cls-top {
       background: #fff;
       border-bottom: none;
       -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
       box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
       padding: 20px 20px 15px;
       position: relative;
   }
   .navbar-header, .navbar-left {
       float: left;
   }
   .navbar-cls-top .navbar-brand{
       color: #fff;
       text-align: center;
       height: 75px;
       font-size: 25px;
       letter-spacing: 1px;
       padding: 19px 20px;
   }
   .navbar-brand img {
       max-width: 100%;
       height: 50px;
       margin: 0 auto;
       margin-top: -5px;
   }
   .team-name{
       margin-top: 15px;
   }
   .team-name h3 {
       margin: 0;
       font-weight: 600;
       color: #007493;
   }
.main-container{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 3em auto;
}
.dna_application{
    width: 33.33%;
    position: relative;
    padding: 15px;
}
.application_type{
    position: absolute;
    top: 40px;
    right: 30px;
    z-index: 9;
    font-size: 13px;
}
.application_type select{
    -webkit-appearance: none;
    border: none;
    padding: 5px 10px;
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    border-radius: 2em;
    cursor: pointer;
    background: #FFF url(select_arrow.svg) no-repeat;
    background-size: 12px;
    background-position: 90% 10px;
    padding-right: 30px;
    margin-left: 5px;
}
.application_type span{
    color: rgba(255, 255, 255, 0.5);
}
.dna_application a{ 
    display: block;
    background: #FFF;
    padding: 25px;
    position: relative;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
}
.bg_01 a{ 
    background:#bebcbf;
    background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
    background: #bebcbf;
}
.bg_02 a{ 
    background: #8A2387;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F27121, #E94057, #8A2387);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F27121, #E94057, #8A2387); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg_03 a{ 
    background: #00B4DB;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg_04 a{ 
    background: #00c6ff;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #0072ff, #00c6ff);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #0072ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}
.bg_05 a{ 
    background: #11998e;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg_06 a{ 
    background: #4568DC;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #B06AB3, #4568DC);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #B06AB3, #4568DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.dna_application a:hover{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    box-shadow: 0 14px 21px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 14px 21px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 14px 21px 0 rgba(0, 0, 0, 0.19);
    -o-box-shadow: 0 14px 21px 0 rgba(0, 0, 0, 0.19);
    -ms-box-shadow: 0 14px 21px 0 rgba(0, 0, 0, 0.19);
}
.dna_application a .cisco_logo{
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    margin: auto;
    max-width: 100%;
    width: 80px;
}
.dna_application a h2{
    color: #FFF;
    line-height: 1.4em;
    font-size: 2.4em;
    padding: 8vh 0;
    margin-bottom: 0;
}
.dna_application a h2 span{
    display: block;
    font-size: 25px;
    text-transform: uppercase;
}