@import url("https://fonts.googleapis.com/css?family=Raleway");

/*main background part*/
body{
  font: 15px/1.5 'Raleway';
  padding:0;
  margin:0;
  background: #f3f8ff;
}
/*scrolling*/
html {
  scroll-behavior: smooth;
}
/*upper border part*/
header{
  font: 25px/1.5 'Raleway'; /*go corona size*/
  background: #00a8cc;
  color: #ffffff;  /*go corona*/
  padding-top: 30px; /*upper border upper height*/
  height: 100px; /*upper border bottom height*/
  border-bottom: #00a8cc 6px solid;
}

/*home about contact us*/
header a{
  color:#ffffff;  
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px; /*home about size*/
}

header li{
  display:inline;
  padding: 0 20px 0 20px; /*dist bet home about*/
}

header #branding{
  float:center; /*home...position*/
}

header #branding h1{
  margin:0;
  font-weight:bolder;
}

header nav{
  float:right;
  margin-top:-55px;
}

header .highlight, header .current a{
  color:#fff;
  font-weight:bold;
  font-size: 25px; /*home size*/
}

.highlighted{
  font-weight:bolder;
}

/*underline animation*/
header a {        
  position: relative;
}

header a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 60%;
  height: 1px;
  opacity: 0;
  background-color: #a2d5f2;
  transform: translate(-50%, 0);
  transition: all 0.3s ease-in-out;
}

header a:hover::after {
  width: 100%;
  opacity: 1;
}

header a:hover{
  color:#fff;
  text-decoration: none;
}

.container{
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.bg-grey {
  background-color: #f6f6f6;
}

.jumbotron {
  background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../pro/ration.jpg") ;
  color:white;
  padding: 300px;
  text-align:center;

}

.container-fluid {
  padding: 60px 50px;
}

.button{
	margin-top:4%;
}

.bton{
	border:1px solid #fff;
	padding:10px 30px;
	color:white;
	text-decoration:none;
	margin-top:5%;
	transition:0.6s ease;
	cursor:pointer;
}

.bton:hover{
	background-color:#fff;
	color:#000;
	text-decoration:none;
}

.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
    width:20%;
    height:20%;
    display:inline-block;
    overflow: hidden;
    margin:50px;
  }

.thumbnail:hover{
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
  
.thumbnail img{
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }

.buton{
	border: 1px solid green;
	padding:3px;
	color:white;
	text-decoration:none;
	background-color: green;
}

.buton:hover{
	border: 1px solid green;
	padding:3px;
	color:white;
	background-color: green;
	text-decoration:none;
}

.details{
	/*background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("ration.jpg");*/
	background-color: rgb(0,168,204,0.5) ;
	text-align:left;
	margin-top:40px;
  font-size:15px;
}

.img1 {
	margin-top:3%;
     float:left;
    margin-left:30px;
    margin-right:40px;
}

.p1{
	display:inline;
	color:#000;
	text-align:left;  
	font-weight:500;
	font-size:20px;
	word-spacing:2px;
	margin-right:3%;

}

.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
  color:black;
  font-size:15px;
  font-weight:600;
  margin-left:20px;
  text-decoration: underline;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 60% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.bg{
	background-color: rgba(0,0,0,0.7);
	color:#fff;
	float:left;
	margin-top:15px;
	width:45%;
  text-align: left;
}

 .row {
    flex-direction: column-reverse;
  }
  
 .col-25 {
    margin-bottom: 20px;
  }

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 50%;
}

.col-25,
.col-50,
.col-75 {
  padding: 15px 20px;
}


.container {
  background-color: transparent;
  padding: 5px 20px 15px 20px;
  border: 1px solid transparent;
  border-radius: 3px;
  color:white;
  display:inline-flex;

}

.container input[type=text] {
  width:100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;

}

.container input[type=email] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;

}

.container input[type=password] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;

}

.container label {
  margin-bottom: 10px;
  display: block;
  text-align:left;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 30%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

a {
  color: #2196F3;
}

hr {
  border: 1px solid #fff;
}

span.price {
  float: right;
  color: grey;
}

input{
	color:black;
}

form{
	text-align:left;
}

.radiobuttons{
	font-size:17px;
}

.bg2{
	/*position:absolute;
	top:2300px;
	left:930px;*/
	margin-top:-159%;
	background-color: rgba(0,0,0,0.7);
	color:#fff;
	float:right;
	width:45%;
	margin-right:50px;
	margin-bottom:70px;
}

.bottompoints{
	font-size:18px;
    background-color:rgb(0,168,204,0.5);
    margin-left:50px;
    margin-right:50px;
    margin-top: 3%;
    color:#000;
}

.horizontal-scroll {
  background-color: #fff;
  overflow: hidden;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 5px 0;
  text-align:center;
}


.containernav{
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.back{
		background-image: url("../pro/vol1.jpg");
		background-position: center;
		border-radius: 15px 15px 15px 15px;
		background-size: cover;
		font-family: sans-serif;
}

.regform{
  width: 100%;
  height: 500px;
  background-color: rgb(0,0,0,0.8);
  margin:auto;
  color: #ffffff;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-radius: 15px 15px 15px 15px;
   }
.main{
  margin-left: 680px;
  text-align:left;
  font-size: 20px;
}

.submit{
  background-color: white;
  font-size: 15px; 
  margin-left: 130px;
  border-radius: 15px 15px 15px 15px;
  font-weight: bold; 
    }


/*SUBSCRIBE*/
#bottom {  /*mail button*/
    padding: 15px; /*blue border size*/
    color: #ffffff;
    background: #00a8cc;
    border-top: #00a8cc 3px solid;
    min-height: 70px;
    font-family: "Raleway";
}

#bottom h1{
  float:left;
  color: #fff;
  font-size: 28px;
   font-weight: 595;
}

#bottom form {
  float:center;
  
}

#bottom input[type="email"]{
  padding:4px;
  height: 40px;
  width:250px;
  padding: 6px 10px;
  font-family: "Raleway";
  background: #00a8cc;
  border: solid 2px #fff;
  color: #fff;
}

#bottom input[type="email"]:hover{
  background-color: #fff;
  color: #00a8cc;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}

#bottom input[type="email"]:hover::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #00a8cc;
  opacity: 1; /* Firefox */

}

#bottom input[type="email"]:hover::-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

#bottom input[type="email"]:hover::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}

.button_1 { /*subscribe button*/
    font-family: "Raleway";
    height: 41px;
    background: #00a8cc;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    border-radius: 50px;
    border: solid 2px #fff;
}

.button_1:hover{
  background-color: #fff;
  color: #000;
}

#bottomcontainer {
    padding: 15px;
    color: #ffffff;
    background: #000;
    border-top: #000 3px solid;
    min-height: 70px;
    font-family: "Raleway";
}

.bottomcontainer{
  width: 80%;
  margin: auto;
}

#bottomcontainer h1{
  float:left;
  margin-left: 100px;
}

#bottomcontainer form {
  float:right;
  margin-top:15px;
  margin-right: 100px;
}

#bottomcontainer h1{
  float:left;
  margin-left: 100px;
}

#bottomcontainer form {
  float:right;
  margin-top:15px;
  margin-right: 100px;
}


.icons {
  margin-top: 25px;
}
.icons a {
  display: inline-block;
  width: 32px;
  height: 35px;
  cursor: pointer;
  border-radius: 50px;
  border: 1px solid #fff;
  font-size: 20px;
  color: white;
  text-align: center;
  line-height: 35px;
  margin-right: 3px; /*dist bet icons*/
  margin-bottom: 5px;
}

#img01{
  width:100%;
  height:100%;
}

.modal {
z-index:1;
display:none;
padding-top:10px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.8)
}

.modal-content{
margin: auto;
display: block;
    position: absolute;
    width:600px;
    height:500px;
  top: 20%;
  left: 27%;
}


.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}


.close {
text-decoration:none;
float:right;
font-size:24px;
font-weight:bold;
color:white;
}

.container1 {
width:200px;
display:inline-block;
}

.modal-content, #caption {   
  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}