/*!
 * Start Bootstrap - Heroic Features (https://startbootstrap.com/template-overviews/heroic-features)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-heroic-features/blob/master/LICENSE)
 */

body {
padding-top: 54px;}

@media (min-width: 992px) {
body {
padding-top: 56px;}}

a {outline: 0;}

.banner-area {
width: 100%;
height: 450px;
position: relative;
z-index: 1;
text-decoration: none;
padding-top: 130px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;}

.card {height: 100%;}
.card img{margin-bottom: 1em;}

#myFooter{
margin-top: 2em;}

#myFooter img{
text-align: left;}

#logo_top img{
width:30%;
height:30%;
margin-bottom: -3em;
margin-top: -1em;}

#logo_top p{
font-size: 1.5em;}

.navbar {
background-color: #061EA2;}

#banner{
margin-top: 3em;}

#banner img{
margin-bottom:-1em;}

#logos {
margin-top: 3em;
margin-bottom: 3em;}

.center-block {
display: block;
margin-right: auto;
margin-left: auto;}

#text1{
padding-top:-2em;
padding:3em;
font-size:1.2em;}

#text2 p{
padding-left:1em;
padding-right:1em;
padding-top:1em;
padding-bottom: 2em;
font-size:1.2em;}

body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: 30px;
text-align: center;}

a, a:hover, a:focus {
color: #468aa8; text-decoration: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;}

h1, h2 { margin-top: 10px; font-family: 'Josefin Sans', sans-serif; font-size: 48px; font-weight: 300; color: #555; line-height: 56px; }
h3 { font-family: 'Josefin Sans', sans-serif; font-size: 32px; font-weight: 300; color: #555; line-height: 40px; }

img { max-width: 100%; }

.medium-paragraph { font-size: 18px; line-height: 34px; }
.colored { color: #468aa8; }
::-moz-selection { background: #468aa8; color: #fff; text-shadow: none; }
::selection { background: #468aa8; color: #fff; text-shadow: none; }

/***** Top menu *****/
.navbar {
margin-top: -3.5em;
margin-bottom: 0;
background: #061EA2;
border: 0;
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
-o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;}

ul.navbar-nav {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 400;
text-transform: uppercase;}

.navbar-inverse ul.navbar-nav li a { padding-top: 20px; padding-bottom: 20px; color: #fff; border: 0; }
.navbar-inverse ul.navbar-nav li a:hover { color: red; border: 0; }
.navbar-inverse ul.navbar-nav li a:focus { color: green; outline: 0; border: 0; }

.navbar-brand {
text-indent: px;}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { 
margin-left: 0; 
color:white;
font-weight: bold;}

/***** MEDIA QUERIES *****/
@media (min-width: 992px) and (max-width: 1199px) 
{

}}

@media (min-width: 768px) and (max-width: 991px) {}}

@media (max-width: 767px) { 
.navbar.navbar-no-bg { background: #444; }
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 15px; }
.navbar-collapse { border: 0; }
.navbar-inverse .navbar-toggle { margin-top: 13px; border-color: transparent; }
.navbar-inverse ul.navbar-nav li a { padding-top: 10px; padding-bottom: 10px; }
.navbar-inverse ul.navbar-nav li a:hover, .navbar-inverse ul.navbar-nav li a:focus { border: 0; }}

@media (max-width: 415px) {
h1, h2 { font-size: 36px; }}

/* Retina-ize images/icons */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {}}
 
.btn {/* All button control here */
      margin-right: 4px;
      margin-bottom: 4px;
      font-family: "Varela Round", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      -ms-border-radius: 30px;
      border-radius: 30px;
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
      padding: 4px 20px;}

.btn.btn-md {
    padding: 4px 20px !important;}

.btn.btn-lg {
    padding: 18px 36px !important;}

.btn:hover, .btn:active, .btn:focus {
    box-shadow: none !important;
    outline: none !important;}

.btn-primary {
    background: #118DF0;
    color: #fff;
    border: 2px solid #118DF0;}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: #2998f2 !important;
    border-color: #2998f2 !important;}

.btn-primary.btn-outline {
    background: transparent;
    color: #118DF0;
    border: 2px solid #118DF0;}

.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
    background: #118DF0;
    color: #fff;}

.btn-success {
    background: #5cb85c;
    color: #fff;
    border: 2px solid #5cb85c;}

.btn-success:hover, .btn-success:focus, .btn-success:active {
    background: #4cae4c !important;
    border-color: #4cae4c !important;}

.btn-success.btn-outline {
    background: transparent;
    color: #5cb85c;
    border: 2px solid #5cb85c;}

.btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active {
    background: #5cb85c;
    color: #fff;}

.btn-info {
    background: #5bc0de;
    color: #fff;
    border: 2px solid #5bc0de;}

.btn-info:hover, .btn-info:focus, .btn-info:active {
    background: #46b8da !important;
    border-color: #46b8da !important;}

.btn-info.btn-outline {
    background: transparent;
    color: #5bc0de;
    border: 2px solid #5bc0de;}

.btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active {
    background: #5bc0de;
    color: #fff;}

.btn-warning {
    background: #f0ad4e;
    color: #fff;
    border: 2px solid #f0ad4e;}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background: #eea236 !important;
    border-color: #eea236 !important;}

.btn-warning.btn-outline {
    background: transparent;
    color: #f0ad4e;
    border: 2px solid #f0ad4e;}

.btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active {
    background: #f0ad4e;
    color: #fff;}

.btn-danger {
    background: #d9534f;
    color: #fff;
    border: 2px solid #d9534f;}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: #d43f3a !important;
    border-color: #d43f3a !important;}

.btn-danger.btn-outline {
    background: transparent;
    color: #d9534f;
    border: 2px solid #d9534f;}

.btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active {
    background: #d9534f;
    color: #fff;}

.btn-outline {
    background: none;
    border: 2px solid gray;
    font-size: 16px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;}

.btn-outline:hover, .btn-outline:focus, .btn-outline:active {
  box-shadow: none;}

.btn.with-arrow {
    position: relative;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;}

.btn.with-arrow i {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -8px;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;}

.btn.with-arrow:hover {
    padding-right: 50px;}

.btn.with-arrow:hover i {
    color: #fff;
    right: 18px;
    visibility: visible;
    opacity: 1;}

.footer{
    background-color: #696969;
    text-align: center;
    margin-bottom: 5px;
    height:210px;}

#myFooter {
    background-color: #3668f9;
    color: white;
    padding-top: 30px;}

#myFooter .footer-copyright {
    background-color: #061EA2;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;}

#myFooter .row {
    margin-bottom: 60px;}

#myFooter .navbar-brand {
    margin-top: 45px;
    height: 65px;}

#myFooter .footer-copyright p {
    margin: 10px;
    color: #ccc;}

#myFooter ul {
    text-align: left;
    list-style-type: none;
    padding-left: 0;
line-height: 1.7;}

#myFooter h5 {
text-align: left;
font-size: 18px;
color: white;
font-weight: bold;
margin-top: 30px;}

#myFooter h2 a{
font-size: 50px;
text-align: center;
color: #fff;}

#myFooter a {
color: #d2d1d1;
text-decoration: none;}

#myFooter a:hover,
#myFooter a:focus {
text-decoration: none;
color: white;}

#myFooter .social-networks {
text-align: center;
padding-top: 30px;
padding-bottom: 16px;}

#myFooter .social-networks a {
font-size: 32px;
color: #f9f9f9;
padding: 10px;
transition: 0.2s;}

#myFooter .social-networks a:hover {
text-decoration: none;}

#myFooter .facebook:hover {
color: #0077e2;}

#myFooter .google:hover {
color: #ef1a1a;}

#myFooter .twitter:hover {
color: #00aced;}

#myFooter .btn, .footer .btn  {
color: white;
background-color: #d84b6b;
border-radius: 20px;
border: none;
width: 150px;
display: block;
margin: 0 auto;
margin-top: 10px;
line-height: 25px;}

.footer .btn  {
color: white;
background-color: #d84b6b;
border-radius: 20px;
border: none;
width: 190px;
display: block;
margin: 0 auto;
margin-top: 10px;
line-height: 25px;}

@media screen and (max-width: 767px){
#myFooter {
text-align: center;}}

/* CSS used for positioning the footers at the bottom of the page. */
/* You can remove this. */

html{height: 100%;}

/* ----------------------
FADE PICTURE TO CIRCLE
-------------------------*/
#logo_top img{
width:50%;
height:50%;
margin-top: 3em;
margin-bottom: .5em;}

.card img{
 border-radius: 50%;}

.card p{
 margin-bottom: 2em;}

.box{
position: relative;
text-align: center;
color:#fff;}

.box-img:before{
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out 0s;}

.box-img img{
width: 100%;
height: auto;}

.content{
position: absolute;
top:-.5em;
left:0;
width: 100%;
height:99%;
border-radius: 50%;
padding: 0 30px;    
background: rgba(2, 162, 221, 0.9);
opacity: 0;
transition: all 0.8s ease-in-out 0s;}

.content > .title{
/*font-size: 22px;*/
text-transform: uppercase;
margin-top: 50px;
padding-bottom: 15px;}

.content > .description{
/*font-size: 13px;*/}

.content h1{
font-weight: bold;}

.content h3,h1{
color:red;}

.content h3{
margin-top: 2.5em;}

.box:hover .content{
opacity: 1;}
@media only screen and (max-width: 990px){
.box{margin-bottom: 20px;}}

/* ----------------------
BACK TO TOP
-------------------------*/
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;}

#myBtn:hover {
background-color: #555;}

/* ----------------------
BETTER USER EXPERIENCE
POINTER ON SHAKES
-------------------------*/
.box{
cursor:pointer;
cursor:hand;}

/* ----------------------
MAIL FORM MODAL
-------------------------*/
.container-box{
display:inline-block; 
padding:60px; 
background: rgba(255, 255, 255, .8);
border: 1px solid #fff; 
position: fixed;
top: 55%;
left: 0;}

.modal-content{
background: ;}

.btn-group{
text-align: center;}

.form-group{
text-align: left;}

.modal-header img{
width:50%;
height:50%;
margin-bottom: .5em;
margin-top: 1em;}