font-family: 'Gothic A1', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'PT Serif', serif;
font-family: 'Arimo', sans-serif;
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'Libre Baskerville', serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Bree Serif', serif;
font-family: 'Frank Ruhl Libre', serif;
font-family: 'Lato', sans-serif;
font-family: 'Lora', serif;
font-family: 'Old Standard TT', serif;
font-family: 'Playfair Display', serif;
font-family: 'Slabo 27px', serif;
font-family: 'Vidaloka', serif;
font-family: 'Oswald', sans-serif;
font-family: 'Caveat Brush', cursive;
font-family: 'Caveat', cursive;
font-family: 'Cabin Condensed', sans-serif;
}

body {
  margin: 0;
	padding: 0px;
}

p{
  font-family: 'Roboto ', sans-serif;
  
}
h1,h2,h3,h4,h5,h6{
  font-family: ''Roboto Condensed', sans-serif', serif;
  font-weight: bold;
}

h6{
  color: white;
   font-family: ''Roboto Condensed', sans-serif', serif;
}

/*NAVIGATION BAR*/

.navbar{ 
   width: auto;
   background-color: #003333;
   opacity: 0.6;
   font-family: initial;
   height: auto;
    font-size: 20px;
    padding: 5px;
    padding-top: 0;
    border-width: 0;

}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 0px;
}
.navbar-default .navbar-nav > li > a {
    color: white;
}
 a.navbar-brand{
  padding: 0;
 }
.navbar-brand{

    width: 40px;
    height: 50px;
    position: fixed;
    display: inline-block;
    padding: 0px ;
    margin-left:  0 !important;
  }

  .navbar-default .navbar-nav > li > a:hover {
    color: black;
    background-color: #003333;
    
    transition: 0.6s;}


    .navbar a>{
      font-size: 20px;
    }

.navbar-inverse
{
  width: auto;
   background-color: #003333;
   font-family: initial;
   height: auto;
    font-size: 15px;
    padding: 5px;
    padding-top: 0;
    border-width: 0;
    color: white;
}

a {
    color: #6f072d2b;
    font-size: 15px;}
/*caurosel*/

.slider-size {
  width: auto;
  height: 100vh; 
  background-repeat: no-repeat;
  background-repeat: no-repeat;
}
 .carousel-indicators .active {
    width: 0px;
    height: 0px;
    margin: 0;
    background-color: transparent;
}
.carousel-indicators li {
    display: inline-block;
    width: 0px;
    height: 0px;
    margin: 1px;
    border: transparent;
   }
.carousel-caption_p {
    
    color: black;
    font-size: 30px;
    text-align: left;
    text-transform: uppercase;
    font-weight: bolder;
    margin-left: -110px;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    font-family: sans-serif;

}

.header__text-box{
  position: relative;
  left: 30%;
  top:50%;
  
  transform: translate(-50%,-100%); 
}

.heading-primary{

  color: black;
    text-transform: uppercase;
    backface-visibility: hidden;
}

.heading-primary--main{
   display: block;
   font-size: 60px;
    font-weight:400;
    letter-spacing:5px; 

    animation-name:moveInLeft;  
    animation-duration: 5s;
    animation-delay: 1s;
    animation-timing-function: ease-out;
    animation-direction: alternate;
    
}

.heading-primary--sub{
   display: block;
   font-size: 20px;
    font-weight:400;
    letter-spacing: 17.4px;

    animation-name:moveInRight;  
    animation-duration: 5s;
    animation-delay: 1s;
    animation-timing-function: ease-out;
    animation-direction: alternate; 
}

@keyframes moveInLeft{
  0% {
        opacity: 0;
        transform: translateX(-100px);
  }


  80%{
      transform: translateX(20px);
}
 100%{
  opacity: 1;
  transform: translate(0);
 }
}

@keyframes moveInRight{
  0% {
        opacity: 0;
        transform: translateX(100px);
  }


  80%{
      transform: translateX(-10px);
}
 100%{
  opacity: 1;
  transform: translate(0);
 }
}

/*index*/

.fcp{
  font-size: 20px;
   font-family: 'Roboto ', sans-serif;

}
.jumbotron {
  position: relative;
    margin-top: 0px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 0px;
    color: #003333;
    background-color: transparent;
}
 
 .jumbotron-text{
  position: relative;
    margin-top: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 150px;
    color: #003333;
    background-color: #003333;
}

.container .jumbotron, .container-fluid .jumbotron {
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 6px;
    margin-top: 120px;
  margin-bottom: 120px;
  font-family:'Caveat Brush', cursive;
  font-size: 25px;
  font-weight: bolder;
}


.ghost-button{
  color: black;
  background-color: transparent;
  border: 1px solid #009688;
  font-size: 13px;
  padding: 7px 12px;
  font-weight: normal;
  margin: -20px 0;
  margin-right: 12px;
  display: inline-block;
  text-decoration: none;
  font-family:'Oswald', sans-serif; 
  min-width: 120px;
}
/*.text-center{
   font-family:'Caveat Brush', cursive;
}*/
  
}

 .text-left{

  margin: 45px;
 }

 .container {
    width: auto;
    padding: 0;
    margin-bottom: 0px; 
    background-color: transparent;
}

.container-a{
  width: auto;
    padding: 0;
    margin-bottom: 50px; 
    margin-top: 100px;
}

.row{
  margin: 0;
}
/* CARDS*/
.flip {
  -webkit-perspective: 1000;   
          perspective: 1000;
        position: relative;
        text-align: center;
        margin-left: 50px;
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
          transform: rotatey(-180deg);
}
.flip .card {
    width: 300px;
    height: 300px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
    color: #fff;
   background-color: #003333;
   margin-top: 30px;
   margin-bottom: 80px;
}
.flip .card .face {
  -webkit-backface-visibility: hidden ;
    backface-visibility: hidden ;
   z-index: 2;
}
.flip .card .front {
   position: absolute;
   width: 270px;
   z-index: 1;
}
.flip .card .img {
   position: relaitve;
   width: 270px;
   height: 178px;
   z-index: 1;
   border: 2px solid #000;
}
.flip .card .back {
  padding-top: 10%;
  -webkit-transform: rotatey(-180deg);
          transform: rotatey(-180deg);
}
  a {
    color: black;
};
}
a:hover,a:focus{
  text-decoration:none;
  color:grey;
}

#contact{
  background:#333333;
  color:#f4f4f4;
  padding-bottom:80px;
}

textarea.form-control{
    height:100px;
}
  /*footer*/

  .navbar-text > a {
  color: #003333;
  text-decoration: none;}

  @media (min-width: 1200px)
.container {
    width: 100%;
}
@media (min-width: 992px)
.container {
    width: 100%;
}
@media (min-width: 768px)
.container {
    width: 100%;
}

.servs{

  font-family: serif;
  font-weight:bolder;
  font-size: 30px;
  text-align: center;
  color: #003333;
}


div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:70%;
height:80%;
display:block;
/* div height to be the same as width*/
padding-top:65%;

/* make it a circle */
border-radius:50%;

/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;

/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;

/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

div.circle-avatara{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;

/* make it a circle */
border-radius:50%;

/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;

/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;

/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}


/*contact page */

.list-inline >li{

  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  background-color: #003333;
}

#contact{
  background:#003333;
  color: white;
  padding-bottom: 0px;

}

.maps{
  padding: 60px;
}
.contactform{
  padding: 50px
  padding-bottom:50px;
  padding-right: 50px;
  padding-left: 50px;
}

textarea{
  height: 150px;
  width: 400px;

}
input{

  color: #003333;
  width: 400px;
}