@charset "UTF-8";
body {
background-color: #98515b;
}

h1 {
color: rgba(255,255,255,1.00);
font-family: "American Typewriter";
font-size: 1.5em;
margin-top: 2%;
margin-left: 16%;
margin-right: auto;
margin-bottom: 2%;
}

h2 {
font-family: "PT Mono", "PT Mono Bold";
color:#FFFFFF;
font-size: 1em;
}

h3 {
font-family: "PT Mono", "PT Mono Bold";
color: #FFFFFF;
font-size: 75%;
}

p{ 
font-family: "PT Mono", "PT Mono Bold";
color: #FFFFFF;
font-size:.75em;
}

#dropdown {
width: 32.5%;
float: left;
margin-bottom: 4%;
}

ul, li {
	margin-left: 1.7%;
	list-style: none;
	font-size: 100%;
	transition: all .2s ease-in-out;
}
ul a {
height: 1.5em;
text-decoration: none;
background-color: #FF98CA;
color: black;
padding: .2em 1.1em .1em .5em;
border-bottom: .15em solid black;
transition: 2.
}

li a{
display: block;
width: 90%;
height: 1.5em;
background-color: #BD8749;
color: black;
padding: .2em 1.9em .1em .5em;
border-bottom: .15em solid black;
border-right: .15em solid black;
border-left: .15em solid black;
transition: all .2s ease-in-out;
}

ul.submenu li a:hover {
	background-color: #B9A26E;
}

#portrait {
float: left;
margin: 0 auto 2% auto;
width: 100%;
display: grid;}

.selfp {
width: 63%;
float: left;
margin-right: auto;
margin-left: auto;
}

.title {
    margin-right: auto;
    margin-top: 15px;
    float: left;
    margin-left: auto;
	margin-bottom: 8px;
}

.titles {
    margin-right: auto;
    margin-top: 15px;
    float: left;
    margin-left: 25%;
	margin-bottom: 8px;
}

.titless {
    margin-right: auto;
    margin-top: 15px;
    float: left;
    margin-left: 21%;
	margin-bottom: 8px;
}

.titlesss {
    margin-right: auto;
    margin-top: 15px;
    float: left;
    margin-left: 20%;
	margin-bottom: 8px;
}

.descriptions {
    float: left;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5%;
    width: 80%;
}

#mts {
float: left;
width: 80%;
margin: 0 auto 3% 15%;
display: grid;
}

#visual {
float: left;
width: 80%;
margin: 0 auto 3% 13%;
}

#tourism {
float: left;
width: 80%;
margin: 0 auto 3% 16%;
}

#mt sac {
float: left;
margin: 0 auto 5% auto;
display: grid;
width: 100%;
}

.kirin {
    width: 70%;
    float: left;
    margin-left: 15%;
	margin-right: auto;
}


#csuf1 {
	
}

.mexican {
width: 70%;
float: left;
margin-left: 15%;
}

.dune {
width: 70%;
float: left;
margin-left: 15%;
}

#socials {
width: 40%;
float: left;
margin-left: 28%;
}

.soc {
width: 40%;
float: left;
margin-left:10% ;
}

.soci {
width: 41%;
margin-left: 0;
}

@media (min-width: 505px) {
	h1 {
	margin-left: 23%;
	font-size: 1.65em
	}
	
	#dropdown {
	width: 25%
	}
	
	h2 {
	font-size: 1.15em
	}
	
	p {
	font-size: .9em;
	}
	
	.titles {
	margin-left: 37%;
	}
	
	.titless {
	margin-left: 9%;
	margin-bottom: 2.5%
	}
	
	.titlesss {
	margin-left: 9%;
	margin-bottom: 2.5%;
	}
	
	#tourism {
float: left;
width: 80%;
margin: 0 auto 3% 11%;
}

	.socialmedias{
	margin-left: 18%
	}
	.soc {
	width: 35%;	
	}
	
	.soci {
	width: 35%
	}
	
}

@media (min-width: 714px) {
	h1 {
	margin-left: 29%;
	}
	
	.titless {
	margin-left: 15%;
	}
	
	.titlesss {
	margin-left: 14%;
	}
	
	.soc {
	width: 20%;
	}
	
	.soci {
	width: 20%;
	}
	
	.socialmedias {
	margin-left: 27%;
	}
	
}

@media (min-width:768px) {
	h1 { 
	font-size: 2.7em;
	margin-left: 18%
	
	}
	
	h2 {
	font-size: 1.8em
	}
	
	h3 {
	font-size: .9em
	}
	
	p {
	font-size: 1.3em
	}
	
	
	
	#dropdown {
    width: 83%;
    margin-left: 5%;
    margin-right: auto;
	}
	.menu {
	display: none;
	}
	nav {
	
	}
	ul,li {
	display: inline-block;
	list-style: none;
	float: left;
	margin-right: .04em;
	margin-left: auto;
	
	}
	
	ul.submenu {
	margin-left: auto;
	}
	
	li a {
    display: block;
    padding: 1 9% 10em 0em;
    width: 100%;
    hieght: 120px;
    margin-left: 20%;
	border-top: .15em solid black; 
   
	}
	
	a {
	text-align: center
	}
	
	ul a {
	padding-right: 27.4%;
	float: left;
	height: 30px;
	width: 90%;
	}
	
	.selfp {
	width: 43%;
	margin-left: 26%;
	}
	
	.kirin {
	width: 55%;
	margin-left: 22%;
	}
	
	.mexican {
	width: 55%;
	margin-left: 22%;
	}
	
	.dune {
	width: 55%;
	margin-left: 22%;
	}
	
	.titless{
	width: 80%
	}
	
	.titlesss{
	width: 80%
	}
}

@media (min-width: 1003px)
{
	
	h1 {
	margin-left: 26%;
	}
	
	#dropdown {
    width: 100%;
	margin-left: 8%;
   
	}
	
	nav {
    margin-left: 2.9%;
	}
	
	#mts {
width: 60%;
margin-left: 21%
	}
	
	#visual {
width: 60%;
margin-left: 21%;
	}
	
	#tourism {
	width: 60%;
	margin-left: 21%
	}

}

@media (min-width: 1102px)
	
{
	
	nav {
margin-left:
	6.7%
	}
	#dropdown {
	margin-left: 13%;
	}
}
@media (min-width:1214px) {

	
	
}
@media (min-width: 1230px)
{
	
	nav {
	
	}
	
.submenu{

}

}
@media (min-width:1280px){
	h1 {
font-size: 4.9em;
margin-left: 16%
	}
	
	h3 {
	font-size: .95em
	}
	
	
	a.submenu { Width: 80%;
margin-left: 30%;
padding-right: auto
	}
	.selfp {
	width: 30%;
	Margin-left: 6%
	}
	
	#dropdown {
	margin-left: 15%;
	}
	
	.title {
float: none;
margin-right: 25%;
margin-top: -35%;
	}
	
	.descriptions {
    float: right;
    width: 50%;
	margin-left: 45%;
	margin-top: -30%;
   font-size:2em 
	}

	#mt sac {
width: 29%;
	}
	
	.kirin {
	width: 25%;
	margin-left: 7%;
	margin-top: 1%;
	opacity: 70%;
	transition: all .1s ease-in;
	
	}
	
	.kirin:hover {
	opacity: 100%;
	}
	
	.titles {
	width: 25%;
	float: none;
	margin-left: 9%;
	margin-bottom: 2%;
	margin-top: 2%;
	}
	
	#mts {
	float: left;
	width: 25%;
	margin-left: 7%;
	font-size: .9em;
	}
	
	.mexican {
	width: 25%;
	margin-left: 2%;
	margin-right: 0;
	margin-top: -37.35%;
	opacity: 70%;
	transition: all .1s ease-in;
	}
	
	.mexican:hover {
	opacity: 100%;
	}
	
	.titless {
	width: 25%;
	float: left;
	margin-left: 3%;
	margin-top: -4%;
	font-size: 1.2em
	}
	
	#visual {
	width: 25%;
	font-size: .9em;
	margin-left: -25%;
	margin-bottom: 0;
	margin-right: 0;
	}
	
	.dune {
    width: 25%;
    float: left;
    margin-left: 1%;
    margin-top: -37.5%;
    padding-bottom: 4%;
	opacity: 70%;
	transition: all .1s ease-in;
	}
	
	.dune:hover {
	opacity: 100%;
	}
	
	.titlesss {
	width: 25%;
	font-size: 1.2em;
	float: left;
	margin-left: 2%;
	margin-top: -4.5%
	}
	
	#tourism {
	width: 25%;
	font-size: .9em;
	margin-left: 2%;
	margin-top: -2%
	}
	
	.soc {
	transition: all .7s ease-in-out;
	
	}
	
	.soc:hover {
	transoform: rotate(360deg)
	}

}

@media (min-width: 1494px) {
	h1{ 
Margin-left: 21%;
}
	
	a.submenu { Width: 80%;
margin-left: 20%;
padding-right:42%;

}
	
	li a {
margin-left: 30%;

	}
	nav.cf {
	}
	
}

@media (min-width: 1600px) {
	h1{ 
Margin-left: 24%;
}
	
	a.submenu { Width: 80%;
margin-left: 20%;
padding-right:52%;

}
}	
	
	@media (min-width: 1680) {
	
		.titles {
		margin-left: 7%;
		}
	}