/* global */

html{
    scroll-behavior: smooth;
}

* {
	padding: 0;
    margin: 0;
	font-family: 'Cabin', sans-serif;
	font-family: 'Dosis', sans-serif;
    font-family: 'Noto Sans HK', sans-serif;
}

body{
    overflow-x:hidden;
}

/*=========================== 
button to take you to the top
of the page.
============================*/

.topButton{
    position: fixed;
    bottom:20px;
    left:20px;
    z-index:5;
    padding:2px;
    background-color:  #3B3E45;
    border-radius:10px;
    cursor: pointer;
    transition:.2s;
}

.topButton a{
    text-decoration: none;
    color:white;
}

/*================= 
contents:

1. navBar.
2. header.
3. section
	3.1. greeting keyframe

4. shortInfo
5. testimonials
6. contact/footer
7. mediaquery 0px.
8. mediaquery 540px.
9. mediaquery 801px
10.mediaquery 1000px.
11.mediaquery 1584px.
===================*/

/* ===========================
section for the navBar 
..dropdown, animation, links..
=============================*/

.navBar {
	background-color: #3B3E45;
	overflow: hidden;
	position: fixed;
    z-index: 2;
    width:100%;
}

.links{
    display:none;
}

.navBar a {
    color: #3CACE0;
	font-size: 0.8em;
	padding: 10px 30px;
	text-decoration: none;
	transition: 0.2s;
}

.navArea{
    position:relative;
    display:flex;
    justify-content: center;
    margin: 10px;
}

#button {
    background-color: #3B3E45;
    color: #3CACE0;
    font-size: 1.6em;
}

.navInfo{
    font-size: 1.6em;
}

/* not displaying this element until a smaller 
screen size. */
#dropDownMenu {
	text-align: center;
    margin:20px; 
    font-weight: bolder; 
    display:none;
}

#dropDownMenu li {
    padding: 12px;
    list-style-type: none;
}

#dropDownMenu a:hover {
	background-color: #3CACE066;
	color: white;
	border-radius: 1em 4em 1em 4em;
	-webkit-border-radius: 1em 4em 1em 4em;
    -moz-border-radius:1em 4em 1em 4em;
	transition: .2s;
	font-size:0.8em;
}

.navTitle{
	color: #3CACE0;
    text-align: center;    
    left:20px;
    text-decoration: underline;
}

/* ====================
section for the header 
=====================*/

.image{
    background-image: url("clearskies3.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	height: 175px;
	position: relative;
    z-index:0;
    opacity:0.8;
    top:60px;
}

.image i{
    color:white;
    position:relative;
    font-size:3.5em;
    left:40%;
    top:30%;
    opacity:0.7;
    animation-name:logo;
    -webkit-animation-name: logo;
    -moz-animation-name:logo;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
}

@keyframes logo{
    0%{
        transform: translateY(20px); 
        -webkit-transform: translateY(20px); 	
        -moz-transform: translateY(20px); 		
        opacity:0;
    }
    
    100%{
        transform: translateY(0); 
        -webkit-transform: translateY(0); 
        -moz-transform: translateY(0); 
        opacity:0.7;
    }
}


/* =============================
section for the the main section
..headings, paragraphs, quotes.. 
==============================*/

.section {
    margin-top:45px;
	font-weight: 1000;
    font-size:1.2em;
	color: white;
}

.greeting {
	font-size: .7em;
	z-index:0;
    padding:10%;
    color: #3CACE0;
    text-align: center;
    animation-name:greeting;
    -moz-animation-name:greeting;
    -webkit-animation-name:greeting;
   animation-duration:4s;
   -webkit-animation-duration:4s;
   -moz-animation-duration:4s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
}
/* greeting keyframe */
@keyframes greeting{
	0%{
	transform: translateY(-25px); 
    -webkit-transform: translateY(-25px); 	
	-moz-transform: translateY(-25px); 	
	opacity:0;
	}

	100%{
	transform: translateY(0); 
    -webkit-transform: translateY(0); 
	-moz-transform: translateY(0); 
	opacity:1;	
}
    }

.paragraph1{
    text-align: center;
	padding: 8%;
	background-color: #3CACE0;
    color: white;
	box-shadow: 0px 0px 15px 0px black;
    -webkit-box-shadow: 0px 0px 15px 0px black;
	-moz-box-shadow: 0px 0px 15px 0px black;

}

.quote1{
    padding: 10%;
    color: #3CACE0;
}

.paragraph2{
    text-align: center;
	padding: 8%;
	background-color: #3CACE0;
	box-shadow: 0px 0px 20px 0px black;
    -webkit-box-shadow: 0px 0px 20px 0px black;
	-moz-box-shadow: 0px 0px 20px 0px black;
}

.quote2{
    padding: 10%;
	color: #3CACE0;
    text-align: right;
    position:relative;
}

.paragraph3{
	padding: 8%;
    box-shadow: 0px 0px 20px 0px black;
    -webkit-box-shadow: 0px 0px 20px 0px black;
	-moz-box-shadow: 0px 0px 20px 0px black;	background-color: #3CACE0;
    text-align: center;
}

.quote3{
    padding: 10%;
    color: #3CACE0;
}

.paragraph4{
    text-align: center;
	padding: 8%;
	background-color: #3CACE0;
    box-shadow: 0px 0px 20px 0px black;
    -webkit-box-shadow: 0px 0px 20px 0px black;
	-moz-box-shadow: 0px 0px 20px 0px black;}

.paragraph4 a{
    text-decoration: underline;
    color: white;
}
   
.section h2 {
	font-size: 1.4em;
}
.section h2:before{
	content:open-quote;
}
.section h2:after{
	content:close-quote;
}
.section p {
    font-size: 0.8em;
    width:90%;
    margin-left: auto;
    margin-right: auto;
}

/* ====================
section for the shortInfo 
..text overlapping imgs..
========================*/
/* grid is in the media query */

.shortInfo {
	color: #3CACE0;
    text-align: center;
    margin-top: 60px;
}

.shortInfo h3 {
	font-size: 1em;
	border: 2px solid #3CACE0;
	width:50%;
	margin-right: auto;
	margin-left: auto;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius:30px;
	-o-border-raidus:30px;
	padding:10px;
	margin-bottom:20px;
}

.shortInfo i {
	color: #3B3E4599;
    font-size: 450%;
    opacity: 30%;
    margin-right: auto;
    margin-left: auto;
}

.textOverlap a {
	text-decoration: underline;
	transition: 0.2s;
    -webkit-transition: 0.2s;
	-moz-transition: 0.2s;
    color: #3CACE0;
    cursor: pointer;
}
.textOverlap a:hover {
	transition:0.2s;
    -webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	font-size: 1.1em;
}
.textOverlap{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}



.p1 p,
.p2 p,
.p3 p,
.p4 p,
.p1 i,
.p2 i,
.p3 i,
.p4 i{
	position: relative;
}

.p1 p,
.p2 p,
.p3 p,
.p4 p {
	bottom: 60px;
    font-weight: bold;
    font-size: .8em;
    margin-left: auto;
    margin-right: auto;
}

.p1 i{
    top:65px;
}

.p2 i {
	top: 70px;
}

.p3 i{
    top:75px;
}

.p4 i {
	top: 70px;
}

/* ==========================
section for the testimonials 
..layout, quote icons..
==============================*/

.testimonial {
    color: white;
	background-color: #3CACE0;
    box-shadow: 0px 0px 20px 0px black;
    -webkit-box-shadow: 0px 0px 20px 0px black;
    -moz-box-shadow: 0px 0px 20px 0px black;
    text-align: center;
    position:relative;
    padding:30px;
    display:none;
}

.testsection{
    text-align: center;
    font-weight: bold;
    padding:40px;
    font-size: .8em;
}

.testimonialName{
    font-style: italic;
	font-weight: normal;
}

.testimonial h3 {
	font-weight: bolder;
    font-size: 1.5em;
}
.testQuote:before{
    content:open-quote;
}
.testQuote:after{
    content:close-quote;
}

/* Set the size of the div element that contains the map */
#map {
    height: 60vh;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
    box-shadow: 0px 0px 10px 0px black;
    -webkit-box-shadow: 0px 0px 10px 0px black;
    -moz-box-shadow: 0px 0px 10px 0px black;
  }

  .map{
      padding-bottom:100px;
      padding-top:50px;

  }

  .map h3{
      text-align:center;
      margin-bottom:50px;
      color:#3CACE0;
  }


/*==========================
Section for the contact form
==========================*/

.form{
	background-color: #3CACE0;
    text-align: center;
    padding-bottom:40px;
    padding-top:40px;
    box-shadow: 0px 0px 20px 0px black ;
    -webkit-box-shadow: 0px 0px 20px 0px black ;
    -moz-box-shadow: 0px 0px 20px 0px black ;
    }

.formText{
	color:white;
	border: 2px solid white;
	border-radius: 8px;
    -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
    font-size: .9em;
    width:80%;
    margin-right:auto;
    margin-left:auto;
    font-weight:bolder;
    padding:15px;
	}


    
.text{
	color:white;
	font-size: .9em;
	font-weight: bold;
}

.formGroup{
	width:100%;
    margin-top:20px;
    
}

.formGroup input, 
.formGroup textarea{
	width:80%;
	padding:5px;
	border: 1px solid  #3CACE0;
	margin-top:5px;
	border-radius: 8px;
    -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

textarea{
	resize:vertical;
}

button[type="submit"]{
	width:70%;
	border:none;
	outline:none;
	padding:5px;
	border-radius:8px;
	background-color: whitesmoke;
	margin-top:20px;
	color: #3CACE0;
	font-size: .8em;
	font-weight: bold;
	cursor: pointer;
	transition:0.4s ease;
    -webkit-transition:0.4s ease;
	-moz-transition:0.4s ease;
}

button[type="submit"]:hover{
	transition:0.4s;
    -webkit-transition:0.4s;
	-moz-transition:0.4s;
	background-color: lightcyan;
}


/* ===========================
section for the contact/footer 
============================*/

.contact {
    color: #3CACE0;
    text-align: center;
    display:block;
    position: relative;
    margin-top:50px;
    margin-bottom: 50px;
    font-weight:bold;
}

.contactInfo {
    text-align: center;
    padding:20px;
}

.contactInfo a{
    text-decoration: underline;
    color: #3CACE0;

}

.contact i {
	color: #3B3E45;
	font-size: 175%;
	opacity: 40%;
}

.contact p {
	font-size: .8em
}

/* ===============================
section for the media query 400px 
..mobile layout..
=================================*/

@media screen and (min-width: 400px) and (max-width: 600px) {

.p1 i, .p2 i, .p3 i, .p4 i{
    top:50px;
}
}

/* ===============================
section for the media query 600px 
..tablet to small screen..
=================================*/

@media screen and (min-width: 600px) and (max-width: 1000px) {
	
    .navbar a{
        font-size:1.2em
    }

    .navArea{
        font-size:1.2em;
    }

    .image{
        height:225px;
    }

    .image i{
        left:45%;
        top:35%;
    }

    .greeting{
        font-size: 1em;
    }

    .section p {
        font-size: 1em;
        width:400px;
    }

    .section h2{
        font-size:1.3em;
    }

    .shortInfo h3{
        font-size:1.1em;
    }

    .shortInfo p{
        font-size:1em;
        width:400px;
    }

    .map h3{
        font-size:1.1em;
    }

    .formText, .text{
        font-size:1em;
    }
    
    .formGroup input, 
.formGroup textarea{
	padding:15px;
}

button[type="submit"]{
padding:10px;
}
}

/* ===============================
section for the media query 1000px 
..laptop layout..
=================================*/

@media screen and (min-width: 1000px) and (max-width: 1500px) {
	
    .navArea {
		display: none;
	}

    #dropDownMenu{
        display:none;
    }

    .navBar{
        padding:30px;
        text-align: center;

    }

    .links{
        display:contents;
        font-size:1.2em;
        font-weight: bold;
    }

    .image{
        height:300px;
    }

    .image i{
        left:46%;
        top:40%;
        font-size:4.5em;
    }

    .greeting{
        font-size: 1.2em;
        margin-top:-40px;
        margin-bottom:-40px;
    }

    .section p {
        font-size: 1.2em;
        width:500px;
    }

    .section h2{
        font-size:2em;
    }

    .shortInfo h3{
        font-size:1.5em;
    }

    .shortInfo p{
        font-size:1.2em;
        width:500px;
        padding:20px;
    }

    .shortInfo i{
        top:100px;
    }

    .map{
        width:90%;
        margin-left: auto;
        margin-right:auto;
    }

    .map h3{
        font-size:1.3em;
    }

    .formText, .text{
        font-size:1.2em;
    }
    
    .formGroup input, 
.formGroup textarea{
	padding:20px;
}

button[type="submit"]{
padding:20px;
}

.contactInfo p{
    font-size:1.1em;
}
.contactInfo i{
    font-size:2em;
}

    

}

/* ===============================
section for the media query 1584px 
..desktop layout..
=================================*/

@media screen and (min-width: 1500px) and (max-width: 20000px) {
    .navArea {
		display: none;
	}

    #dropDownMenu{
        display:none;
    }

    .navBar{
        padding:40px;
        text-align: center;

    }

    .links{
        display:contents;
        font-size:1.4em;
        font-weight: bold;        
        transition:0.2s;

    }

    .hoverOver:hover{
        background-color: #3CACE066;
        color: white;
        border-radius: 1em 4em 1em 4em;
        -webkit-border-radius: 1em 4em 1em 4em;
        transition: .2s;
        font-size:0.9em;
    }

    .image{
        height:300px;
    }

    .image i{
        left:47%;
        top:40%;
        font-size:5em;
    }

    .greeting{
        font-size: 1.2em;
        margin-top:-100px;
        margin-bottom:-100px;
    }

    .section p {
        font-size: 1.4em;
        width:500px;
    }

    .section h2{
        font-size:3em;
    }

    .shortInfo h3{
        font-size:2em;
    }

    .shortInfo p{
        font-size:1.5em;
        width:500px;
        padding:20px;
    }

    .shortInfo i{
        top:170px;
        font-size:6em;
    }

    .map{
        width:80%;
        margin-left: auto;
        margin-right:auto;
    }

    .map h3{
        font-size:2em;
    }

    .formText, .text{
        font-size:1.5em;
    }

    .formText{
        width:40%;
    }
    
    .formGroup input, 
.formGroup textarea{
	padding:20px;
    width:60%;
}

button[type="submit"]{
padding:20px;
width:40%;
}

.contactInfo p{
    font-size:1.2em;
}
.contactInfo i{
    font-size:2em;
}

}