@font-face {
	font-family: "Roboto-2";
	src: url("../fonts/Roboto.ttf");
}


body {
  margin: 0;
  padding: 0;
  width:100vw;
  height: 100vh;
  background-color: #eee;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}

.button .input .optgroup .select .textarea {
    font-family: cursive;
}

#okmsg{
    background-color: #2ecc71;
    padding:4px;
    border-radius:4px
}

#okmsg p{
    color:white;
    font-size:16px;
    font-weight: bolder;
    text-align: center;
}

#errormsg{
    background-color: #e67e22;
    padding:4px;
    border-radius:4px
}

#errormsg p{
    color:white;
    font-size:16px;
    font-weight: bolder;
    text-align: center;
}

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.c1 {
    background-image:url(../img/plan1.png);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}

.c2 {
    background-image:url(../img/plan2.png);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}

.c3 {
    background-image:url(../img/plan3.png);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}

.navbar {
  position: absolute;
  top: 0px;
  width: 100%;
  background-color: transparent;
  z-index: 2;
}

.modal-header  {
    background: linear-gradient(#107e78,#6b8e8c);
    width:100%;
text-align:center;
}

.modal-content {
    border: 0;
}



.form-control {
  outline: 0;
  border-width: 0 0 1px;
  border-color: gray;
  border-radius: 0px;
  font-family: revert;
}

.form-control:focus {
    box-shadow: none;
    border-color: #3C3484;
}


.carousel-caption {
    text-align: left;
    top: 5em;
}


.formsize {
    padding-bottom: 5em;
}

@media (max-width:820px){
    .bigtitle{
        font-size: 1.5rem;
        text-align: center;
        font-weight: 500;
        line-height: 1.0;
        margin-top:-20px;
    }
    .lead-p {
        font-weight: bold;
        /*-webkit-text-stroke: 1.5px white;*/
        text-shadow: 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D;

        border-radius: 5px;
        margin-top:-16px;
        font-size: 1.1rem;
        font-weight: 300;
        overflow: none;
        box-sizing: border-box;
        padding-bottom: 20px;
        max-height: fit-content;
        margin-top: 10px;
        text-align: center;
        min-height: 250px;
    }
    .sk_navbar #btnContact{
        float:right;
        background-color: rgba(255, 255, 255, 0.01);
    }
    .sk_navbar #btnContact span{
        color:white;
        border:none;
        background-color: rgba(255, 255, 255, 0.01);
        font-weight: bolder;
    }
}
@media (min-width: 776px){
    .bigtitle {
        margin-top:-20px;
        font-size: 4.6rem;
        font-weight: 500;
        line-height: 1.0;
    }
    .lead-p {
        text-shadow: 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D, 0 0 1px #4D4D4D;
        font-size: 1.1rem;
        font-weight: 300;
        max-height: fit-content;
        min-height: 100px;
    }
    .sk_navbar #btnContact{
        float:right;
        background-color:transparent
    }
    .sk_navbar #btnContact span{
        color:white;
        border:none;
        background-color: none;
        font-weight: bolder;
    }
}

.sk_navbar{
    width: 100%;
}
.sk_navbar li{
    display: inline-block;
}



.textsize1 {
    margin-right: 1em;
}



.text-bold {
    font-weight: 600;
    color: white;
}

.text-bold:hover {
    color: white;
}

.textsize2 {
    margin-top: 4em;
}

.btncontact {
    background-color: #107e78;
    border-radius: 30px;
    float: right;
    color: white;
    font-size: 20px;
    font-weight: 500;
}

.btncontact:hover {
    background-color: white;
    color: #3f2c6e;
}



.dispblc {
    display:inline-block;
margin: 0 auto;
}

.modal-footer {
    border-top: 0px;
}

#maintitle{
    font-family: "Roboto-2";
    color:white;
}

div .t {
    
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
    
}

div .t1 {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
    
}

div .t2 {
  max-width: 280px;
  width:0px;
  animation: reveal 7s infinite;
}

div .t2 span {
  float: left;
  animation: slidein 7s infinite;
    color: white;
    font-weight: bold;
    font-size: 90px;    
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300');


.tbody {
   text-align:center;
    background: linear-gradient(#107e78,#6b8e8c);
  color:#555;
  font-family:'Roboto';
  font-weight:300;
  font-size:32px;
  padding-top:40vh;
  height:100vh;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0); 
}

@media (max-width:820px){
    .tbody{
        padding-top:10vh;

    }


.m5 {
    margin-top: 5em;
}

svg {
    color: white;
}