/*------------------------------------*\
	COMMONS CLASSES
\*------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-family: Microsoft JhengHei,'Roboto Slab', serif;
}

h1, h2, h3, h4, h5, h6
{
    margin-bottom: 1.1em;
}

.features,
.blog,
.gallery,
.clients,
.prefooter .container-fluid
{
    padding-top: 3.3em;
    padding-bottom: 4.2em;
}

span.typcn::before, i.typcn::before
{
    font-size: 2em;
}

span.x2:before, i.x2:before
{
    font-size: 3.4em;
}

span.x3:before, i.x3:before
{
    font-size: 4.4em;
}

span.x4:before, i.x4:before
{
    font-size: 6em;
}


/*------------------------------------*\
	HEADER
\*------------------------------------*/

header .container-fluid
{
    background-image: url('images/91954775.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding-top: 36px;
}

.hamburger
{
    font-size: 2.3em;
    color: #1EB0AB;
}

.hamburger:hover
{
  color: #FFF;
  cursor: pointer;
}


.logo
{
    background: none;
    border: 0px;
}

.jumbotron
{
    background: none;
    text-align: center;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron h6,
.jumbotron small
{
    color: #FFFFFF;
}

.jumbotron p
{
    color: #FFF;
	text-shadow: 0 0 10px #202020;
    margin-bottom: 5%;
}


/*------------------------------------*\
	SECTIONS
\*------------------------------------*/

.number .container-fluid
{
    background-image: url('images/114468154.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.opaline
{
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: rgba(89, 191, 194, 0.660);
}

.opaline h1,
.opaline h2,
.opaline h3,
.opaline h4,
.opaline h5,
.opaline h6,
.opaline p
{
    color: #FFFFFF;
}

.opaline .boxes
{
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 5px;
}

.boxes .odometer.odometer-theme-default
{
  font-family: 'Roboto Slab', serif;
}
.container-fluid{
	font-color:#545656;!important
}

.story .container-fluid
{
    background-image: url('images/539023048.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.gallery
{
    background-color: #dddddd;
}

.prefooter .container-fluid
{
   /* background: linear-gradient(
      rgba(33, 37, 43, 0.6),
      rgba(33, 37, 43, 0.6)
    ),*/

   background-image:url('images/contact.png');
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.prefooter h1,
.prefooter h2,

.prefooter h4,
.prefooter h5,
.prefooter h6,

{
    color: #FFFFFF;
}

/*------------------------------------*\
	FOOTER
\*------------------------------------*/

footer
{
    background-color: rgba(36, 50, 59, 1);
    padding-top: 2em;
    padding-bottom: 1.2em;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p
{
    color: #FFFFFF;
}

.social
{
    padding-top: 50px;
}


/*-------------------------------
gallery
-----------------------------------*/
.mySlides {
	display:none;
	margin:0 auto;
	max-width:100%
	}
	
@media(max-width:400px){

.mySlides  img {
    max-width: 100%;

    }
}


/*@media screen and (min-width: 425px) {
    .mySlides img  {
    display:none;
	margin:0 auto;
	width:300px;
    }
}*/

.w3-button{
	margin:10px;
	padding:10px;
	font-color:#FFF;
}
.w3-light-grey{
	
}
.gallery{
	margin:0 auto;
}
/*-----------------------------------------------------------
bg
---------------------------------------------------------------*/
.container-fluid2
{
    background-image: url('images/460364623.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.container-fluid3
{
    background-image: url('images/4603646233.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.container-fluid4
{
    background-image: url('images/blue.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper object,
.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*----------------------------------------------------------------
square
---------------------------------------------------------------------*/
.square-box{
	padding:20px;
}

.square-box img{
	width:100%;
    opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.square-box:hover img{
	width:98%;
	opacity: .5;
}

/*-------------------------------------------------------------------
price
----------------------------------------------------------------*/
/* Styles for Pricing Tables */


.tiny {
    float: left;
    margin:20px 0;
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
	border:1px solid #14937a;
	border-bottom:10px solid #14937a;   
}
.pro {
    float: left;
	margin:20px 0;
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
	border:1px solid #16837f;
	border-bottom:10px solid #16837f;   
}

.small {
    float: left;
	margin:20px 0;
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
	border:1px solid #165083;
	border-bottom:10px solid #165083;
    }


.pricing-table strong { font-weight: 700; color: #3d3d3d; }

.pricing-table-header-tiny {
    padding: 5px 0 5px 0;
    background: #1eb062;
	border-bottom:10px solid #14937a;
}
.pricing-table-header-pro {
    padding: 5px 0 5px 0;
    background: #1eb0ab;
	border-bottom:10px solid #16837f;
}
.pricing-table-header-small {
    padding: 5px 0 5px 0;
    background: #1e6cb0;
	border-bottom:10px solid #165083;

}
.pricing-table-header-tiny h2, .pricing-table-header-small h2, .pricing-table-header-medium h2, .pricing-table-header-pro h2 { text-align:left; padding:20px;font-weight: 700; color:#FFF; }
.pricing-table-header-tiny h3, .pricing-table-header-small h3, .pricing-table-header-medium h3, .pricing-table-header-pro h3 { font-weight: 500; color:#FFF;padding:20px;  }


.pricing-table-text {
    margin: 15px 30px 0 30px;
    padding: 0 10px 15px 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    line-height: 30px;
    font-size: 16px;
    color: #888;
}

.pricing-table-features {
    margin: 15px 10px 0 10px;
    padding: 0 10px 15px 10px;
    border-bottom: 1px dashed #888;
    font-size: 16px;
}

.pricing-table-signup-tiny {
    margin-top: 25px;
    padding-bottom: 10px;
}



.pricing-table-signup-small {
    margin-top: 25px;
    padding-bottom: 10px;
}


.pricing-table-signup-pro {
    margin-top: 25px;
    padding-bottom: 10px;
}

/*-------------------------------------------
workprogress
--------------------------------------------------*/
#circle {
  position: relative;
  background-color: #1eb0ab;
  margin: 20px auto;
  width: 250px;
  height: 250px;
  border-radius: 200px;
}
#text {
  text-align:center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}