/********** common setting **********/
.logo img{
   max-width: 150%;
}

html {
  background-color: #ffffff !important; 
}

p {
	font-family: 'Roboto', sans-serif;
	color: #63666A !important;
}

#banner p {
	font-family: 'Roboto', sans-serif;
	color: #63666A !important;
}

#banner h1 {
    font-family: 'Roboto', sans-serif;
	color: #63666A !important;
    }

h2 {
    font-family: 'Roboto', sans-serif;
	font-size: 2.8rem !important;
    font-weight: 700;
	color: #63666A !important;
}
.logo img {
  min-width: 350px;
}


img {
    display: block;
    max-width: 100%;
}

a,
button {
    cursor: pointer;
}

.jumbotron {
    margin-bottom: 0 !important;
	background-color: #ffffff !important;
}

.atlas-cta {
	color: #51c8d0 !important;
    border-radius: 30px !important;
    padding: 15px 32px !important;
    font-weight: 700;
	font color: #51c8d0 !important;
    transition: .3s ease-in-out !important;
}

.atlas-cta:hover {
    text-decoration: none;
    transform: translateY(-5px);
}

.atlas-cta-wide {
    width: 100%;
}

.cta-green {
	border: 2px solid #51c8d0 !important;
	border-color: #51c8d0;
	font-family: 'Roboto', sans-serif;
}

.cta-green:hover {
    color: #ffffff !important;
    background: #51c8d0;
}

.cta-blue {
    background: #51c8d0;
    color: #ffffff;
}

.cta-blue:hover {
    color: #ffffff;
    background: #51c8d0;
}

.cta-ghost {
    border: 2px solid #51c8d0 !important;
    color: #51c8d0;
}

.cta-ghost:hover {
    color: #ffffff;
    background: #51c8d0;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 10px;
}

/* to center flex-items */
.flex-item {
   margin: auto;
}

#banner {
    background-size: cover;
	padding-bottom: 150px;
}



/********** banner **********/
#banner header {
    overflow: hidden;
}

#banner header img {
    max-width: 80px;
}



/********** copyright **********/
#copyright {
	font-family: 'Roboto', sans-serif;
	color: #4C4E52 !important;
	line-height: 170%;
    background: #51c8d0 !important;
    padding: 2rem 3rem;
}


#copyright #social-media a {
    width: 40px;
    height: 40px;
    border-radius: 99%;
    background: #ffffff;
    transition: .4s ease;
}

#copyright #social-media a i {
    color: #51c8d0;
    font-size: 1.2rem;
    line-height: 40px;
}

#copyright #social-media a:hover {
    background: #00FFAD;
}

#copyright #social-media a:hover i {
    color: #ffffff;
}




/********** RWD **********/
@media (min-device-width: 380px) and (max-width: 766px) {

#banner h1 {
    font-size: 2.4rem !important;
	font-family: 'Roboto', sans-serif;
}

#banner {
   padding-bottom: 70px;
	}
	
.logo img {
   margin: 0px auto !important;
   left: 50%;
   height: 80%;
   }
}

@media (min-device-width: 250px) and (max-width: 379px) {

#banner h1 {
    font-size: 1.7rem !important;
	font-family: 'Roboto', sans-serif;
    }
	
p {
	font-family: 'Roboto', sans-serif;
	font-size: 0.8rem !important;	
    }

#banner {
   padding-bottom: 70px;
	}
	
.logo img {
   min-width: 230px;
   margin: 0px auto !important;
   left: 50%;
   height: 70% !important;
   }
	
#copyright {
	font-size: 0.9rem !important;
}
}