@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:rbga(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(../images/backabout.jpg);
     background-attachment:fixed;
   background-repeat:no-repeat;
   background-position:cover;
   color:BLACK;}
.about img{height:250px;width:100%;padding:10px 0;}	   
   
.banner{background:url(../images/shreeback.png);
     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: #023e96;
color: white;
}

.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%;
}


/******gallary*************/

.gallary 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(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(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-gallery .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;}
}