@import url('https://fonts.googleapis.com/css?family=Oswald:300');
  
body{
    background-color:rgba(255,255,255,1.0);
    color:black; 
    font-family: 'Oswald', sans-serif;
    width:100%; height:100%;
    font-weight: 300;
    font-size: 15px;
    overflow-X:hidden;
    padding:0% !important;}
h2{padding-bottom:15px;}
.clor {color:#e43330; padding-left:8px;}
.darkcolor{background-color:#86B937;color:black;}
.lightcolor{background-color:#0f0e0e;color:#fff;padding-bottom:50px;}
.topheader{background-color:#86B937;letter-spacing:1px;font-size:15px;}
.mail{margin:10px 0;}
.mobile{margin-top:10px; float:right;}                                      
.map iframe{width:100%;} 
.mobile1{margin-top: 22px;float: right;margin-right: -111px;}
.logo img {
  width: 45%;
  margin-top: 5px;
  margin-left: 33px;
}
.navbar {
 position: relative;
 min-height: 50px;
  /*! margin-bottom: 20px; */
 border: none;
 border-top-color: inherit;
 border-right-color: inherit;
 border-bottom-color: inherit;
 border-left-color: inherit;
 z-index: 1;
}
.navbar {
  border-radius: 0;
}

.affix {
  position: fixed;
  top: 0;
  z-index:99;
  width:100%;
  height:12%;
  background:rbgallery(0,0,0,0.6) !important;
  left:0;
  }

.navbar-default {
  background-color: #fff;
  border-color: none;
  color:black;
  box-shadow: 0 2px 1px 0 #777;
}

.navbar-nav {
  float: left;
  margin-top: -26px;
}

.navbar-nav li{display:block;}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
  color: #e43330;
  background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
  color: black;
}
.navbar-collapse{background-color:white;}

.head{margin:25px auto;}

.head h2{
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
  }

.head h2::after {
  content: '';
  border-top: 2px groove;
  margin: 0 0 0 20px;
  flex: 1 0 20px;
}
.head h2::before{
  content: '';
  border-top: 2px groove;
  margin: 0 20px 0 0;
  flex: 1 0 20px;
  }

.iconh{position:absolute;margin-left: 0.30rem;margin-top: -2rem;}
.iconi{position:absolute; margin-left: 1.20rem; margin-top: -2rem;}
.icons{position:absolute; margin-left: 1.20rem; margin-top: -2rem;}
.iconp{position:absolute; margin-left: 0.80rem; margin-top: -2rem;}
.icong{position:absolute; margin-left: 0.60rem; margin-top: -2rem;}
.iconc{position:absolute; margin-left: 2.0rem; margin-top: -2rem;}
.links a{color:#fff;} 
.aicon{float:left; padding-top:7px;}

.contact .address{padding-left: 24px;margin:4px;display:block; color:#FFF; letter-spacing:0.5px; }
.contact .address1{padding-left: 24px;margin:4px;display:block; color:#FFFAFE; letter-spacing:0.5px;}
.contact .address2{padding-left: 24px;margin:4px;display:block; color:#FFF; letter-spacing:0.5px;}
.contact .address3{padding-left: 24px;margin:4px;display:block; color:#FFF; letter-spacing:0.5px;}

.contact{margin-bottom:10px; line-height:1.7;}

.backc{background-color:#86B937;color:black;width: 100%;height: 343px;}

.copyright{ position:fixed; background-color:#86B937; color:black;z-index:99;padding: 10px;font-size:13px;bottom:0;width:100%;}

.ourSpeciality{
margin-bottom:30px;
-webkit-box-shadow: 1px -1px 17px 0px rgba(0,0,0,0.29);
-moz-box-shadow: 1px -1px 17px 0px rgba(0,0,0,0.29);
box-shadow: 1px -1px 17px 0px rgba(0,0,0,0.29);}

.ourSpeciality img{width:100%;height:200px;margin:12px 0;}
.ourSpeciality p{margin:20px;}
.ourSpeciality h4{padding-top:20px; color:white;}

.about{background:url();
     background-attachment:fixed;
     background-repeat:no-repeat;
     background-position:cover;
     color:BLACK;}
.about img{height:250px;width:100%;padding:10px 0;}	   
     
.banner{background:url();
     background-attachment:fixed;
     background-repeat:no-repeat;
     background-position:cover;
     color:white;
     width:100%;
     height:200px;
margin-top: -19px;
}
     
.banner h2{float:left;margin-top:60px;}

.overlay {
background: rgba(0,0,0,0.6);
margin:10px;
padding:10px;
color:white;
}

.captionoverlay{background-color:rgba(0,0,0,0.6);margin-top: 80px;float: right;margin-right: 5px;height: 25%;width: 45%;padding: 4px;color: white;}
.captionoverlay p{font-size:17px; letter-spacing:1px;}
.captionoverlay h1{font-size:44px;}

.panel{margin-top:30px;}

.panel-default > .panel-heading {

  color: #333;
  background-color: white;
  border-color: #023e96;

}
.panel-body img{width:100%; height:250px;}
/*--------verticle menu-------*/

.about-menu{padding: 30px 0;}



.about-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
/*background-color: #86B937;*/

}

.about-menu li a {
display: block;
color: #000;
padding: 15px 16px;
text-decoration: none;
}

.about-menu li {
text-align: center;
border-bottom: none;
margin:5px 0;
-webkit-box-shadow: 0px 0px 16px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 16px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 16px -1px rgba(0,0,0,0.75);

}

.about-menu li:last-child {
border-bottom: none;
}

.about-menu li .active {
background-color: #fff;
color: black;
}

.about-menu li a:hover:not(.active) {
background-color: #555;
color: white;
}

/*****************/

#return-to-top {
  position: fixed;
  bottom: 27px;
  right: 20px;
  background: rgb(0, 0, 0);
  background: #e43330;
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 9999;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 13px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


/********social media***************/

.social-media {
position: absolute;
top: 121%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
margin: 0;
padding: 0;
}
.social-media a .fa {
font-size: 32px;
line-height: 64px;
transition: 0.3s;
}
.social-media a:nth-child(1) .fa {
color: #2f4779;
}
.social-media a:nth-child(2) .fa {
color: #55acee;
}
.social-media a:nth-child(4) .fa {
color: #cd201f;
}
.social-media a:nth-child(3) .fa {
color: #0073af;
}
.social-media a {
position: relative;
display: block;
width: 64px;
height: 64px;
background:rgba(0, 0, 0, 0.1);
text-align: center;
margin: 10px;
box-shadow: 10px 0 10px #000;
transition: 0.3s;
}

.social-media a::before {
content: "";
position: absolute;
top: -6px;
left: 3px;
background: rgba(0, 0, 0, 0.2);
height: 10%;
width: 100%;
transform: skewX(-45deg);
transition: 0.3s;
}
.social-media a::after {
content: "";
position: absolute;
top: -3px;
left: 64px;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 10%;
transform: skewY(-45deg);
transition: 0.3s;
}
.social-media a:hover {
transform: translate(-10%, 10%);
box-shadow: 10px 0 35px #000;
transition: 0.3s;
}

.social-media a:nth-child(1) {
color: #71809e;
border:1px solid;
}
.social-media a:nth-child(1):hover {
background: #3b5998;
transition: 0.3s;
color: #fff;
border: none !important;
}
.social-media a:nth-child(1):hover .fa {
color: #fff;
transition: 0.3s;
}
.social-media a:nth-child(1):hover::after {
background: #2f4779;
transition: 0.3s;
}
.social-media a:nth-child(1):hover::before {
background: #627aac;
transition: 0.3s;
}

.social-media a:nth-child(2) {
color: #4fc5f7  ;
border:1px solid;
}
.social-media a:nth-child(2):hover {
background: #55acee;
transition: 0.3s;
color: #fff;
border: none !important;
}
.social-media a:nth-child(2):hover .fa {
color: #fff;
transition: 0.3s;
}
.social-media a:nth-child(2):hover::after {
background: #4489be;
transition: 0.3s;
}
.social-media a:nth-child(2):hover::before {
background: #76bcf1;
transition: 0.3s;
}
.social-media a:nth-child(4):hover {
background: #cd201f;
transition: 0.3s;
}
.social-media a:nth-child(4):hover .fa {
color: #fff;
transition: 0.3s;
}
.social-media a:nth-child(4):hover::after {
background: #a41918;
transition: 0.3s;
}
.social-media a:nth-child(4):hover::before {
background: #d74c4b;
transition: 0.3s;
}

.social-media a:nth-child(3) {
color: #0073af  ;
border:1px solid;
}

.social-media a:nth-child(3):hover {
background: #0073af;
transition: 0.3s;
color: #fff;
border: none !important;
}
.social-media a:nth-child(3):hover .fa {
color: #fff;
transition: 0.3s;
}
.social-media a:nth-child(3):hover::after {
background:#316079;
transition: 0.3s;
}
.social-media a:nth-child(3):hover::before {
background: #70caf9;
transition: 0.3s;
}

a:focus, a:hover {
  color: #dae0e6;
}

.setp{padding-top:15px;}
/***********Speciality**************/

.content {
position: relative;
width: 90%;
max-width: 400px;
margin: auto;
overflow: hidden;
}

.content .content-overlay {
background: rgba(0,0,0,0.7);
position: absolute;
height: 99%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
opacity: 1;
}

.content-image{
width: 100%;
}

.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}

.content-details h4{
color: #fff;

letter-spacing: 0.15em;

text-transform: uppercase;
}

.content-details p{
color: #fff;
font-size: 0.9em;
}

.fadeIn-bottom{
top: 80%;
}

.fadeIn-top{
top: 20%;
}

.fadeIn-left{
left: 20%;
}

.fadeIn-right{
left: 80%;
}


/******galleryllary*************/

.galleryllary img{width:90%;height:250px;padding:10px;margin: 20px;-webkit-box-shadow: 3px 5px 16px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 5px 16px -1px rgba(0,0,0,0.75);
box-shadow: 3px 5px 16px -1px rgba(0,0,0,0.75);}
.gphoto{padding-top:20px;}

.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}

/*****Mobile view**/	
  #mobile-btn{ padding:1px 0;}
  .col-xs-6 {width:50%}
  .call{background-color:#f1992f;}
  .call a{color:#f7f7f7; text-decoration:none;}	

  .Enquiry{background-color:#f1992f;}
  .Enquiry a{color:white; text-decoration:none;}	


/***************services****************/

.btn-read {
      background: transparent;
      border-radius: 0;
      border: 1px solid #ffffff;
      color: #fff;
  }
  
.section-box-ten{
      height: 250px;
      background: radial-gradient(#6e6e6e,#2f2f2f);
      background: -webkit-radial-gradient(#6e6e6e,#2f2f2f);
      background: -moz-radial-gradient(#6e6e6e,#2f2f2f);
      color: #fff;
      position: relative;
      overflow:hidden;
      margin-bottom:10px;
      -webkit-box-shadow: -3px 7px 36px 0 rgba(84,80,84,1);
-moz-box-shadow: -3px 7px 36px 0 rgba(84,80,84,1);
box-shadow: -3px 7px 36px 0 rgba(84,80,84,1);
  }
  
 .servicebox1 .section-box-ten figure {
      position: absolute;
      text-align: left;
      padding: 3px 19px 19px 19px;
      width: 100%;
      height: 100%;
      border-top: 1px solid #fff;
      background: rgba(0, 0, 0, 0.71);
      bottom: -85%;
      transition: ease-in-out .5s;
      
  }
  
   .servicebox2 .section-box-ten figure {
      position: absolute;
      text-align: left;
      padding: 3px 19px 19px 19px;
      width: 100%;
      height: 100%;
      border-top: 1px solid #fff;
      background: rgba(0, 0, 0, 0.71);
      bottom: -85%;
      transition: ease-in-out .5s;
      
  }
  .section-box-ten:hover figure {
      bottom: 0;
  }
  .section-box-ten figure h3{
      margin: 0;
      maRGIN-bottom: 22px;
  }
  .section-box-ten img{
      height: 100%;
  }



/**********contact us ***************************/

.frame{
  width: 480px;
  height: 350px;
  position: relative;
  background: #435d77;
  border-radius:0 0 40px 40px;
  z-index: 9;
  margin-bottom: 25px;
}
#button_open_envelope {
  width: 180px;
  height: 30px;
  position: absolute;
  z-index: 311;
  top: 253px;
  left: 208px;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  padding: 2px 0;
  border: 2px solid #fff;
  transition: .3s;
  overflow: hidden;
  display: block;
  text-align: center;
}
#button_open_envelope:hover{
  background: #FFf;
  color: #2b67cb;
  transform:scale(1.1);
  transition:background .25s, transform .5s,ease-in;
  cursor: pointer;
}
.message{
  position: relative;
  width: 550px;
  min-height:300px;
  height: auto;
  background: #fff;
  margin: 0 auto;
  top: 30px;
  box-shadow: 0 0 5px 2px #333;
  transition:2s ease-in-out;
  transition-delay:1.5s;
  z-index: 300;
  border-radius:0 0 30px 30px;
}
.left,  .right,  .top{width: 0;	height: 0;position:absolute;top:0;z-index: 310;}
.left{	
  border-left: 250px solid #337efc;
  border-top: 160px solid transparent;
  border-bottom: 160px solid transparent;
}

.right{	
  border-right: 250px solid #337efc;
  border-top: 160px solid transparent;
  border-bottom: 160px solid transparent;;
  left:300px;
}

.top{	
  border-right: 275px solid transparent;
  border-top: 200px solid #03A9F4;
  border-left: 275px solid transparent;
  transition:transform 1s,border 1s, ease-in-out;
  transform-origin:top;
  transform:rotateX(0deg);
  z-index: 500;
}
.bottom{
  width: 550px;
  height: 190px;
  position: absolute;
  background: #2b67cb;
  top: 160px;
  border-radius:0 0 30px 30px;
  z-index: 310; 
}
.open{
  transform-origin:top;
  transform:rotateX(180deg);
  transition:transform .7s,border .7s,z-index .7s ease-in-out;
  border-top: 200px solid #2c3e50;
  z-index: 200;
}
.pull{
  -webkit-animation:message_animation 2s 1 ease-in-out;
  animation:message_animation 2s 1 ease-in-out;
  -webkit-animation-delay:.9s;
  animation-delay:.45s;
  transition:1.5s;
  transition-delay:1s;
  z-index: 350;
}
#name,#email,#phone,#messarea,#send{
  margin: 0;
  padding: 0 0 0 10px;
  width: 550px;
  height:40px;
  float: left;
  display: block;
  font-size: 18px;
  color: #2b67cb;
  border:none;
  border-bottom:1px solid #bdbdbd;
  letter-spacing: normal;
}
#messarea{
  height: 117px;
  width: 550px;
  overflow: auto;
  border:none;
  padding: 10px;
}
#send{ 
  width: 520px;
  padding: 0;	
  border:  none;
  cursor:  pointer;
  background: #337efc;
  color: #fff;
  transition:.35s;
  letter-spacing: 1px;
  margin:0 15px;
}
#send:hover{background:tomato;transition:.35s;}

::-moz-placeholder{color: #337efc;font-family: 'Ubuntu';font-size: 20px;opacity: 1;} 
::-webkit-input-placeholder {color: #7CB342; font-family: 'Ubuntu';font-size: 20px;}
*:focus {outline: none;}
input:focus:invalid,textarea:focus:invalid {
/* when a field is considered invalid by the browser */
  background: #fff url(images/invalid.png) no-repeat 98% center;
  box-shadow: 0 0 5px #d45252;
  border:1px solid #b03535;
}
input:required:valid,textarea:required:valid { 
  /* when a field is considered valid by the browser */
  background: #fff url(images/valid.png) no-repeat 98% center;
  box-shadow: 0 0 5px #5cd053;
  border-color: #28921f;
}


@-webkit-keyframes message_animation {
  0%{
      transform:translatey(0px);
      z-index: 300;
      transition: 1s ease-in-out;
  }
  50%{
      transform:translatey(-340px);
      z-index: 300;
      transition: 1s ease-in-out;
  }
  51%{
      transform:translatey(-340px);
      z-index: 350;
      transition: 1s ease-in-out;
  }
  100%{
      transform:translatey(0px);
      z-index: 350;
      transition: 1s ease-in-out;
  }
}
@keyframes message_animation {
  0%{
      transform:translatey(0px);
      z-index: 300;
      transition: 1s ease-in-out;
  }
  50%{
      transform:translatey(-340px);
      z-index: 300;
      transition: 1s ease-in-out;
  }
  51%{
      transform:translatey(-340px);
      z-index: 350;
      transition: 1s ease-in-out;
  }
  100%{
      transform:translatey(0px);
      z-index: 350;
      transition: 1s ease-in-out;
  }
}
.backc  .address{padding:10px;}

/****************************************/

.ab img{height: 350px;border:solid 1px#000;width:100%;}
.map{overflow:hidden;height:351px;-webkit-box-shadow: -6px 4px 46px -12px rgba(0,0,0,0.75);
-moz-box-shadow: -6px 4px 46px -12px rgba(0,0,0,0.75);
box-shadow: -6px 4px 46px -12px rgba(0,0,0,0.75);
  padding:0;
}

/****servicepage************/

.servicepage img{width:100%;height:300px;}

/******* client slider*********/


#slideshow {
  margin: 0 auto;
  height: 250px;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
}

.slideshow-title {
  font-family: 'Allerta Stencil';
  font-size: 62px;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  margin-top: 25%;
  letter-spacing: 3px;
  font-weight: 300;
}

.sub-heading {
  padding-top: 50px;
  font-size: 18px;
} .sub-heading-two {
  font-size: 15px;
} .sub-heading-three {
  font-size: 13px;
} .sub-heading-four {
  font-size: 11px;
} .sub-heading-five {
  font-size: 9px;
} .sub-heading-six {
  font-size: 7px;
} .sub-heading-seven {
  font-size: 5px;
} .sub-heading-eight {
  font-size: 3px;
} .sub-heading-nine {
  font-size: 1px;
}

.entire-content {
  margin: auto;
  width: 190px;
  perspective: 1000px;
  position: relative;
}

.content-carrousel {
  width: 100%;
  position: absolute;
  float: right;
  animation: rotar 40s infinite linear;
  transform-style: preserve-3d;
}

.content-carrousel:hover {
  animation-play-state: paused;
  cursor: pointer;
}

.content-carrousel figure {
  width: 220px;
  height: 120px;
  border: 1px solid #3b444b;
  overflow: hidden;
  position: absolute;
}

.content-carrousel figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(300px); 
} .content-carrousel figure:nth-child(2) {
  transform: rotateY(45deg) translateZ(300px); 
} .content-carrousel figure:nth-child(3) {
  transform: rotateY(90deg) translateZ(300px); 
} .content-carrousel figure:nth-child(4) {
  transform: rotateY(135deg) translateZ(300px); 
} .content-carrousel figure:nth-child(5) {
  transform: rotateY(180deg) translateZ(300px); 
} .content-carrousel figure:nth-child(6) {
  transform: rotateY(225deg) translateZ(300px); 
} .content-carrousel figure:nth-child(7) {
  transform: rotateY(270deg) translateZ(300px); 
} .content-carrousel figure:nth-child(8) {
  transform: rotateY(315deg) translateZ(300px); 
} .content-carrousel figure:nth-child(9) {
  transform: rotateY(360deg) translateZ(300px); 
} 

.shadow {
  position: absolute;
  box-shadow: 0 0 20px 0 #000;
  border-radius: 1px;
}

.content-carrousel img {
  image-rendering: auto;
  transition: all 300ms;
  width: 100%;
  height: 100%;
}

.content-carrousel img:hover {
  transform: scale(1.2);
  transition: all 300ms;
}

@keyframes rotar {
  from {
      transform: rotateY(0deg);
  } to {
      transform: rotateY(360deg);
  }
}

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

#image-galleryllery .modal-footer{
display: block;
}

.thumb{
margin-top: 15px;
margin-bottom: 15px;
}

/*---------------media-------------------------------*/

@media only screen and (max-width : 1920px){
  .mobile{float:right;margin-bottom:10px;margin-top:10px}
  .navbar-nav {margin-top: 21px;}
      #name, #email, #phone, #messarea, #send {width: 630px;}
  #messarea {width: 630px;}
  #send {width: 600px;}
   .bottom {width: 690px;}
   .left{border-left: 390px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
   .right {border-right: 390px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 300px;}
   .top {border-right: 345px solid transparent;border-top: 200px solid #03A9F4;border-left: 345px solid transparent;}
  #button_open_envelope {position: absolute;left: 258px;}
   .frame {width: 690px;}
   .message {width: 630px;}
}
  
@media only screen and (max-width : 1366px){
  
  .navbar-nav {margin-top: 21px;}
  .mobile{float:right;margin-bottom:10px;margin-top:10px}
  
  #name, #email, #phone, #messarea, #send {width: 630px;}
  #messarea {width: 630px;}
  #send {width: 600px;}
   .bottom {width: 690px;}
   .left{border-left: 390px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
   .right {border-right: 390px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 300px;}
   .top {border-right: 345px solid transparent;border-top: 200px solid #03A9F4;border-left: 345px solid transparent;}
  #button_open_envelope {position: absolute;left: 258px;}
   .frame {width: 690px;}
   .message {width: 630px;}
}
@media only screen and (max-width: 1280px) {
  .mobile{float:right;margin-bottom:10px;margin-top:10px}
  
  .topheader{font-size:15px;}
  
/*	#name, #email, #phone, #messarea, #send {width: 630px;}
  #messarea {width: 630px;}
  #send {width: 600px;}
  .bottom {width: 690px;}
  .left {border-left: 390px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 390px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 300px;}
  .top {border-right: 345px solid transparent;border-top: 200px solid #03A9F4;border-left: 345px solid transparent;}
  #button_open_envelope {position: absolute;left: 258px;}
  .frame {width: 690px;}
  .message {width: 630px;}*/
  
  #name, #email, #phone, #messarea, #send {width: 530px;}
  #messarea {width: 530px;}
  #send {width: 500px;}
  .bottom {width: 550px;}
  .left {border-left: 250px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 250px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 300px;}
  .top {border-right: 275px solid transparent;border-top: 200px solid #03A9F4;border-left: 275px solid transparent;}
  #button_open_envelope {position: absolute;left: 208px;}
   .frame {width: 550px; left:-7px;}
   .message {width: 530px;}

}

@media only screen and (max-width : 1024px){
  
  .affix {height:12%;}
  
  .mobile{float:right;margin-bottom:10px;margin-top:10px}
  .topheader{font-size:15px;}
  
  .navbar-nav {margin-top: -30px;}
  #name, #email, #phone, #messarea, #send {width: 530px;}
  #messarea {width: 530px;}
  #send {width: 500px;}
  .bottom {width: 550px;}
  .left {border-left: 250px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 250px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 300px;}
  .top {border-right: 275px solid transparent;border-top: 200px solid #03A9F4;border-left: 275px solid transparent;}
  #button_open_envelope {position: absolute;left: 181px;}
   .frame {width: 550px; left:-7px;}
   .message {width: 530px;}
}
@media only screen and (max-width : 960px){
  
  .affix {height:12%;}
  .mobile{float:right;margin-bottom:10px;margin-top:10px}
  #name, #email, #phone, #messarea, #send {width: 320px;}
  #messarea {width: 320px;}
  #send {width: 290px;}
  .bottom {width: 360px;}
  .left {border-left: 220px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 220px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 140px;}
  .top {border-right: 180px solid transparent;border-top: 200px solid #03A9F4;border-left: 180px solid transparent;}
  #button_open_envelope {position: absolute;left: 91px;}
  .frame {width: 360px; left:0;}
  .message {width: 320px;}
  .topheader{font-size:15px;}
}

@media only screen and (max-width : 768px){
  
  .affix {height:12%;}
  .mobile{float:right;margin-bottom:10px; margin-top: 10px;}
  
  .logo img {margin-top: 3px;margin-left: 17px;}
  .topheader{font-size:15px;}
  
  #name, #email, #phone, #messarea, #send {width: 320px;}
  #messarea {width: 320px;}
  #send {width: 290px;}
  .bottom {width: 360px;}
  .left {border-left: 220px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 220px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 140px;}
  .top{border-right: 180px solid transparent;border-top: 200px solid #03A9F4;border-left: 180px solid transparent;}
  #button_open_envelope {position: absolute;left: 91px;}
  .frame {width: 360px; left:0;}
  .message {width: 320px;}
  
}

@media only screen and (max-width : 724px){
  
  .affix {height:12%;}
  
  .nav > li {position: relative;display: block;width:50% !important;margin:10px;padding-bottom:10px;}
  .navbar-brand {margin-top: -41px;}
  .logo img {width: 50%;margin-top: 32px;margin-left: 5px;}
  .mobile{float:left;margin-bottom:10px;margin-top:0px}
  .captionoverlay h1{font-size:70px;}
  .captionoverlay p{font-size:41px;}
  .captionoverlay{height:50%;width:60%;}
  .navbar-nav {margin-top: 20px;float:none;}
.topheader{font-size:15px;}

  .iconi{margin-left: 0.4rem;}
  .icons{margin-left: 0.4rem;}
  .iconp{margin-left: 0.4rem;}
  .icong{margin-left: 0.5rem;}
  .iconc{margin-left: 0.7rem;}
.lightcolor{padding-bottom:135px;}
  
  
      #name, #email, #phone, #messarea, #send {width: 530px;}
  #messarea {width: 530px;}
  #send {width: 500px;}
  .bottom {width: 550px;}
  .left {border-left: 250px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 250px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 300px;}
  .top {border-right: 275px solid transparent;border-top: 200px solid #03A9F4;border-left: 275px solid transparent;}
  #button_open_envelope {position: absolute;left: 181px;}
   .frame {width: 550px; left:-7px;}
   .message {width: 530px;}

}

@media only screen and (max-width : 640px){
  .affix {height:12%;}
  .nav > li {position: relative;display: block;width:50%;margin:10px;padding-bottom:10px;}
  .navbar-brand {margin-top: -41px;}
  .logo img {width: 72%;margin-top: -6px;margin-left: 5px;}
  .mobile{float:none;margin-bottom:10px;margin-top:0px}
  .captionoverlay h1{font-size:70px;}
  .captionoverlay p{font-size:41px;}
  .captionoverlay{height:50%;width:60%;}
  .navbar-nav {margin-top: 20px;float:none;}
  .topheader{font-size:15px;}

  .iconi{margin-left: 0.4rem;}
  .icons{margin-left: 0.4rem;}
  .iconp{margin-left: 0.4rem;}
  .icong{margin-left: 0.5rem;}
  .iconc{margin-left: 0.7rem;}
  .lightcolor{padding-bottom:135px;}
}

@media only screen and (max-width : 414px){
  .affix {height:9%;}
  .nav > li {position: relative;display: block;width:50%;margin:10px;padding-bottom:10px;}
  .navbar-brand {margin-top: -41px;}
  .logo img {width: 72%;margin-top: -14px;margin-left: 5px;}
  .mobile{float:none;margin-bottom:10px;margin-top:0px}
  .captionoverlay h1{font-size:70px;}
  .captionoverlay p{font-size:41px;}
  .captionoverlay{height:50%;width:60%;}
  .navbar-nav {margin-top: 20px;float:none;}
  .topheader{font-size:15px;}
  
  .iconi{margin-left: 0.4rem;}
  .icons{margin-left: 0.4rem;}
  .iconp{margin-left: 0.4rem;}
  .icong{margin-left: 0.5rem;}
  .iconc{margin-left: 0.7rem;}
  
  #name, #email, #phone, #messarea, #send {width: 280px;}
  #messarea {width: 280px;}
  #send {width: 250px;}
  .bottom {width: 300px;}
  .left {border-left: 160px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 160px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 140px;}
  .top {border-right: 150px solid transparent;border-top: 200px solid #03A9F4;border-left: 150px solid transparent;}
  #button_open_envelope {position: absolute;left: 61px;}
  .frame {width: 300px; left:0;}
  .message {width: 280px;}
  .lightcolor{padding-bottom:135px;}
}

@media only screen and (max-width : 375px){
  .affix {height:12%;}
  .nav > li {position: relative;display: block;width:50%;margin:10px;padding-bottom:10px;}
  .navbar-brand {margin-top: -41px;}
  .logo img {width: 72%;margin-top: -10px;margin-left: 5px;}
  .mobile{float:none;margin-bottom:10px;margin-top:0px}
  .captionoverlay h1{font-size:70px;}
  .captionoverlay p{font-size:41px;}
  .captionoverlay{height:50%;width:60%;}
  .navbar-nav {margin-top: 20px;float:none;}
  .topheader{font-size:15px;}

  .iconi{margin-left: 0.4rem;}
  .icons{margin-left: 0.4rem;}
  .iconp{margin-left: 0.4rem;}
  .icong{margin-left: 0.5rem;}
  .iconc{margin-left: 0.7rem;}

  #name, #email, #phone, #messarea, #send {width: 280px;}
  #messarea {width: 280px;}
  #send {width: 250px;}
  .bottom {width: 300px;}
  .left {border-left: 160px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 160px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 140px;}
  .top{border-right: 150px solid transparent;border-top: 200px solid #03A9F4;border-left: 150px solid transparent;}
  #button_open_envelope {position: absolute;left: 61px;}
  .frame {width: 300px;}
  .message {width: 280px;}
  .lightcolor{padding-bottom:135px;}
}

@media only screen and (max-width : 360px){
  .affix {height:11%;}
  .nav > li {position: relative;display: block;width:50%;margin:10px;padding-bottom:10px;}
  .navbar-brand {margin-top: -41px;}
  .logo img {width: 72%;margin-top: -10px;margin-left: 5px;}
  .mobile{float:none;margin-bottom:10px;margin-top:0px}
  .captionoverlay h1{font-size:70px;}
  .captionoverlay p{font-size:41px;}
  .captionoverlay{height:50%;width:60%;}
  .navbar-nav {margin-top: 20px;float:none;}
  .lightcolor{padding-bottom:135px;}
.topheader{font-size:15px;}

  .iconi{margin-left: 0.4rem;}
  .icons{margin-left: 0.4rem;}
  .iconp{margin-left: 0.4rem;}
  .icong{margin-left: 0.5rem;}
  .iconc{margin-left: 0.7rem;}


  #name, #email, #phone, #messarea, #send {width: 280px;}
  #messarea {width: 280px;}
  #send {width: 250px;}
  .bottom {width: 300px;}
  .left {border-left: 160px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right {border-right: 160px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 140px;}
  .top {border-right: 150px solid transparent;border-top: 200px solid #03A9F4;border-left: 150px solid transparent;}
  #button_open_envelope {position: absolute;left: 61px;}
  .frame {width: 300px;}
  .message {width: 280px;}
}

@media only screen and (max-width : 320px) {
  .affix {height:9%;}
  .nav > li {position: relative;display: block;width:50%; margin:10px;padding-bottom:10px;}
  .navbar-brand {margin-top: -41px;}
  .logo img {width: 72%;margin-top: -10px;margin-left: 5px;}
  .mobile{float:none;margin-bottom:10px;margin-top:0px}
  .captionoverlay h1{font-size:70px;}
  .captionoverlay p{font-size:41px;}
  .captionoverlay{height:50%;width:60%;}
  .navbar-nav {margin-top: 20px;float:none;}

  .iconi{margin-left: 0.4rem;}
  .icons{margin-left: 0.4rem;}
  .iconp{margin-left: 0.4rem;}
  .icong{margin-left: 0.5rem;}
  .iconc{margin-left: 0.7rem;}
  .lightcolor{padding-bottom:135px;}
.topheader{font-size:13px;}

  #name, #email, #phone, #messarea, #send {width: 240px;}
  #messarea {width: 240px;}
  #send {width: 210px;}
  .bottom {width: 250px;}
  .left {border-left: 110px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;}
  .right{border-right: 110px solid #337efc;border-top: 160px solid transparent;border-bottom: 160px solid transparent;left: 140px;}
  .top {border-right: 125px solid transparent;border-top: 200px solid #03A9F4;border-left: 125px solid transparent;}
  #button_open_envelope {position: absolute;left: 35px;}
  .frame {width: 250px;}
  .message {width: 240px;}
}