/*--------------------Commom for all pages elements ------------------------------------------------------------------*/

*{
	margin: 0;
	padding: 0;
}
body {
 	background-color: #f8fcef;
	font-family: 'Exo', sans-serif;
	font-weight: 400;
 }
.basic{
	width:90%;
	padding-left: 5%;
	}

/* bootstrap rewrites*/

.navbar {
	width: 100%;
	}
.navbar-default{
	font-size:1.0em;
	font-weight: 400;
	height: 70px;
	opacity: .95;
	}
.navbar-default p,
.headingm p{
	font-family: 'Rammetto One', cursive;
	font-size:1.1em;
	color: #601d03;
	width: 20%;
	float:left;
	padding: 1em;
}
.menu li,
.menum li{
	font-family: 'Exo', sans-serif;
	font-weight: 400;
	margin-top: 8px;
	} 

/* The navigation bar container*/
.containermy{
	width: 100%;
	margin: 0;
	padding: 0;
	
}
.containermy h2{
	font-family: 'Exo', sans-serif;
	font-weight: 600;
	font-size: 2.3em;
	text-align: center;
	color: #601d03;
	}

/* The logo settings*/
.logo{
	height:50px;
	float:right;
	margin-top: 9px; 
	padding-right: 2em;
	padding-left: 2em;
	}

/* ul tags menu, navigation */

.navigation_my{
	display: inline;
	width: 55%;
	cursor: pointer;
	}

.navigation_my li,
.collapse li{
	font-weight: 600;
	text-align: center;
	font-size:1.3em;
	list-style: none;
    padding-top: 1.1em;
    padding-right: 0.6em;
    padding-bottom: 0.7em;
    padding-left: 0.5em;
	display: inline-block;
	text-decoration: none;
		} 

.navigation_my li:focus,
.navigation_my li:hover,
.collapse li:focus,
.collapse li:hover{
	background-color: #ffc53e;	
	transition:.2s;
	border-bottom: .25em solid #e27d19;
	}


.mobile_btm{
	opacity: .75;
	cursor:pointer;
}
.mobile_btm:hover{
	opacity: 1;
	transition:0.5s;
}


/* top navigation fixed position*/
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  }
.header,
.headerm,
.headers{
	z-index: 1200;
	color: #fdf7f2;
}

/* footer*/

.footer {
   left: 0;
   bottom: 0;
   margin-right: 3.2em;
   }
.footer_link {
	width:5em;
	height:100%;
	padding: 1.5em;
	padding-right: 1em;
	}
.footer_link:active,
.footer_link:hover {
	opacity: .75;
	}

h1 {
  font-family: 'Rammetto One', cursive;
  font-size:1.5vh;
  text-align: center;
  color: #601d03;
   }
h2 {
	text-align: center;
	color: #380a0a;
	}
h3 {
	padding: 1%;
	font-family: 'Rammetto One', cursive;
	}
p {
  color: black;
  font-weight: 600;
  font-family: 'Exo', sans-serif;
  padding: 2%;
  line-height: 1.5;
  font-size:1.2em; 
	}
.one_line{ 
white-space: nowrap;
}
.mini:hover,
.mini1:hover{
	color: orange;
	transition:0.5s;
	cursor:pointer;
}
#col2 p{
color: orange;	
};

.rectangle { 
  width: 2%;
  float:left;
  height: 37px;
  width: 4px;
  background-color: #380a0a;
  margin-left: 2em;
  margin-top: 1.3em;
	
}
 


/*--------------------Home page Elements ------------------------------------------------------------------*/


/* Welcome line and block */
.welcome,
.welcomem{
	width: 100%;
	text-align: left;
}

.welcome h1,
.welcomem h1{
	font-family: 'Rammetto One', cursive;
	text-align: left;
	color: #601d03;
	font-size:3.3vw; /*font change with screen*/
	padding-top: 8%;
	padding-left: 4.5%;
} 

.welcome h2,
.welcomem h2{
	font-family: 'Exo', sans-serif;
	font-size:1.3em; /*font change with screen*/
	text-align: left;
	line-height: 1.3;
	color: #601d03;
	width: 55%;
	right: 50%;
	margin-left: 1%;
	opacity: 1;
	padding-left: 1.5%;
	border-left: 7px;
	border-left-style: solid;
 	margin-left: 5%;
	} 
.about{
	padding-top: 20px; 
	}


/* Images Styling*/


.bio_my_mages{ /* small Images Styling home page*/
  display: block; 
  width: 96%;
  height: auto;
  opacity: 1;
  position: relative;
  margin-right: 2%;
  margin-left: 2%;
  transition:1s;
min-height: 300px;
}
.bio_my{
	float: left;
	}

/*-------------------Screen adjustments ------------------------------------------------------------------*/

@media (max-width : 320px ) {
	#myHeaderm,
	#myHeader,
	.headingm,
	.top,
	.welcome{
		display: none;
	}
	.collapse li{
	float: left;
	width: 60%;
	background-color: #fdf7f2;
	opacity: 0.95;
	border-bottom: .1em solid #e2a519;
	border-top: .2em solid #ffffff;
}
	.welcomem h1{
	width: 90%;
	font-size: 1.5em;
	border-left: .2em solid #601d03;
	margin-left: 1em;
	margin-top: 1em;

	}
	.welcomem h2{
	width: 90%;
	font-size: 1em;
	border:none;	
	}
	
	.fon{
	margin-top:-4em;
	height: 600px;
	overflow: hidden;
	}
	.bio_my_mages{
	
	display: none;
		}	
	
	.about{
		margin-top: 3em;
	}
	
	.footer_link {
	width:4em;
	}
	
}

@media (min-width : 320px ) and ( max-width : 767px ) {
	#myHeaders,
	#myHeader,
	.welcome{
		display: none;
	}
	
	.navbar-default{
	height: 55px;
	}

	.navigation_my{
	width: 100%;
	}
	.navigation_my li{
	font-size:1.0em;
	padding-top:0.9em;
	} 
			
	.headingm p{
	font-size:0.9em;
	padding: 0;	
	margin-left: 5%;
	margin-top: -3.5em;
	padding-left: 1em;
	border-left: 7px;
	border-left-style: solid;
	} 

	.logo{
	height:50px;
	padding-left: 5%;
	margin-top: -4em;
	}
		
	.welcomem h1{
		font-size: 1.6em;
		margin-left:2%;
		padding-top: 5em;
		padding-bottom: 2%;
		text-align: center;
		width: 96%;
	}

	.welcomem h2{
		width: 90%;
	}

	
	.menum{
	margin-top: 0;	
	}

	.centered{
		display: block;
		margin-left: auto;
  		margin-right: auto;
			
	}
	
.bio_my_mages{ /* small Images Styling home page*/
   width: 100%;
}
.bio_my{
	float: left;
	}
.bio_my_mages{
	
	width: 102%;
		}	
#bio_my_big	{
	display: none;
	}
	
.col-sm-6_my{
	width: 95%;
	margin-left: 2%;
	}	
	.about{
		margin-top: 0em;
	}
	
	.footer_link {
	width:4.5em;
	}
.sticky {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  }
	
}
@media (min-width : 768px ) and ( max-width : 1200px )  {
	#myHeaders,
	#myHeaderm,
	.headingm,
	.top,
	.welcomem{
	display: none;
	}	
	.navigation_my li{
	float: right;
}
.col-sm-6_my{
	width: 80%;
	margin-left: 10%;
	}	
.home6_my{
	width: 80%;
	margin-left: 12%;
	float:left;
	position: relative;
		}	
#bio_my_big{
	display: none;
	}
	
}
@media (min-width : 1201px ) and ( max-width : 1400px )  {
	#myHeaders,
	#myHeaderm,
	.headingm,
	.top,
	.welcomem{
	display: none;
	}	
	.navigation_my li{
	float: right;
}
.col-sm-6_my{
	width: 95%;
	margin-left: 5%;
	float: left;
	}	
	
.home6_my{
	width: 45%;
	margin-left: 5%;
	float:left;
	position: relative;
	min-height: 400px;
	}	
.home6_my{
	width: 45%;
	margin-left: 5%;
	float:left;
	position: relative;
		}
#bio_my_small{
	display: none;
	}
}

@media (min-width : 1401px ){
	#myHeaders,
	#myHeaderm,
	.headingm,
	.top,
	.welcomem{
	display: none;
	}	
.navigation_my li{
	float: right;
}
.home6_my{
	width: 45%;
	margin-left: 5%;
	float:left;
	position: relative;
	min-height: 500px;	}
		
#bio_my_small{
	display: none;
	}	
	
}