﻿
/*-------------------------------------------------------- ALL PAGES STYLE CSS --------------------------------------------*/	



/*---------------------------------------------------------
						ALL TYPES OF DIVS
----------------------------------------------------------*/	


/*------------------------------------
				BIG DIV
-------------------------------------*/	

.BigDiv{
    display:block;
	width:100%;
	height:auto;
	margin:0 auto;
    padding:30px 0;
    overflow:hidden;
	box-sizing: border-box;
}

.BigDiv h1{ 
    text-align:center;
    padding:0;
    margin:0;
}

.BigDiv h4{ 
    text-align:center;
    padding:0;
    margin:0;
}


/*--title and text align left--*/

.BigDiv-left{
	display:block;
	width:90%; 
	height:auto;
	margin:120px auto 30px auto;
    padding:8% 0;
    overflow:hidden;
	box-sizing: border-box;
}

.BigDiv-left h1{
	text-align:left; 
	margin-left:8%;
}

.BigDiv-left h4{
	text-align:left; 
	margin-left:8%;
}

.BigDiv-left p{
	text-align:left; 
	margin-left:8%;
}

/*--Dark-color BigDiv--*/

.BigDiv-colorbg{
	background:#001722;
}

.BigDiv-colorbg h4{
	color:#fff;
}

.BigDiv-colorbg p{
	color:#fff;
}


/*--FOR FORMS--*/
.BigDiv-form{
	display:block;
	width:80%;
	height:auto;
	margin:120px auto 30px auto;
    padding:20px 0;
    overflow:hidden;	
}

.BigDiv-form h2{
	color:#47B4DA;
}

.BigDiv-form p{
	letter-spacing:0.1em;
}


/*--------BIG DIV iPad Air & Mini------*/
@media screen and (max-width: 820px){

	.BigDiv-left h1{
		margin-top:5%;
	}

	.BigDiv-form{
		width:90%;
		margin-top:20%;
	}

	.BigDiv h1{ 
		text-align:center;
		padding:5px auto;
	}

}


/*--------BIG DIV iPhone-------*/
@media screen and (max-width: 470px){

	
	
	.BigDiv h4{ 
		text-align:center;
		padding:0;
		margin:0 25%;
	}

	/*--FOR FORMS--*/
	.BigDiv-form{
		display:block;
		width:90%;
		height:auto;
		margin-top:30%;
		padding-bottom:0;
		overflow:hidden;	
	}

	.BigDiv-form p{
	text-align: center;
	}

	.BigDiv-left h1{
		margin-top:20%;
	}
	
	.BigDiv-left h4{
		text-align:left; 
		margin-right:8%;
	}

}


/*------------------------------------
				BIG PHOTO
-------------------------------------*/	

.BigPhoto{
	display:block;
	width:100%;
	height:100vh;
	margin:0 auto;
	overflow:hidden;
    padding-top:0;
	box-sizing: border-box;
}

.BigPhoto video{
	width: 110%;
}


/*video overlay*/
#desktop-video{
	display: block;
}

#mobile-video{
	display: none;
}

.video-overlay{
	position:absolute;
	top:100px;
	left:0;
	width:100%;
	height:100vh;
	padding:0;
	overflow: hidden;
	box-sizing: border-box;
	
}

.video-overlay img{
	position: absolute;
	width:80%;
	left:20%;
	bottom:-10%;
	padding:0;
}

.video-overlay h3{
	position: relative;
	top:30%;
	left:10%;
	color:#fff;
	width:100%;
	height:auto;
}

.video-overlay h4{
	position: relative;
	top:30%;
	left:10%;
	color:#fff;
	width:100%;
	height:auto;
}

.video-overlay p{
	position: relative;
	top:31%;
	left:10%;
	color:#fff;
	width:100%;
	height:auto;
	letter-spacing:0.1em;
}

/*--------BIG PHOTO iPad Air & Mini-------*/
@media screen and (max-width: 820px){

	.BigPhoto{
		display:block;
		width:100%;
		height:500px;
		margin:0 auto;
		overflow:hidden;
		padding-top:0;
		box-sizing: border-box;
	}

	.BigPhoto video{
		height:500px;
		width:auto;
	}
	
	
	/*video overlay*/

	.video-overlay{
		position:absolute;
		top:100px;
		left:0;
		width:100%;
		height:500px;
		padding:0;
		overflow: hidden;
		box-sizing: border-box;
	}

	.video-overlay img{
		position: absolute;
		width:80%;
		left:20%;
		bottom:8%;
		padding:0;
	}

	.video-overlay h3{
		position: relative;
		top:30%;
		left:10%;
		color:#fff;
		width:100%;
		height:auto;
	}

	.video-overlay p{
		position: relative;
		top:31%;
		left:10%;
		color:#fff;
		width:100%;
		height:auto;
		letter-spacing:0.1em;
	}

}


/*--------BIG PHOTO iPhone-------*/
@media screen and (max-width: 470px){

	/*---#desktop-video{
		display:none;
	}

	#mobile-video{
		display:block;
	}--*/

	.BigPhoto{
		display:block;
		width:100%;
		height:470px;
		margin:0 auto;
		overflow:hidden;
		padding-top:0;
		box-sizing: border-box;
	}

	.BigPhoto video{
		width:auto;
		height:100vh;
		padding:0;
		margin:0;
		overflow: hidden;
	}
	
	
	/*video overlay*/



	.video-overlay{
		position:absolute;
		top:100px;
		left:0;
		width:100%;
		height:470px;
		padding:0;
		overflow: hidden;
		box-sizing: border-box;	
	}

	.video-overlay img{
		position: absolute;
		width:120%;
		left:-10%;
		bottom:5%;
		padding:0;
	}

	.video-overlay h3{
		position: relative;
		top:0;
		left:0;
		color:#fff;
		width:100%;
		height:auto;
		text-align: center;
	}

	.video-overlay p{
		position: relative;
		top:1%;
		left:0;
		text-align: center;
		color:#fff;
		width:100%;
		height:auto;
		letter-spacing:0.1em;
		font-size:small;
	}

}



/*-----------------------------------------------------------------------------
		GRID (2 columns) updated-2021
------------------------------------------------------------------------------*/	



/*********************
		DESKTOP
**********************/	

/*----------------BIG DIV (2 columns)--------------*/	

.Grid{
	display: grid;
	width: 90%;
	height: auto;
	margin: 0 auto;
	grid-template-columns: 50% 50%;


}

.Grid__Item{
	text-align: center;	
	margin: 0;
	padding:0;
	background:#eeefef;

}

.Grid__Item img{
	width:100%;
}

.Grid__Item p{
	text-align: center;
	margin: 0 auto;
	color:#0a0c22;
}

.Grid__Item h3{
	margin-top: 20%;
	text-align: center;
	
}

.Grid__Item h4{
	text-align:center;
	margin:0;
	padding:0;
	color:#0a0c22;
}



/*************************
		iPad-PRO & iPad
**************************/	

@media screen and (max-width: 1024px){

.Grid{
	width: 95%;
}

.Grid__Item h1{
	margin-top:10%;
}

.Grid__Item p{
	margin:0 5%;
	margin-bottom:5%;
}

}



/***************************
		iPhone
****************************/	

@media screen and (max-width: 470px){
   
	.Grid{
		display: grid;
		width: 90%;
		height: auto;
		margin: 0 auto;
		grid-template-columns: 100%;
		background-color: #26272b;
	
	}

.Grid-reversed {
    grid-row-start: 2;
  }

  .Grid__Item p{
	margin-bottom:10%;
}

}
   


/*------------------------------------
			BIG DIV (2 columns)
-------------------------------------*/	

.BigDiv2{    
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0; 
	overflow:hidden; 
	box-sizing: border-box;      
}

.BigDiv2 div{
    float:left;
   	display:inline;
	width:50%;
	height:auto;
	margin:0;
	padding:0;
	text-align:center;
}


/*---BIG DIV2 (Image, Video & Text)---*/

.BigDiv2 div img{
	max-width:100%;
	height:auto;
	margin-left:15%;
	margin-bottom:5%;
	padding:0;
	vertical-align:bottom;
}


/*---Text on RIGHT DIV ---*/

.BigDiv2-content{
	vertical-align:middle;
}

.BigDiv2-content div{
   	width:60%;
   	margin-top:20%;
   	margin-left:20%;
}

.BigDiv2-content h1,h2,h3,h4{
	text-align:left;
}

.BigDiv2-content p{
	text-align:left;
}

.BigDiv2-content ul{
	text-align:left;
	padding-right:15%;
	padding-left:15%;
}


/*---Text on Left DIV ---*/

.BigDiv2-content2{
	width:50%;
	vertical-align:middle;
}

.BigDiv2-content2 div{
   	width:70%;
   	margin-top:10%;
    margin-left:20%;
   	margin-right:10%;
}

.BigDiv2-content2 div section{
   margin-left:15%; 
   margin-right:15%;
   border:1px solid #505759;  
}

.BigDiv2-content2 div section p{
   font-weight:bold;
   text-align:center;
}

.BigDiv2-content2 h1,h2,h3,h4{
	text-align:left;
}

.BigDiv2-content2 p{
	text-align:left;
}

.BigDiv2-content2 ul{
	text-align:left;
	padding-right:15%;
	padding-left:15%;
}



/*----------------BIG DIV (2 columns) iPad-Air & Mini-------------*/	
@media screen and (max-width: 820px){


	.BigDiv2 div img{
		max-width:90%;
		height:auto;
		margin-left:10%;
		padding:0;
		margin-top:10%;
	}


	.BigDiv2{
		width:90%;
		height:auto;
	}


	/*---Text on Right DIV (820px)---*/

	.BigDiv2-content div{
		margin-top:20%;
		width:80%;
		margin-left:5%;
		margin-right:15%;
	}


	/*---Text on Left DIV (820px) ---*/

	.BigDiv2-content2 div{
		margin-top:20%;
		width:80%;
		margin-left:15%;
		margin-right:5%;
	}

}


/*----------------BIG DIV (2 columns) iPhone--------------*/	
@media screen and (max-width: 470px){
   
	.BigDiv2{
		width:100%;
		padding-bottom:5%;
	}

	.BigDiv2 div{
		float:left;
		display:block;
		width:100%;
		height:auto;
		padding:0;
		text-align:left;
		overflow:hidden;	
	}

	.BigDiv2 div img{
		max-width:80%;
		height:auto;
		margin-bottom:0;
		padding-bottom:0;	
	}


	/*---Text on Right DIV (470px) ---*/

	.BigDiv2-content{
		width:100%;
		height:auto;
		margin-top:0;
	}



	.BigDiv2-content div{
		width:80%;
		margin-left:10%;
		margin-right:10%;
		text-align:center; 
		margin-top:0;  
	}


	.BigDiv2-content h1,h3{
		text-align:center;
		margin:0;

	}


	.BigDiv2-content h4{
		text-align:left;
		margin-left:0;
	}


	.BigDiv2-content p{
		text-align:left;
	}

	.BigDiv2-content a:link{
		text-align:center;
	}

	.boxlink{
		margin-left:28%;
	}


	.BigDiv2-content ul{
		text-align:left;
		padding-right:10%;
		padding-left:154%;
	}


	/*---Text on Left DIV (470px) ---*/

	.BigDiv2-content2{
		width:100%;
		margin:0 auto;   	
	}

	.BigDiv2-content2 div{
		width:80%;
		margin-left:10%;
		margin-right:10%;
		text-align:center; 	
	}

	.BigDiv2-content2 h1,h3{
		text-align:center;
		margin:0;	
	}


	.BigDiv2-content2 h2{
		text-align:left;
		margin:0;	
	}


	.BigDiv2-content2 h4{
		text-align:left;
		margin:0;	
	}


	.BigDiv2-content p{
		text-align:left;
	}


	.BigDiv2-content2 ul{
		text-align:left;
		padding-right:10%;
		padding-left:14%;

	}

}



/*----------------BIG DIV (3 columns) updated-2021--------------*/	

.BigDiv3{   
    display:block;
	width:90%;
	height:auto;
	margin:0 auto;
    overflow:hidden;
	padding:2% 0;
}


.BigDiv3 div{
    float:left;
   	display:inline;
	width:31.33%;
	height:auto;
	margin:0 1%;
	text-align:center;
}





/*-- right side border turns to bottom on 470px screen size--*/
#BigDiv3-sline{
	border-right:solid 1px #eeefef;
}


#BigDiv-div-mouseover div:hover h4{	
	color: #00bfb2;	
}


.BigDiv3-Div-Standard{
	background:var(--textbg);
	color:#fff;
	overflow:hidden;
}


.BigDiv3-Div-Standard img{
	max-width:100%;
	height:auto;
	background:var(--imagebg);
}


.BigDiv3-Div-Standard h3{
	margin-bottom:15px;
	text-align:center;
}

.BigDiv3-Div-Standard p{
	margin-bottom:1%;
	text-align:center;
	margin-left:0;
	color:#0a0c22;
	
}

/*--------------------
	ROUNDED CORNER
----------------------*/

.BigDiv3-Div-RoundedC{
	background:var(--textbg);
	color:#fff;
	border-radius:5%;
	overflow:hidden;
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
}

.BigDiv3-Div-RoundedC img{
	max-width:100%;
	height:auto;
	background:var(--imagebg);
}


.BigDiv3-Div-RoundedC h3{
	margin-bottom:15px;
	text-align:center;
}

.BigDiv3-Div-RoundedC p{
	margin-bottom:1%;
	text-align:center;
	color:#47B4DA;
	
}




/*----------------BIG DIV (3 columns) iPhone--------------*/	
@media screen and (max-width: 470px){
   
.BigDiv3{
   width:90%;
   height:auto;
   padding:0;
   overflow:hidden;

}

.BigDiv3 p{
	text-align:center;
 }

.BigDiv3 div{
    float:left;
    display:block;
	width:80%;
	height:auto;
	margin:5% 10%;
	text-align:center;
	padding:0;
	overflow:hidden;	
}


/*--------------------
	ROUNDED CORNER
----------------------*/
.BigDiv3-Div-RoundedC p{
	text-align:center;
	padding:0 6%;


}

}


/*----------------BIG DIV (4 columns)--------------*/

.BigDiv4{    
    display:block;
	width:60%;
	height:auto;
	margin:0 auto;
    padding:30px 10%;
    text-align:center;
    overflow:hidden; 
        
}


.BigDiv4 div{  
    float:left;
   	display:inline;
	width:22%;
	height:auto;
	margin-left:3%;
	margin-bottom:50px;
	text-align:center;	
}




/*---BIG DIV4 (Image & Text)--*/

.BigDiv4 div img{
	max-width:50%;
	height:auto;
}


.BigDiv4 h3{ 
    text-align:center;
	margin:5px auto;
}

.BigDiv4 div p{
	text-align:justify;
	text-justify: inner-word;
	margin:0 auto;
	padding:0 6%;

}


.BigDiv4 div p.small{
	text-align:justify;
	text-justify: inner-word;
	margin:0;

}





/*----------------BIG DIV (4 columns) iPad--------------*/	
@media screen and (max-width:768px){

.BigDiv4{
    display:block;
	width:80%;
	height:auto;
	margin:0 auto;
    padding:20px 0;
    overflow:hidden;
}


.BigDiv4 div{  
    float:left;
   	display:inline;
	width:22%;
	height:auto;
	margin:0 auto;
	margin-left:2.5%;
	margin-bottom:5%;
	text-align:center;	
}



/*---BIG DIV4 (Image & Text) 786px--*/


.BigDiv4 h3{ 
    text-align:left;
	margin:5px auto;
}

.BigDiv4 div p{
	margin:0;
	padding:0 6%;
	

}


.BigDiv4 div p.small{

	margin:0;
	

}
}

/*----------------BIG DIV (4 columns) iPhone--------------*/	
@media screen and (max-width:470px){

.BigDiv4{
    display:block;
	width:95%;
	height:auto;
	margin:0 auto;
    padding:20px 0;
    overflow:hidden; 
}


.BigDiv4 div{  
   	display:inline-block;
	width:45%;
	height:auto;
	margin: 0 1% 15% 1%;
	text-align:center;	
}




/*---BIG DIV4 (Image & Text) 470px--*/

.BigDiv4 div img{
	width:45%;
	height:auto;
	margin:0 auto;
	padding:0;
	text-align:center;
}


.BigDiv4 h3{ 
    text-align:center;
	margin:2px 5%;
}

.BigDiv4 div p{
	margin:0;
	padding:2%;

}


.BigDiv4 div p.small{

	margin:0;

}
}



/*----------------BIG DIV (6 columns)--------------*/	


.BigDiv6{
    display:block;
    text-align:left;
	width:90%;
	margin:0 auto;
	height:auto;
    padding:0;
    overflow:hidden;
	box-sizing: border-box;

}

.BigDiv6 div{    
    float:left;
   	display:inline;
	width:13%;
	margin:0 1.8%;
	padding-bottom:2%;	
}

.BigDiv6 div img{
	max-width: 100%;
}


/*----------------BIG DIV (6 columns) iPad--------------*/	
@media screen and (max-width: 768px){

.BigDiv6{
    display:block;
	width:90%;
	height:auto;
	margin:0 auto;
    overflow:hidden;
}

}

/*----------------BIG DIV (6 columns) iPhone--------------*/	
@media screen and (max-width: 470px){

.BigDiv6{
    display:block;
	width:95%;
	height:auto;
	margin:0 auto;
    overflow:hidden;

}

.BigDiv6 div{    
    float:left;
   	display:inline-lock;
	width:28%;
	height:auto;
	text-align:center;   
}

}


















/*-----------------------PAGE: Thank You & contact-confirmation-------------------------------*/

#BigDiv-confirmation1{
    width:100%;
    padding:10% 0;
    height:100px;
    position:relative;
    top:0px;
    overflow:hidden;

}


#BigDiv-confirmation1 h1,p{
	margin:0 auto;

}


@media screen and (max-width: 768px){

#BigDiv-confirmation1{
    width:100%;
    padding:10% 0;
    height:100px;
    position:relative;
    top:0;
    overflow:hidden;


}
}





