@charset "utf-8";

/***


CSS File for index.php 
aloysiusworldwide.com


Playfair+Display:400,700i,900i" 






heirarchy


<section>
	<article>
		<h1>
			<p>






**/



#preabout div{
width:16.6667%;
height:auto!important;
float:left;
margin:0;
padding:0;
display:block;
}
#preabout img{
width:100%;
margin:0;
padding:0;
}

#preabout span{
box-shadow: 0px -12vw 12vw 3vw #000F02 inset;
min-height:100%;
z-index:2;
position:absolute;
width:100%;
}


#preabout p{

z-index: 9!important;
    line-height: 200%;
    margin: 0 25%;
    /* margin-right: auto; */
    width: 50%;
    position: absolute;
    bottom: 0;
    color: #fff;

}



.seclogo{
width:70%;
margin:0 15%;
}

/* ---------ABOUT/couture Properties --------------*/
#about{
box-shadow:-28.5px -135px 60px #000 ;   
    
}

 #about,  #preabout, #media, #services{
/*about is couture*/
	
	background-color:#000F02;
	
	/*box-shadow: 1.5px 1px 23px #000;*/
	padding-top:33px;
	
	}
	
#about div{
float:left;
width:50%;
margin: 5% 0;
}
#about>div img,#about>div  p{
margin:0;
padding:0;
}

#about img, #media img{
	text-align:center;
	width:42%;
	margin:15px;
	
	padding:2vw;
	margin:0 25%;/*to make it centered*/
	}
#about p, #media p, #services p{
		color:#FFF;		
				
		line-height:250%;		
		font-size:80%;
	}
/* ---------ABOUT/couture Properties --------------*/



/* ---------bgstory, charity Properties --------------*/
#bgstory, #charity, #shop{
	
	padding-top: 33px;
	min-height:100px;
	}

#bgstory hr, #charity hr, #shop hr{
	
	margin:100px 0px;
	
}	
#bgstory img,#charity img, #shop img{
	width:42%;
	margin:0 29%;/*to make it centered*/
	margin-top:4vw;
	
	}
	 #shop2 img{
	     position:relative;
	 }
 #shop2>p{
    /* width: 42%; */
    /* margin: 0 29%; */
    /* margin-top: 4vw;*/
    position:absolute;
    z-index:3;
    }
    
#bgstory p, #charity p, #shop p{
		
		
		
		
		line-height:250%;
		color:#000F02;
		font-size:80%;
		}
#bgstory img{
    
}
/* ---------bgstory, charity Properties --------------*/





#shop #title{
color:white;
}








*{
margin:0;

}
body{
	
	margin:0;
	padding:0;
	/*background:pink;*/
	font-family: 'Montserrat', sans-serif;	
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	}

/* ---------General Properties --------------*/

a{
	text-decoration:none;
}
img{
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
section{
	
	min-height:200px;
	width:100%;
	float:left;/*to not let things overlap*/
	overflow:hidden;
	background:#fff;
	position:relative;
	}
article{
	
	width:60%;
	margin:50px 20%;/*to make it centered*/
	
	line-height:170%;
	float:left;/*to not let things overlap*/
	}	

article p{
	
	width:60%;
	margin:10% 20%;/*to make it centered*/
	box-sizing:border-box;
	overflow-wrap: break-word;
	}
	
	
	/*h1s*/
#title ,#title2 ,#founder font{
	text-align:center;
	display:block;
	font-size:7vw;
	font-family: 'Abril Fatface';
	letter-spacing:-.4vw;
	margin-bottom:4vw;
	line-height:100%;
	text-align:center;
			}	
#title ,#founder font{
	color:#000F02;
	}
	#title2 {
	
	color:#ff;
	}
	
#header2{
	font-family:Montserrat,sans-serif;
	letter-spacing:4vw;
	text-transform:uppercase;
	font-size:200%;
	text-align:center;
	width:80%!important;
	margin:1% 10%;
	
	
	
}	
#charity p{

font-size: 159%;
}	
	
	/*h1s*/
	




/* ---------General Properties --------------*/

/*********--------------SLIDER--------------***********/

#container{
	/*margin-top:53vw;
	/*
	box-shadow:0vw 1vw 10vw 15vw #000;
	box-shadow:0vw 1vw 10vw 15vw #000;
	*/
}

.banner{
	/*top:0;
	position:fixed;
	z-index:-2;
*/

}
.banner h1, .banner h2{
		font-family: 'Open Sans', 'Montserrat', sans-serif;
		text-transform:uppercase;
		position:absolute;
		display:block;
		float:left;
		z-index:300;
		left:5vw;
		color: #021C03;
		line-height: 52.5px;
}
.banner h1{
		font-size: 2.2vw;		
		bottom:4vw;
		
	}
.banner h2 {
		font-size: 1vw;		
		bottom:5.5vw;
		
	}

#charitieslure {
 
z-index:300;
top:22vw;
position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  top: 27vw;
  
}
	
#charitieslure a{
	width:30vw;
	padding:3vw 20vw;
	opacity:0.6;
	font-size:1.3vw;
	font-weight:bold;
	letter-spacing:0.7vw;
	text-decoration:none;
	color:white;
	background:rgba(0,0,0,0.6);
	border:0.6vw solid rgba(255,255,255,1);
	-webkit-transition:all .15s ease-out;
}

#charitieslure p{
	top:12vw;
	background:#021C03;
	width:12vw;
	text-align:left;
	font-size:1vw;
	color:white;
	padding:3vw;
}


#charitieslure a:hover{
	opacity:1;
	letter-spacing:3.5vw;
	-webkit-transition:all .15s ease-out;
}	

/* ---------HOME banner Properties --------------*/

	#home{
	min-height:52.5vw;
	}
	
	p{
	margin-bottom:6%;
	}
	.banner .dots li{
	padding:0.3vw;
	border-radius:50%;
	
	}
	
/* ---------HOME (banner) Properties --------------*/



/*****              FIX SLIDER TO FULLSCREEN ON ALL RESO           *****/



.banner {
    height: 100vh!important;
}
.banner img, .banner ul li video, .banner ul li source{
    height: 100vh!important;
}



/*****              FIX SLIDER TO FULLSCREEN ON ALL RESO           *****/


/*********--------------SLIDER--------------***********/


/* ---------GALLERY  (tiles of links)  Properties --------------*/
#gallery{
	text-align:center;
	min-height:100px;
}
#gallery div{
	margin:0%;
	width:25%;
	height:auto;
	float:left;
	
}

#gallery img{
	/*border:15vw solid white;*/
	margin:0;
	width:100%;
	height:auto;
	float:left;
	margin-bottom:5%;
	display:block;
	text-align:center;
	
	}

#gallery p{
	
	color:#000F02;
	display:block;
	 
	font-size:1vw;
	font-weight:none;
	
	margin-bottom:5%;
	letter-spacing:1vw;
	text-transform:uppercase;
}

/* ---------GALLERY  (tiles of links) Properties --------------*/

/************===========      bgstory       ============**************/


/*

heirarchy
<sec =bgstory>
	<art=opnngrmrks>opening quote</art>
	<art=mapart>map of calado</art>
	<art=locs>locations
		<h2/>
		<p yearloc/>
		<p loccaption/>
		<div fascinators>
			<img>
			<img>
		</dv>
		<div thumblocs>
			<img>
			<img>
		</dv>
	</art>
</sec>

*/








/*********     Chapter 1: "The fashion industry is the..."   ******************/




#openingremarks {   /**article**/

}

#openingremarks img{ /** AWW logo  **/
	text-align:center;
	width:20%;
	margin:0px 40%;
	}


#openingremarks p{	
	font-size:120%;	
	}
	
	
#openingremarks img,#openingremarks p{
	
	position:relative;
	
	}	
	
#openingremarks #title{
	position:relative;
	}	
	
/*********     xxx Chapter 1: "The fashion industry is the..." xxx  ******************/






/*********     Chapter 2: map   ******************/



#mapart{    /**article**/
	position: relative !important;
	height: 100vh;
    margin: 0!important;
    width: 100%!important;
	}
	
	
	
		
/**------pins----------**/
	
#mapart>div>a div{ /**pins**/

	
	z-index:100;
	position:absolute;
	display:block;
	margin:0 !important;
	    width: 2.4vw;
    height: 4vh;

	}
#mapart>div>a>div img{
width:100%;	
}
#ph{
	right: 20vw;
    top: 25.5vw;
	}
#ldn{
    left: 42.6vw;
    top: 14vw;
	}
#ny{
    left: 24.5vw;
    top: 17.1vw;
	}
#in{
	right: 28.5vw;
    top: 21vw;
	}	
#la{
	    left: 12.6vw;
    top: 19.1vw;
	}	
	
/**------xxx    pins    xxx----------**/




/*********   xxx  Chapter 2: map  xxx   ******************/


/*********     Chapter 3: locations   ******************/
/*


<art=locs>locations
		<dv locsinfo/>
		<dv locsinfo/>
		<dv locsinfo>
		
			<h2/>
			<p yearloc/>
			<p loccaption/>
			<div fascinators>
				<img>
				<img>
			</dv>
			<div thumblocs>
				<dv><img></dv>
				<img>
			</dv>
			
		</dv>
	</art>




*/







#locs .locsinfo{  
		width:90% !important;
		float:left;
		margin:10px 5% !important;
		min-height:60vw;
		position: relative !important;
		padding-top: 10%;
		box-sizing:border-box;
}

	
.locsinfo h2{
       font-family: 'Playfair Display',serif;
       font-weight:700;
       font-style:italic;
       font-size:9vw;
       color:#6E5C49 !important;
       line-height:90%;
       letter-spacing:-.4vw;
       position:absolute;
       top:20%;
       width:70%;   /* prev. 65%  */
}
#newyork h2,#losangeles h2{
font-size:7.5vw;
top:22%;
}
#india h2{
font-size:4.4vw;
}
#philippines h2{
font-size:7vw;
top:25%;
}

#locs p{	
	
	margin:0;
	float:left;
	color:black;
	position:absolute;
	}	


.yearloc{
	font-size:4vw;
	color:#918661!important;
	font-family: 'Playfair Display',serif;
	font-weight:400;
	top:35%;
}	

.desc{
top:40%;
font-size:80%;
width:40%;
}	

.fascinators div{
	padding:0;

position: absolute;

margin-left: auto;
margin-right: auto;
text-align:center;
	}
.fascinators>div img{
	
	}
.fascFRONT,.fascSIDES1,.fascSIDES2,.fascSIDES3{
width:20vw;

}



.fascFRONT{
	left: 0;
right: 0;
	z-index:5;
}


.fascFRONT img{
	height:43vw;
}	


.fascSIDES1{
	left: 0;
right: 0;
	z-index:4;
	
}

.fascSIDES1 img{
	height:30vw;
	
	
}
	
.fascSIDES2{
		left: 0;
right: 0;
	z-index:3;
}




.fascSIDES2 img{
	height:25vw;
}

	
	
.fascSIDES3{
	
	z-index:2;
	margin-bottom:30%;
}



.fascSIDES3 img{
	height:20vw;
	
}

#ldn2 img{
height:40vw;
}	
	
	
#ph2 img {
 -moz-transform: scaleX(-1);
 -o-transform: scaleX(-1);
 -webkit-transform: scaleX(-1);
 transform: scaleX(-1);
 filter: FlipH;
 -ms-filter: "FlipH";
}	




/*

#t0{
z-index:4;

left: 0;
right: 0;
}
#t0 img{
height:30vw;

}
#t1{
z-index:3;
left: 30%;
right: 0;
}
#t1 img{
height:20vw;

}
#t2{
z-index:2;
right: 30%;
left: 0;

}
#t2 img{
height:20vw;

}
#services img{

}

	
	
	
	
	
	
	
	
	
/*	
.locsinforight .fascinators img{
	left:10%;
	}
	
.locsinforight img,.locsinforight p,.locsinforight h2{
	float:right!important;
	text-align:center;
}	
	

.thumblocs div{
	width:30% !important;
	float:left;
	
	}

.thumblocs>div img{
	width:100% !important;
	height:auto;
	margin:0 !important;
	float:left;


}
	*/
.fascinators>div img{
    width:unset!important;
     max-width:unset!important;
}	
	
/*********   xxxx  Chapter 3: locations xxxx  ******************/




/*********    SEC w/ cover photos  ******************/
/*********    shop & article  ******************/



#shop article, #media article{
position:absolute ;
top:40%;
z-index:2;

}

,
#shop>img, #media>img, .coverbgphotos{
min-width:100%!important;
float:left;
margin:0;
padding:0;

}

.subforcoverbgphotos{
color:white;
text-transform:uppercase;
font-size:120%;
text-align:center;
width:80%!important;
margin:1% 10%;
z-index:2;
}
/*********    shop & article  ******************/
/*********   xxxx SEC w/ cover photos xxxx  ******************/


.simplerheadertext, .XLsimplerheadertext{
	color:white;
	text-transform:uppercase;
	font-size:150%;
	letter-spacing:.24vw;	
	text-align:center;
	display:block;	
	margin-bottom:4vw;
	line-height:100%;
	text-align:center;
}

.XLsimplerheadertext{
	font-size:350%;
	letter-spacing:2.24vw;
}



/*****               CHARITIES            ******/

/**     SOW TO SEW CAMPAIGN           ***/




#sowtosew{
border:2vw solid #fff;
padding:3%;
position:relative;
box-sizing:border-box;

}
#sowtosewsec img{
border-radius:50%;
padding:0;
border:2vw solid #000F02;
float:left;
box-sizing:border-box;
width:50%;
margin-left:25%;
margin-right:25%;
margin-top:-18%;
}


#sowtosew img{

}	
	

#sowtosew p {
margin:5% 20%;
width:60%;
}	
	

	
	
	
	


/**     SOW TO SEW CAMPAIGN           ***/
#pledgebutton{
margin:0px 25%;
width:50%;
text-decoration:none;
padding:10px;
text-align:center;
color:#fff;
float:left;
display:block;
border:1px solid rgba(255,255,255,0.41);
transition:0.1s linear;
text-transform:uppercase;
box-sizing:border-box;
/*
background:#565;
*/
border-radius:20px;
}

#pledgebutton:hover{
background:rgba(255,255,255,1);
border:1px solid rgba(255,255,255,0.0);
color:#000;
/*
letter-spacing:3px;
background:none;
background:#131;
transition:0.2s linear;
*/
}		
	
/*****               CHARITIES            ******/	
	


/* ---------CONTACTS footer Properties --------------*/

#contact article{
	width:33.33%;
	float:left;
	
	margin:50px 0px;
	padding:0px;
	
	
	font-size:70%;
	}

	
	
/* ---------CONTACTS Properties --------------*/	
	
/*********      footer        ***********/





	
#contact{
	min-height:300px;
	background-color:#f3f3f3;
	color:#252525;
	padding:2% 5%;
	box-sizing:border-box;
	}
	
#contact img{
	width:40%;
margin-bottom:15px;
}
#cright{
	text-transform:uppercase;
	font-size:30%;
	opacity:0.4;
	margin-top:10px;
	width:100% !important;
}
#mycustomfooter p{
	margin:0;
}
#mycustomfooter div{
	float:left;
	width:25%;
		margin:20px;
}
.customaddress{
	font-size:70%;
}
.customaddress p{
	font-size:90%;
	margin-bottom:5px !important; 
}
.customaddress h3{
	line-height:initial;
}

	#contact a{
		margin-right:8px;
		text-decoration:none;            
		color:#373737;
		text-transform:uppercase;
	}
	
	
#support img{
opacity:0.4;
height:80px;
width:auto;
/*
margin-top: 5%;
margin-right: 5%;
margin-left: -2%;
*/
}
	
/*********      footer        ***********/		
	
	
	

/*********   go back to top button  ******************/	



	#up{
		z-index:10;
		display:block;		
		bottom:3vw;		
		padding:4px;
		height:75px;
		opacity:.7;
		-webkit-transition:all .40s ease-out;
		}
	#up:hover{
		opacity:1;
		-webkit-transition:all .15s ease-out;
		/*border-top:4px solid #fff;*/
		}
	

	.sticky{
		right:3vw;
	-webkit-transition:all .40s ease-out;
	position:fixed;
		}	




/*********   xxxx go back to top button xxxx  ******************/	
	
	












.bgcover,#fabrics img{
width:100%;
margin:0;

position:relative;
float:left;
min-height:600px;
}

.fabricinfo{
height:10%;
width:75%;
 margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
z-index:3;
color:#fff;
    line-height: 180%;
text-align:center;

    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;

}
.fabricinfo span{
    font-weight:600;
    line-height:85%;
}
.fabricinfo p{
color:#fff!important;
background:rgba(0,0,0,0.65);
font-weight:500;
margin-bottom:0px;
margin-left:5%;
    padding: 65px 35px;
}


.fabricinfo h1{
text-transform:uppercase;
font-weight:bold;
letter-spacing:2vw;
font-size:250%;
margin:1vw;
line-height:114%;
}
#pinacalado .fabricinfo{
background: rgb(51 40 35 / 65%);
padding-left: 5%;
    height: fit-content; 
}
#pinacalado p{
    background:none;
}
#blastdetailedbg{
z-index:2;
height:80%;
width:75%;
 margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

}











/*************---------      couture services       ------------*******************/



#services{
min-height:auto;
color:white;
text-align: center;
}


#showcontainer{

height:30vw;
position: relative;
padding:10%;
}

#showcontainer div{
padding:0;
width:20vw;
position: absolute;

margin-left: auto;
margin-right: auto;
text-align:center;
}



#t0{
z-index:4;

left: 0;
right: 0;
}
#t0 img{
height:30vw;

}
#t1{
z-index:3;
left: 56%;
right: 0;
}
#t1 img{
height:20vw;

}
#t2{
z-index:2;
right: 59%;
left: 0;

}
#t2 img{
height:20vw;

}
#services img{

}





/*************---------      couture services       ------------*******************/
	
#about hr{
width:100%!important;
margin:0!important;
padding:0!important;
}	
#about h2{
color:#fff;
margin-bottom:3%;

}	

.fhalf{
width:50%!important;
}
.shalf{
width:50%important;
padding-top:10%;
}
.fhalf img{
margin:0!important;
padding:0!important;
width:90%!important;
height:auto;
}
.shalf p{
margin:0!important;
width:100%;
}	
	
.shalf img{
padding:0!important;
margin:5% 35%!important;/*to make it centered*/
border-radius: 5%;
width:30%!important;
display: block;
}	
	
 .shalf a{
margin:5% 0!important;
padding:5%!important;
width:100%!important;
 }	
	
	
@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
	
	article{
	
	width:95%;
	margin:50px 2.5%;/*to make it centered*/
	}
	#home{
		min-height:5vw;
		
		}
	#bgstory img,#charity img, #shop img{
		width:100%;
		margin:0;
		padding:0;
		}
	#gallery div{
	
	width:25%;
	
	
	}

	#openingremarks img{

width:20%;
margin:0px 40%;


}


.locsinfo h2{
font-size:50px;
width:100%!important;
}
.yearloc{
font-size:140%!important;
}
.locsinfo {
min-height:582px!important;

}
.desc{

width:70%!important;

}
.fascFRONT img{
height:500px;



}
.fascSIDES1 img{
height:300px;

}
.fascSIDES2 img{
height:200px;

}
.fascSIDES3 img{
height:100px;

}
.fascFRONT{
width:168vw;

}
.fascinators div{

}

.fascinators .fascSIDES1,.fascinators .fascSIDES2,.fascinators .fascSIDES3{
width:150vw;
}
#philippines .fascSIDES1{
width:129vw;
}
.fascSIDES2{
width:120vw;
}
#london .fascSIDES2{
width:140vw;
}
#newyork .fascSIDES1{
width:131vw;
}
#newyork .fascSIDES2{
width:115vw;
}
#india .fascSIDES2{
width:139vw;
}
#india h2{
top:0;

}
 #philippines h2, #india h2{
font-size:50px;
}

#losangeles h2{
font-size:76px;
top:10%;
}



#london h2{
font-size:70px;
}
#newyork h2{
font-size:79px;
top: 11%;
}
#ph2 img {
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
 filter: FlipH;
 -ms-filter: "FlipH";
}

#ldn2 img{
height:70vw;
}	




 #fabrics img {
    object-fit: cover;
    width: 100%;
    height: 1000px;
}

#fancy article{
margin:50px 0%;
}

#preabout span{
    box-shadow: -2px -256px 27vw 46px #000F02 inset;
}




#preabout div{
width:33.33%;

}

.customawwcolumns{
width:93%!important;
    margin-top: 40px!important;
}
.seclogo {
    width: 100% !important;
    margin: 0;
}
.fabricinfo h1{
line-height: 107%;
}

#preabout p{


    margin: 0 10%;
 
    width: 80%;


}

#support a{
margin:0;
}

#preabout font{
text-shadow: 0px 1px 3px #000;
}
#about div{
width:100%!important;
}






}



















@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

article{
	
	width:88%;
	margin:50px 6%;/*to make it centered*/
	}
	#home{
		min-height:5vw;
		
	}
	#bgstory img,#charity img, #shop img{
		width:100%;
		margin:0;
		padding:0;
	}

	#gallery div{
		width:25%;
		
	}
	
	#gallery p{
	
	
	font-size:5px;
	

	vertical-align:middle;

	letter-spacing:1vw;
	
}
article p{
	
	width:80%;
	margin:10% 10%;/*to make it centered*/
	
	}
#about img, #media img{
	
	width:42%;
	margin:5px;
	/* border:1vw solid white; */
	padding:2vw;
	margin:0 10%;/*to make it centered*/
	}
		
#title,#title2 ,#founder font{

font-size:310%;
margin-bottom:50px;
line-height:110%;
}
#about img, #media img{
	box-sizing:border-box;
	width:85%;
	
	/*border:15px solid white;*/
	padding:25px;
	
	}
	
#openingremarks img{

width:20%;
margin:0px 40%;
}

#mapart>div>a img{
width:20px!important;
}	
#ph{
right:19vw;
top:16vw;

}
#ldn{
left:39vw;
top:8.1vw;

}
#ny{
left:21.7vw;
top:10.1vw;

}
#in{
right:28vw;
top:13vw;

}
#la{
left:13.5vw;
top:12.1vw;

}

/*
.locsinfo h2{
font-size:50px!important;
width:100%!important;
}
.yearloc{
font-size:140%!important;
}
.locsinfo {
min-height:550px!important;
width:70%!important;
}
/*
.locsinfo {
transform:scale(1);
min-height:350px!important;
}	
.locsinfo h2 {
font-size:240%!important;

}
.yearloc{
font-size:140%!important;
}
.fascinators img{
width:100px!important;
}

*/

#shop article, #media article{
transform:scale(0.8);
top:30%;
font-size:70%;
line-height:30%!important;
}

#openingremarks{
font-size:70%;
}



#shop article p{
margin:0 auto;
width:100%;
}

#pledgebutton{
width:90%;
margin:5%;
}
#sowtosew{
padding:1px;
}
#sowtosew p{
margin:8px 10%;
width:80%;
}
#sowtosewsec{
margin-top:-45%!important;
}

.bgcover,#charity img{

object-fit: cover;
width:100%;
height:1000px;
}
 #shop img, #media img{

object-fit: cover;
width:100%;
height:600px;
}
#media>article>img{
width:40%;
margin:0px 30%;
border:0;
padding:0;
object-fit:fill !important;
height:auto;
}

.fabricinfo {
height:80%;
    flex-direction: column;
}

.fabricinfo h1{
margin-top:15%;
margin-bottom:0%;
}
#pinacalado .fabricinfo {
    padding-left: 0px;
}
#pinacalado p{
    margin-left:0px;
}
#showcontainer{
padding:0;
height:500px;
}
#showcontainer div{
width:auto;
}
#services img{
width:130px;
height:auto;
}
#t0 img{
width:210px;
}





}