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

body{
	font-family: 'Assistant', sans-serif;
}

p {
	 text-align: justify;
	 font-size: 16px;
	 color: rgb(75, 75, 75);
}

footer p {
	 font-size: 12px;
}

#ianvaledotcom h2 {
	font-family: 'Over the Rainbow', cursive;
	font-size: 28px;
	font-weight:bold;
	color:#555;
	text-shadow: 2px 2px #ececec;
}

h2 {
	 color: rgb(75, 75, 75);
}

h3 {
	 color: rgb(75, 75, 75);
}

h4 {
	 color: rgb(75, 75, 75);
}

h5 {
	 color: rgb(37, 37, 37);
}

h6 {
	 color: rgb(232, 232, 232);
}

.footernav {
  font-size: 12px;
  color:  rgb(150, 150, 150);
}

.footernavref {
  font-size: 12px;
  color:  rgb(150, 150, 150);
}

.footernavref a {
  font-size: 12px;
  color:  red;
  text-decoration: none !important;
}


@media only screen and (max-width: 767px) {
		/* your iframe */
		#footer { 
			 font-size: 12px;
		}
  }

.nav-link {
  border: 1px transparent solid;
  color:  rgb(150, 150, 150);
 }

.nav-link:active {
	 background-color: white;
	 color: white;
}

.nav-link:hover {
	 background-color: white;
	 color:  rgb(150, 150, 150);
	 border: 1px red solid;
	 }

.active {
	 background-color: white;
	 color: white;
	 border: 1px red solid;
}

#carouselExampleFade {
	max-width:1000px;
}

.carousel-item {
	 border:none;
}

.carousel-item img {
	 padding:2%;
	 box-shadow: 3px 3px 10px 5px lightgray;
}

.carousel-caption {
	border: 1px rgb(206, 84, 82) solid;
	background: #dddddd;
	max-width: 90%;
	width: 90%;
	left: 5%;
	z-index:10;
	top: 92%;
	bottom:auto;
}

@media only screen and (max-width: 576px) { 
  .carousel-caption {
	  border: 1px blue solid;
	  padding-left:10px;
	  padding-right:10px;
	  padding-top:5px;
	  padding-bottom:5px;
	  background: #dddddd;
	  max-width: 90%;
	  width: 80%;
	  left: 10%;
	  z-index:10;
	  top: 82%;
	  bottom:auto;
  }
 }
 
@media only screen and (min-width: 576px) { 
	.carousel-caption {
		border: 1px green solid;
		padding-left:15px;
		padding-right:15px;
		padding-top:5px;
		padding-bottom:5px;
		background: #dddddd;
		max-width: 90%;
		width: 70%;
		left: 15%;
		z-index:10;
		top: 89%;
		bottom:auto;
	}
  }
  
@media only screen and (min-width: 768px) { 
	  .carousel-caption {
		  border: 1px yellow solid;
		  padding-left:15px;
		  padding-right:15px;
		  padding-top:10px;
		  padding-bottom:10px;
		  background: #dddddd;
		  max-width: 90%;
		  width: 60%;
		  left: 20%;
		  z-index:10;
		  top: 90%;
		  bottom:auto;
	  }
	 }
	 
@media only screen and (min-width: 992px) { 
		.carousel-caption {
			border: 1px red solid;
			padding-left:15px;
			padding-right:15px;
			padding-top:10px;
			padding-bottom:10px;
			background: #dddddd;
			max-width: 90%;
			width: 80%;
			left: 10%;
			z-index:10;
			top: 93%;
			bottom:auto;
		}
	  }

.carousel .carousel-indicators button {
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background-color:gray;
 }
 
.carousel .carousel-indicators .active {
	  width: 10px;
	 height: 10px;
	 border-radius: 100%;
	 background-color:rgb(206, 84, 82);
  }
 
.carousel-indicators {
	position:absolute;
	right:0;
	bottom:-30px;
	left:0px; 
  }
  
@media only screen and (max-width: 576px) { 
	  .carousel-indicators {
		  position:absolute;
		  right:0;
		  bottom:-30px;
		  left:0px; 
		 }
	 }

@media only screen and (min-width: 576px) { 
		.carousel-indicators {
			position:absolute;
			right:0;
			bottom:-20px;
			left:0px; 
		  }
	  }
	  
@media only screen and (min-width: 576px) { 
#oneline {
		font-size:12px;
		text-align: center;
		margin-left:0px;
		margin-right:0px;
		 }
		}

@media only screen and (max-width: 576px) { 
		#oneline {
				font-size:10px;
				text-align: center;
				margin-left:0px;
				margin-right:0px;
				 }
				}
		


.card {
	background-color: #dddddd;
}

.cardtext p {
	font-size:14px;
	line-height: 100%;
	text-align:center;
}




.tabs a:hover {
 background: #f8f9fa;
 border-top: 1px red solid !important;
 border-left: 1px red solid !important;
 border-right: 1px red solid !important;
 border-bottom: 1px #f8f9fa solid !important;
 }





.rightimg {
	 float: right;
	 border: 1px red solid;
	 min-width: 150px;
	 width: 25%;
}

.leftimg {
	 float: left;
	 border: 1px red solid;
	 min-width: 150px;
	 width: 25%;
}

@media (min-width: 576px) { 
  .rightimg {
		float: right;
		border: 1px red solid;
		min-width: 150px;
		width: 25%;
  }
 }
 
 @media (min-width: 576px) { 
	.leftimg {
		 float: left;
		 border: 1px red solid;
		 min-width: 150px;
		 width: 25%;
	}
  }

.card{

	 transition: all 0.2s ease;
	 cursor: pointer;
}

.card:hover{
	 transform: scale(1.05);
}