/*== Color ==*/
/* #ed1c24 Primary*/
/* #c61017*/
/* #b70e15*/


/*=================================================*/
/*Basic setup*/
/*=================================================*/

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
}

html,
body { 
	background-color: #f8f8f8;
    color: #555;
    font-family: 'yu gothic ui', arial, helvetica, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 145%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    letter-spacing: 2px;
	}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;    
}


/*=================================================*/
/*Reusable components*/
/*=================================================*/

.row {
    max-width: 1140px;
    margin: 0 auto;
    /* if written with 2 values, this means top/bottom, and right/left margin is specified. this margin specifies to put box into the center of the page */
    }

section {
    padding: 20px 0;
}

a {
    text-decoration: none;
    
}

/*== Header ==*/
h1,
h2 {
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    z-index: 99;
}

h1 {
    font-size: 650%;
    font-weight: 600;
    width: 100%;
    color: #fff;
    line-height: 80%;
    font-family: 'MS PMincho', 'Yu mincho', 'Hiragino Mincho ProN', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

h2 {
    font-size: 200%;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 35px;
}

h2:after {
    display: block;
    height: 2px;
    background-color: #ed1c24;
    content: "";
    width: 200px;
    margin: 40px auto;
    
}

/*== Button ==*/
.btn:link,
.btn:visited {
    border: 2px #fff solid;
    border-radius: 50px;
    padding: 15px 55px;
    text-decoration: none;
    text-align: center;
    font-size: 100%;
    display: inline-block;
    -webkit-box-shadow: 0 2px 2px #3e3e3e;
    box-shadow: 0 2px 2px #3e3e3e; 
    -webkit-transition: color 0.2s, background-color 0.2s; 
    transition: color 0.2s, background-color 0.2s;
}

.btn-full:link,
.btn-full:visited {
    background-color: #ed1c24;
    color: #fff;
    border: 2px transparent solid;

}

.btn-white:link,
.btn-white:visited {
    background-color: #fff;
    color: #ed1c24;
    border: 2px transparent solid;

}



.btn:hover,
.btn:active {
    background-color: #b70e15;
        
}

.btn-white:hover,
.btn-white:active {
    color: #fff;
}



/*== Hexagon ==*/
/*
.button-hex {
    font-size: 14px;
    line-height: 40px;
    position: relative;
    display: inline-block;
    width: 130px;
    height: 200px;
    transition: all .1s ease-in-out;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: red;
}
.button-hex:before,
.button-hex:after {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    content: '';
    border: 100px solid transparent;
    border-right: 57.73px solid transparent;
    border-left: 57.73px solid transparent;
}
.button-hex:before {
    right: 100%;
    border-right-color: red;
}
.button-hex:after {
    left: 100%;
    border-left-color: red;
}
.button-hex:hover {
    opacity: 0.7;
}

*/

/*=================================================*/
/*Header*/
/*=================================================*/

.logo {
    height: 50px;
    width: auto;
    float: left;
    margin-top: 32px;
    margin-bottom: 12px;
 
}

.logo-black {
    display: none;
}

.main-nav {
    float: right;
    list-style: none;
    margin-top: 52px;
    /*background-color: rgba(255, 255, 255, 0.7);*/
    border-left: 2px solid #909090;
    border-right: 2px solid #909090;
    font-size: 85%;
    letter-spacing: 4px;
}

.main-nav li {
    display: inline-block;
}

.main-nav li a {
   
}

.main-nav-header:link,
.main-nav-header:visited {
    padding: 0 25px;
    border-right: 2px #909090 solid;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.main-nav-header:hover,
.main-nav-header:active {
    color: #ed1c24;
 }


header {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.4))), url(img/top-1.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url(img/top-1.jpg);
    background-size: cover;
    background-position: center;
    /*height: 100vh;*/
    /*background-attachment: fixed; */
    width: 100%;
}

/*== Sticky Header==*/

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0 2px 2px #e6e6e6;
    box-shadow: 0 2px 2px #e6e6e6;
    z-index: 9999;
}

.sticky .main-nav {
    margin-top: 10px;
}

.sticky .main-nav-header:link,
.sticky .main-nav-header:visited {
    padding: 0 25px;
    color: #555;
}

.sticky .main-nav-header:hover,
.sticky .main-nav-header:active {
    color: #ed1c24;
 }


.sticky .icon-header:link,
.sticky .icon-header:visited {
    padding: 0 12.5px;
    color: #555;
}

.sticky .logo-black {
    display: block;
    height: 25px;
    width: auto;
    float: left;
    margin-top: 12px;
    margin-bottom: 12px;
}

.sticky .logo {
    display: none;
}


/* Mobile navi*/

.mobile-nav-icon {
    float: right;
    margin-top: 7px;
    cursor: pointer;
    display: none;
    
}

.mobile-nav-icon i {
    font-size: 600%;
    color: #fff;
    
}


/*=================================================*/
/*Icon*/
/*=================================================*/

.icon-header:link,
.icon-header:visited {
    padding: 0 12.5px;
    color: #fff;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.icon-header.ion-social-facebook {
    padding-left: 25px;
}

.icon-header.ion-social-facebook:hover,
.icon-header.ion-social-facebook:active {
    color: #3b5998;
    
}

.icon-header.ion-social-twitter:hover,
.icon-header.ion-social-twitter:active {
    color: #55acee;
    
}

.icon-header.ion-social-instagram {
    border-right: 2px #909090 solid;    
}

.icon-header.ion-social-instagram:hover,
.icon-header.ion-social-instagram:active {
    color: #e95950;
}

/*=================================================*/
/*Top screen*/
/*=================================================*/



.top-screen-1 {
    margin-top: 20%;
    position: relative;
    /*display: block;
*/
}

.top-screen-message {
    width: 100%;
}

.btn-box-top-screen-1 {
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-top: 5%;
    margin-bottom: 10%;
    
}

.top-screen-1 a {
    margin: 0px 50px;
    }


/*=================================================*/
/*Service*/
/*=================================================*/

.section-service {
      
}


.short-service-image {
    background-image: url(img/teamo-on-hand.jpg);
    background-size: cover;
    background-position: center;
/*    height: 850px;*/
  /*  background-size: 80%;*/
    /* transform: scale(1.15);*/
}

.service-box {
    float: left;
}

.short-service-introduction {
    margin: 40px;
}
.short-service-intro-header {
    font-size: 160%;
    font-weight: bold;
    line-height: 145%;
}

.short-service-intro-p {
    font-size: 120%;
    padding-top: 20px;
    line-height: 145%;
}

.btn-short-service {
    margin: 40px;
 }


/*=================================================*/
/*Philosophy*/
/*=================================================*/


.philosophy-image {
    background-image: -webkit-gradient( linear, right top, left top, from(rgba(0, 0, 0, 0.7)),to(rgba(0, 0, 0, 0.15))), url(img/beach-sunset.jpg);
    background-image: linear-gradient( -90deg, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.15)), url(img/beach-sunset.jpg);
    background-size: cover;
    background-position: center;
    /*height: 820px;*/
    display: block;
    position: relative;
}


.philosophy-hex{
    display: block;
    position: absolute;
}

.philosophy-hex-tag {
    width: 300px;
    position: relative;
    float: left;
    top: -60px;
    
}

.philosophy-message-box {
    padding: 40px 0; 
}

.message-philosophy-1,.message-philosophy-2,.message-philosophy-3 {
    color: #fff;
    float: left;
    margin-top: 20px;
}

.message-philosophy-1,.message-philosophy-3 {
    font-size: 100%;
}

.message-philosophy-2 {
    font-size: 150%;
    font-weight: bold;
    line-height: 200%;
    margin: 25px 0;
    font-family: 'MS PMincho', 'Yu mincho', 'Hiragino Mincho ProN', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}


/*=================================================*/
/*Origin*/
/*=================================================*/

.origin-image {
    background-image: -webkit-gradient( linear, left top, right top, from(rgba(255, 255, 255, 0.7)),to(rgba(255, 255, 255, 0.15))), url(img/high-five.jpg);
    background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 0.15)), url(img/high-five.jpg);
    background-size: cover;
    background-position: center;
    /*height: 800px;*/
    display: block;
    position: relative;
    
}

.message-origin-box {
    margin: 30px 20px;
    padding: 30px 0; 
}

.mobile-origin-message-box {
    display: none;
}

.message-origin-1,.header-in-pragraph,.paragraph,.paragraph:last-child {
    color: #555;
    float: left;

}

.message-origin-1,.header-in-pragraph {
    font-size: 150%;
    font-weight: bold;
    line-height: 200%;
    margin: 0;
    font-family: 'MS PMincho', 'Yu mincho', 'Hiragino Mincho ProN', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

.paragraph {
    margin-bottom: 20px;
}

.message-origin-1:after {
    display: block;
    height: 2px;
    background-color: #555;
    content: "";
    width: 500px;
    margin-top: 20px;
    
}

.message-origin-4 .paragraph:after {
    display: block;
    height: 2px;
    background-color: #555;
    content: "";
    width: 500px;
    margin-top: 20px;
     
}

.paragraph:last-child {
    margin-top: 20px;
    margin-bottom: 20px;
}

.origin-hex-tag {
    width: 300px;
    float: right;
    position: relative;
    top: -60px;
}


/*=================================================*/
/*Follow us*/
/*=================================================*/

.icon-follow-us {
    text-align: center;
    margin-top: 50px;
}

.icon-follow-us li{
    display: inline-block;
}

.icon-follow-us a:link,
.icon-follow-us a:visited{
    text-decoration: none;
    font-size: 250%;
    color: #555;
    margin: 20px 20px 40px 20px;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

a .ion-social-facebook:hover,
a .ion-social-facebook:active {
    color: #3b5998;
}

a .ion-social-twitter:hover,
a .ion-social-twitter:active {
    color: #55acee;
}

a .ion-social-instagram:hover,
a .ion-social-instagram:active {
    color: #e95950;
}


/*=================================================*/
/*Footer*/
/*=================================================*/

footer {
    margin-top: 30px;
    background: -webkit-gradient( linear, right top, left top, from(rgba(170, 0, 0, 0.9)), to(rgba(100, 100, 100, 0.9)));
    background: linear-gradient( -90deg, rgba(170, 0, 0, 0.9), rgba(100, 100, 100, 0.9));
}

/*.footer-nav {
    
}


.social-links {
    
    }
*/

.footer-message {
    color: #fff;
    font-size: 80%;
    text-align: center;
    margin: 5px 0;
}