@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin-ext');

body {
    width: 100%;
    height: 100%;
    font-family: 'Ubuntu';
    font-weight: 400;
}

html {
    width: 100%;
    height: 100%;
}

.device-check {
    position: fixed;
    bottom:0;
    right:0;
    background-color: red;
    color: white;
    font-size: 14px;
    padding: 2px;
    border:1px solid black;
}

.navbar {
    background-color: #aba8a1;
}

h1 {
    font-size: 1.6vw;/*34px*/
    font-weight: 700;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
}

h2 {
    text-align: left;
}

p {
    font-size: 1.15vw;
    text-align: justify;
}

.row {
    margin-top: 2vw;
}


.navbar-default {
    border-color: #6e6e62;
}


.navbar-brand {
    padding: 0;
    height: inherit; /*50px*/
    font-weight: 700;
    font-size: 32px;
    color:#6e6e62 !important;
    line-height: inherit;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    background-color: rgba(0,0,0,0.2);
}

.navbar-brand span {
    display: inline-block;
    position: relative;
    top: 3px;
    letter-spacing: -1px;
    transition: all 0.5s ease-in-out;
}

.top-nav-collapse span {
    top:10px;
}

.navbar-brand img {
    height: 100px;
    width: auto;
    transition: all 0.5s ease-in-out;
    display: inline-block;
    margin-right: 10px;
}

.navbar-toggle {
    margin-top: 30px;
    margin-right: 21px;   
    margin-bottom: 20px;
}

.top-nav-collapse .navbar-toggle {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 21px;    
}


.top-nav-collapse img {
    height: 50px !important;
    margin-top: 13px;
    margin-right: 10px;
}

.navbar-nav>li>a {
    font-size: 18px;
    font-weight: 700;
    color:rgba(255,255,255,0.75) !important;
    line-height: 68px;
    transition: all 0.5s ease-in-out;
}

.navbar-nav>li>a:hover {
    color:#fff !important;
}

@media(min-width:767px) {
    .navbar {
        padding: 25px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }

    .top-nav-collapse .navbar-nav>li>a {
        line-height: 45px;
    }
}


.section1 {
    min-height: 100%;
    padding-top: 75px; /*650px*/
    text-align: center;
/*    background: url('../imgs/top.jpg') center 96px/100% no-repeat, #c8c5c1;*/
    background-color: #c8c5c1;
}

.section2 {
    min-height: 100%;
    padding-top: 95px;
    text-align: center;
    background: url('../imgs/section2_bg.jpg') bottom left/15% no-repeat, #6e6e62;
}

.section2 p {
    color:#c8c5c1;
}

.section2 h1, .section3 h1 {
    color:#fff;
}

.section3 {
    height: 100%;
    padding-top: 95px;
    text-align: center;
    background: url('../imgs/section3_bg.png') bottom center/20% no-repeat, linear-gradient(#34719a, #b0cde3);     
}

.section4 {
    height: 100%;
    padding-top: 95px;
    text-align: center;
    background: url('../imgs/section4_bg.png') bottom right/40% no-repeat, #322e2f;
    color:#fff;
}

.small p {
    margin-top: 20px;
    margin-bottom: 40px !important;
    font-size: 0.95vw !important;
}

.section4 h2 {
    clear: both;
}

h2, h3 {
    color:#e41f26;
    font-size: 1.3vw;
    font-weight: 700;
    width: 50%;
    display: inline-block;
    float: left;
}

.section4 h3 {
    color:#fff;
    font-weight: 400;
    float:right;
}

ul  {
    text-align: left;
    font-size: 0.95vw;
    float: inherit !important;
    clear: both;
}

.section5 ul  {
    margin-top: 20px;
}

.section5 {
    height: 100%;
    padding-top: 95px;
    text-align: center;
    background: linear-gradient(#bf3c4a, #a21b34);
    color:#fff;
}

.section6 {
    height: 100%;
    padding-top: 95px;
    padding-bottom: 100px;
    text-align: center;
    background: #5f686d;
    background: linear-gradient(#5f686d, #3f545f);
    color:#fff;
}

.form-group {
    text-align: left;
}

textarea.form-control {
    height: 5vw;
}

label {
    font-weight: 400;
    font-size:14px;
}

.form-control {
    border: 2px solid #333 !important;
    font-size:16px;
}

input[type=button], input[type=reset], input[type=submit] {
    background-color: #333;
    color:#fff;
    font-weight: 400;
    padding: 8px 25px;
    line-height: 17px;
    text-transform: uppercase;
    transition: all 0.5s ease-out;
    letter-spacing: 3px;
}

input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
    background-color: #111;
    border: 2px solid #111 !important;
}


.form-control:focus {
    border: 2px solid #e41f26 !important;
    outline-offset: 0 !important;
    outline: none !important;
}


.gifanim {
    border-radius: 20px;
    border: 6px solid #5f686d;
    max-width: 440px;
    width: 100%;
    height: auto;
    margin:20px 0 0 20px;
    float:right;
}


.section6 table {
    font-size: 16px;
}

.section6 table td {
    padding: 3px 6px;
}

.section6 table a {
    color:#e41f26;
    text-shadow: 0px 1px 1px #000;
}

.section6 table tr td:first-child {
    text-align: right;
}

.section6 table tr td:last-child {
    text-align: left;
}



/*GRID*/
a.item {
    display: block;
    width: 150px;
    height: 90px;
    margin: 5px;
    border-radius: 15px;
    border: 6px solid #5f686d;
    overflow: hidden;
    float:left;
    vertical-align: middle;
    transition: 1s ease;
}

.grid a.item:first-child {
    width: 310px;
    height: 190px;
 }

a.item:hover {
    border: 6px solid #ccc;
}

a.item img {
    width: 100%;
    height: auto;
}

a.item img {
    transition: 2s ease;
}

a.item img:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: 2s ease;
}




/*CAROUSEL*/
.carousel-control.right, .carousel-control.left {
    background: none !important;
}






/*CIRCLE*/
.circles {
    margin-top: -5vw;
}

.circle {
    border-radius: 50%;
    border: 6px solid #5f686d;
    width: 6vw;
    height: 6vw;
    max-width: 102px;
    max-height: 102px;
    background-size: 100% 100%;
    background-position: center center;
    margin: 0 auto;
    transition: all 0.4s ease-in-out;
}

.c1 { background-image: url('../imgs/c1.jpg'); }
.c2 { background-image: url('../imgs/c2.jpg'); }
.c3 { background-image: url('../imgs/c3.jpg'); }
.c4 { background-image: url('../imgs/c4.jpg'); }
.c5 { background-image: url('../imgs/c5.jpg'); }
.c6 { background-image: url('../imgs/c6.jpg'); }
.c7 { background-image: url('../imgs/c7.jpg'); }
.c8 { background-image: url('../imgs/c8.jpg'); }
.c9 { background-image: url('../imgs/c9.jpg'); }
.c10 { background-image: url('../imgs/c10.jpg'); }
.c11 { background-image: url('../imgs/c11.jpg'); }




/*CIRCLE SHADOW*/
.float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, transparent 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.section1 .col:hover .float-shadow, .section1 .col:focus .float-shadow, .section1 .col:active .float-shadow {
  -webkit-transform: translateY(-9px) scale(1.25);
  transform: translateY(-9px) scale(1.25);
  /* move the element up by 5px */
}
.section1 .col:hover .float-shadow:before, .section1 .col:focus .float-shadow:before, .section1 .col:active .float-shadow:before {
  opacity: 1;
  -webkit-transform: translateY(9px);
  transform: translateY(9px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}









/*NAVBAR AT SM*/
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 30px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}


/*MD*/
@media only screen and (max-width : 1199px) {
    .navbar-nav>li>a {
        font-size: 15px;
    }
    h1 {
        font-size: 2vw;
    }
    p {
        font-size: 1.4vw;
    }
    ul, .small p {
        font-size: 1.2vw !important;
    }
    h2, h3 {
        font-size: 1.6vw;
    }
    a.item {
        width: 12vw;
        height: 7vw;
        margin: 0.5vw;
    }
    .grid a.item:first-child {
        width: 24.9vw;
        height: 14.9vw;
    }
}

/*SM*/
@media only screen and (max-width : 992px) {
    h1 {
        font-size: 2.8vw;
    }
    p {
        font-size: 1.8vw;
    }
    ul, .small p {
        font-size: 1.4vw !important;
    }
    h2, h3 {
        font-size: 1.9vw;
    }
}




/*XS*/
@media only screen and (max-width : 768px) {
    .navbar-brand img {
        margin-left:10px; 
        height: 50px;
        margin-top: 13px;
    }
    .circles {
        margin-top: 5vw;
    }
    .circle {
        width: 10vw;
        height: 10vw;
        border-width: 4px;
        margin-top: 10px;
    }
    a.item {
        border-width: 4px;
        border-radius: 10px;
    }
    .navbar-toggle {
        margin-top: 20px;
    }
    .navbar-brand {
        font-size:6vw;
    }
    .navbar-brand span { 
        top:10px;
    }
    .navbar-nav>li>a {
        line-height: 30px;
    }
    h1 {
        font-size: 4vw;
    }
    p {
        font-size: 3.3vw;
    }
    .form-control {
        font-size: 2.4vw;
        height: 25px;
    }
    ul, .small p {
        font-size: 2.4vw !important;
    }
    h2, h3 {
        font-size: 3.6vw;
    }
    textarea.form-control {
        height: 10vw;
    }
    input[type=button], input[type=reset], input[type=submit] {
        line-height: 0;
    }
    .section1 {
        padding-top: 75px;/*400px*/
        /*background: url('../imgs/top.jpg') center 80px/150% no-repeat, #c8c5c1;        */
    }
    .section2, .section3, .section4, .section5, .section6 {
        padding-top: 90px;
    }
    .small p {
        margin-top: 5vw;
        margin-bottom: 10px !important;
    }
    a.item {
        width: 12vw;
        height: 7vw;
        margin: 0.5vw;
    }
    .grid a.item:first-child {
        width: 24.9vw;
        height: 14.9vw;
    }
}