/* GLOBAL VIEW */
/* VADA  */

body {
    font-family: 'Asap', sans-serif;
    background-color: #EBEBEB;
    
}

a {
    /* makes the menu text white */
    color: white;
    /* font-size: 1.1vw; */
    font-size: 10pt;
    line-height: 1.5rem;
    /* removes the underline for links */
    text-decoration: none;    
}

.header-container {
    /* To fix the menu bar when scrolling boxes */
    position: fixed;
    /* menu bar oocupies max width available */
    width: 100%;
    margin-top: -10px;
    z-index: 5;
    /* padding-right: 50px; */
}

header {    
    max-width: 100%;
    background-color: blueviolet;
    
    margin-right: 16px;
    /* to make the logo tag & menu tag adjacent */
    display: flex;
    /* to create space between log and menu */
    justify-content: space-between;
    /* to align vertically to middle */
    align-items: center;
}

.logo {
    /* logo text white */
    color: white;
    /* determines the height of the menu bar */
    padding: 0px 0px;
    margin-left: 20px;
}

.logo h1 {
    color: white;
    /* font-size: 2.5vw; */
    /* font-size: 1.3rem; */
    font-size: 22px;
    line-height: 2rem;
}

/* Not needed as we are using font-weight to bold */
/* .highlight { font-weight: 700; } */

/* GO TO TOP button  */
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 15px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }
  
  #myBtn:hover {
    background-color: #555;
  }
/* END GO TO TOP button  */  

nav { margin-right: 3px; 
    display: flex;    
}

.menu-button {
    padding:0px 5px;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    margin-left:  0px;
    margin-right: 10px;   

}

.menu-button a {
    /* makes the menu text white */
    color: white;
    /* font-size: 1.1vw; */
    font-size: 14px;
    line-height: 1.25rem;
    /* removed the underline for links */
    text-decoration: none;    
}


.menu-item {
    padding:5px 5px;
    border-style:solid;
    border-color: white;
    border-width: 1px;
    margin-left:  -10px;
    margin-right: 20px;   

}

.dropdown {
    display: none;
    position: absolute;
    z-index: 1;
    padding-top: 20px;
    text-align: left;
    width: 75px;
}

.menu-button:hover .dropdown {
    display: block;
}

.dropdown .menu-item {
    width: 140px;
    background-color: white;
}

.dropdown .menu-item a {
    color: #FA4083;
}

/* Hides burger menu icon & menu in global view  */
.mob-wrapper { display: none; }
.hide-menu2 { display: none;}
.hide-menu3 { display: none;}
.hide-global { display: none;}
.hide-globalp { display: none;}

  
/* --------------------------------------------- */
@media (max-width: 1300px) {
    .hide-mobile {display: block;}
    .hide-single {display: none;}
}
/* --------------------------------------------- */
@media (max-width: 1140px) {
/*  .box-2col { width: 100%;}
    .box-066 { width: 100%;}    
    .box { width: 47%;}         */
    .hide-mobile {display: block;}
    .hide-single {display: none;}
}
@media (max-width: 750px) {
    .hide-2col {display: none;}
    .hide-1col {display: block;} 
    .hide-mobile {display: block;}
    .hide-single {display: none;}
}        
#wrapper { margin: 0 auto; }

.container {
    /* border-style: solid;
    border-color: black;
    border-width: 1px; */
    /* align-items: stretch; */
    /* position: relative; */
    max-width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-evenly;
    /* margin-top: 105px;    */
    padding-top: 105px;
}
.box-100 { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content:space-evenly;}
.box-066 { width: 65%; height: 100%; margin: 10px 0px; }
.box-050 { width: 48%; height: 100%; margin: 10px 0px; }
.box-033 { width: 32%; height: 100%; margin: 10px 0px; }
.box-025 { width: 24vw; height: 100%; margin: 10px 0px; }
.box-001 {width: auto; margin-top: 10px; padding-left:20px;}

.utube1 {width: 29vw; height:16vw ;}
.utube {width: 31vw; height:17vw ;}

.box { width: 32%; height: 100%; margin: 10px 0px; 
    /* border-style: solid; 
    border-color: black;
    border-width: 1px; */
}

.box1a { width: 30%; height: 100%; margin: 10px 0px;}
.box1b { width: 36%; height: 100%; margin: 10px 0px;}
.box1c { width: 30%; height: 100%; margin: 10px 0px;}
.box1d { width: 30%; height: 100%; margin: 10px 0px;}

.box img { width: 100%; height: auto;}
.box-033 img { width: 100%; height: auto;}

.box-2col { 
    width: 65%;
    margin: 10px 0px;
    /* height: 100px; */
    /* margin-left: 15px; */
    /* background-color: aqua; */
    /* border-style: solid; */
    /* border-color: black; */
    /* border-width: 1px; */
}

.box-half { 
    width: 48%;
    margin: 10px 0px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}



.box-2col h2 {
    color: blue;
    /* font-size: 2.5vw; */
    /* font-size: 1.3rem; */
    text-align: center;
    font-size: 22px;
}

.box-2col h3 {
    color: blue;
    /* font-size: 2.5vw; */
    /* font-size: 1.3rem; */
    text-align: center;
    font-size: 18px;
}

.full-width { width: 100%; height: 100%; display: flex;  justify-content:space-evenly; }

.box-3col { 
    width: 100vw;
    margin: 10px 0px;
    /* border-style: solid;
    border-color: black;
    border-width: 1px; */
}

.box-nth {width: auto; margin-top: 10px; padding-left:20px;}
.box-001 {width: auto; margin-top: 10px; padding-left:20px;}

/* 
table{border-collapse:collapse; width: 100%;}
table, td, th, tr
{border:2px solid blue; padding-bottom:5px; padding-left:5px;}
 */
.text-box {
    width: 95%;
    /* height: 100%; */
    padding-left: 10px;
    margin-top: -10px;
    font-size: 10pt;
    /* border-style: solid;
    border-color: black;
    border-width: 1px; */
}

.box p {font-size: 11pt;}
.box-033 p {font-size: 11pt;}
/* .box p4: {font-size: 13pt; line-height: 170%;} */

.box-2col h3 { color: red; font-size: 21px; margin: 0px 0px; text-align: center; }
.box h3 { color: red; font-size: 21px; margin: 0px 0px; text-align: center; }
.box-033 h3 { color: red; font-size: 21px; margin: 0px 0px; text-align: center; }
.box h4 { color: red; font-size: 18px; margin: 0px 0px; text-align: center; }
.box-033 h4 { color: red; font-size: 18px; margin: 0px 0px; text-align: center; }
.box h5 { color: blue; font-size: 15px; margin: 0px 0px; text-align: left; }
.box-033 h5 { color: blue; font-size: 15px; margin: 0px 0px; text-align: left; }

.box a { color: blue; line-height: 200%; font-size: 18px; }
.box-033 a { color: blue; line-height: 200%; font-size: 18px; }
.box-066 a { color: blue; font-size: 18px; padding-left: 10px; }




/* Laptop View */
@media (max-width: 1000px) {

.hide-global { display: block;}
.hide-multi { display: block;}
.hide-laptop { display: none; }
.hide-mobile { display: block;}
.hide-single { display: none;}


.box { width: 47%; height: 100%; margin: 10px 5px;}
.box-033 { width: 47%; height: 100%; margin: 10px 5px;}
.box-050 { width: 100%;}
.box-066 { width: 100%;}

.box1a { width: 48%; height: 100%; margin: 10px 5px;}
.box1b { width: 48%; height: 100%; margin: 10px 5px;}
.box1c { width: 48%; height: 100%; margin: 10px 5px;}

.box-2col { width: 100%;}
.box-half { width: 100%;}



.utube {width: 46vw; height:27vw ;}
.utube1 {width: 46vw; height:27vw ;}

.hide-laptop-menu { display: none; }

.hide-menu1 { display: none;}

.hide-menu2 { display: block;}

.hide-text { display: none;}



.box1d {
    display: none;
}
/* .box-2col { width: 64%; 
    border-style: solid;
    border-color: black;
    border-width: 1px;
*/



.row1-l { width: 100%; margin-top: -10px;}
.row1-l p { margin-top: -10px; font-size: 10pt; }


}




/* Tablet View */
@media (max-width: 820px) {

.hide-tablet { display: none; }
    

.hide-tablet-menu { display: none; }

.box { width: 47%; } 
.box-033 { width: 47%; } 

/* 82 to accomodate 2 boxes in one line */    
.box1a{ width: 48%; }
.box1b{ width: 48%; }


.hide-menu2 { display: none;}

.hide-menu3 { display: block;}
.hide-mobile { display: block;}
.hide-single { display: none;}


/* 83 to make boxes that were hidden in global view to reappear*/
.hide-desktop-only { display: block; }


/* To fix the menu bar when scrolling boxes */
.header-container { position: fixed; }

/* provides between nav bar and the first row boxes */
.container { padding-top: 100px; }

/* header {
    display: block;
    text-align: center;
} */

/* 97 hides the nav display in tablet & mobile mode */
/* nav { display: none; } */

/* this is redundant after adding above */
/* nav a {
    display: block;
} */

/* determines the height of the menu bar */
.logo { padding: 0px 0; }

/* Make it reappear in tablet view after hiding in global */
/* .mob-wrapper { */
    /* stacks the menu icon and menu items */
    /* display: block; */
    /* margin-right: 10px; x
} */

/* .mob-nav { */
    /* Hides the menu items diplays only the menu icon */
    /* display: none; */
    /* Prevents menu icon moving up. Prevents menu bar */
    /* height increasing to accomodate menu items */
    /* position: absolute;
}  */

.navbutton {
    /* Stacks the menu items */
    display: block;
    /* color of the box containing menu items */
    background-color: coral;
    padding: 15px 10px;
    margin-left: -60px;
    text-align: center;
}

}



/* Pax View */
@media (max-width: 650px) {

.hide-laptop { display: none;}
.hide-global { display: none;}
.hide-pax { display: none;}
.hide-globalp { display: block;}
.hide-mobile { display: block;}
.hide-single { display: none;}

.box { width: 100%; } 
.box-033 { width: 100%; } 
.box-066 { width: 100%; } 
 
.box1a{ width: 100%; }
.box1b{ width: 100%; }
/* .box-fifth {width: 100%;} */
.utube {width: 100vw; height:59vw ;}
.utube1 {width: 100vw; height:59vw ;}

.hide-pax-menu { display: none; }

.hide-menu3 { display: none;}



/* .box1a{ width: 97%; } */

/* Displays menu */
/* .hide-desktop-menu { display: block;} */

nav { display: none; }

/* Make it reappear in tablet view after hiding in global */
.mob-wrapper {
    /* stacks the menu icon and menu items */
    display: block;
    margin-right: 25px;
}

.mob-nav {
    /* Hides the menu items diplays only the menu icon */
    display: none;
    /* Prevents menu icon moving up. Prevents menu bar */
    /* height increasing to accomodate menu items */
    position: absolute;
} 

.mob-nav {
    height: 200px;
    width: 160px;
    background-color: coral;
    margin-top: 30px;
    margin-left: -100px;
}

.mob-nav a { font-size: 11pt;}

.a { position:relative; float:left; width:65px; height: 30px; padding-left: 10px;}
.b { position:relative; float:left; width:65px; height: 30px;}
/* .c { position:relative; float:left; width:30%; height: 40px;} */

.navbutton {
    /* Stacks the menu items */
    display: block;
    /* color of the box containing menu items */
    background-color: coral;
    padding: 15px 10px;
    margin-left: -60px;
    text-align: center;
} 

.mob-nav p {
    color: white;
    font-size: 11pt;
    line-height: 1;
    padding-left: 10px;
    padding-right: 5px;
}    
}

/* Mobile View */
@media (max-width: 400px) {

/* 82 to accomodate 1 boxes in one line */
.box { width: 100%; } 
.box-033 { width: 100%; } 
.box-066 { width: 100%; } 
.box1b{ width: 100%;}

.hide-mobile-menu { display: none; }
.hide-mobile { display: none;}
.hide-single { display: block;}
}

/* 83 add class called hide-mobile */
/* apply this class to boxes you like to hide in movile view */
/*.hide-mobile {  display: none;} */
/*.diplay-mobile { display: block;} */

.logo h1 {
    color: white;
    /* font-size: 2.5vw; */
    /* font-size: 1.3rem; */
    font-size: 20px;
    line-height: 1.5rem;
}

/* determines the height of the menu bar */
.logo { padding: 0px 0; }



.anchor {
    position:relative; 
    top:-105px;   
 }


/* .header-container {
    position: relative;
}
.container {
    padding-top: 20px;
}
header {
    display: block;
    text-align: center;
}
nav a {
    display: block;
}
.logo {
    padding: 40px 0;
} */