@import "bootstrap.min.css";@import "font-awesome.css";@import "hint.css";@import "animate.css";@import "story-zen.css";@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Bold.eot');src:url('../fonts/Roboto-Boldd41d.eot?#iefix') format('embedded-opentype'),url('../fonts/Roboto-Bold.woff') format('woff'),url('../fonts/Roboto-Bold.ttf') format('truetype'),url('../fonts/Roboto-Bold.svg#FrancophilSansRegular') format('svg');font-weight:700;}@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Medium.eot');src:url('../fonts/Roboto-Mediumd41d.eot?#iefix') format('embedded-opentype'),url('../fonts/Roboto-Medium.woff') format('woff'),url('../fonts/Roboto-Medium.ttf') format('truetype'),url('../fonts/Roboto-Medium.svg#FrancophilSansRegular') format('svg');font-weight:500;}@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Regular.eot');src:url('../fonts/Roboto-Regulard41d.eot?#iefix') format('embedded-opentype'),url('../fonts/Roboto-Regular.woff') format('woff'),url('../fonts/Roboto-Regular.ttf') format('truetype'),url('../fonts/Roboto-Regular.svg#FrancophilSansRegular') format('svg');font-weight:300;}@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Light.eot');src:url('../fonts/Roboto-Lightd41d.eot?#iefix') format('embedded-opentype'),url('../fonts/Roboto-Light.woff') format('woff'),url('../fonts/Roboto-Light.ttf') format('truetype'),url('../fonts/Roboto-Light.svg#FrancophilSansRegular') format('svg');font-weight:100;}@font-face{font-family:'Merriweather';src:url('../fonts/Merriweather-Bold.eot');src:url('../fonts/Merriweather-Boldd41d.eot?#iefix') format('embedded-opentype'),url('../fonts/Merriweather-Bold.woff') format('woff'),url('../fonts/Merriweather-Bold.ttf') format('truetype'),url('../fonts/Merriweather-Bold.svg#FrancophilSansRegular') format('svg');font-weight:700;}@font-face{font-family:'MerriweatherSans';src:url('../fonts/MerriweatherSans-Light.eot');src:url('../fonts/MerriweatherSans-Lightd41d.eot?#iefix') format('embedded-opentype'),url('../fonts/MerriweatherSans-Light.woff') format('woff'),url('../fonts/MerriweatherSans-Light.ttf') format('truetype'),url('../fonts/MerriweatherSans-Light.svg#FrancophilSansRegular') format('svg');font-weight:100;}@font-face{font-family:'RobotoSlab';src:url('../fonts/RobotoSlab-Regular.eot');src:url('../fonts/RobotoSlab-Regulard41d.eot?#iefix') format('embedded-opentype'),url('../fonts/RobotoSlab-Regular.woff') format('woff'),url('../fonts/RobotoSlab-Regular.ttf') format('truetype'),url('../fonts/RobotoSlab-Regular.svg#FrancophilSansRegular') format('svg');font-weight:300;}@font-face{font-family:'RammettoOne';src:url('../fonts/RammettoOne-Regular.ttf');}h1,h2,h3,h4,h5,h6,a,p,span,input,label,blockquote,body{font-family:"Roboto",sans-serif;}@media (max-width: 992px) {.text-center-sm{text-align:center;}}.hint--primary:after{background-color:#009cf0;text-shadow:0 -1px 0px #6c5328;}.hint--primary.hint--top:before{border-top-color:#009cf0;}.hint--primary.hint--bottom:before{border-bottom-color:#009cf0;}.hint--primary.hint--left:before{border-left-color:#009cf0;}.hint--primary.hint--right:before{border-right-color:#009cf0;}p{font-size:1em;font-weight:100;line-height:1.5em;color:#555555;}a:hover{text-decoration:none;}button{outline:none!important;}h1,h2,h3,h4,h5,h6{font-weight:500;color:#333333;}h1{font-size:2.85em;}h2{font-size:2em;}h3{font-size:1.3em;}h4{font-size:0.9em;}h5{font-size:0.8em;}h6{font-size:0.7em;}ul{list-style:none;padding:0;}.row{margin:0;padding:0;}.container{padding:0;}.title h2{margin:0;text-align:center;text-transform:uppercase;}.line-separator{height:1px;width:107px;margin:0 auto;margin-top:35px;text-align:center;margin-bottom:100px;background-color:#009cf0;}.line-separator span{width:7px;height:7px;float:left;margin:0 48%;margin-top:-3px;border-radius:50%;background:#009cf0;-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:linear;animation-timing-function:linear;animation-iteration-count:10;-webkit-animation-iteration-count:10;}.line-separator-full{height:1px;width:100%;margin:80px 0;text-align:center;background-color:#e1e1e1;}.line-separator-full span{width:7px;height:7px;float:left;margin:0 48%;margin-top:-3px;border-radius:50%;background:#e1e1e1;}@media (max-width: 992px) {.line-separator-full{margin:60px 0;}}@media (max-width: 768px) {.line-separator-full{margin:40px 0;}}.blog-sidebar body{background-color:#f4f4f4;}.blog-sidebar .container .container{width:100%;}.blog-sidebar .row>.details-posts{padding:0;}.body-short-codes>div{background:#f4f4f4;}.body-short-codes>div>div.padding-in-box{padding-top:80px;padding-bottom:80px;}.blog-color>div{background-color:#f4f4f4;}@-webkit-keyframes span {
    0%,
    100% {
        -webkit-transform: translateX();
    } 10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(-50px);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(50px);
    }
}
@keyframes span {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-50px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(50px);
    }
}
.line-separator span {
    -webkit-animation-name: shake;
    animation-name: shake;
}
@media (max-width: 992px) {
    .line-separator {
        margin-bottom: 80px;
    }
}

.padding-in-box {
    padding-top: 120px;
    padding-bottom: 120px;
}
@media (max-width: 992px) {
    .padding-in-box {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
body > div {
    width: 100%;
    overflow: hidden;
}
div,
ul,
li,
a,
span,
input,
textarea,
button {
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
}



.text-primary {
    color: #009cf0;
}
.text-secondary {
    color: #333333;
}
.btn-default,
.btn-primary,
.btn-primary-inverse,
.btn-secondary,
.btn-secondary-inverse,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
    outline: none;
    padding: 10px 35px;
    -webkit-transition: 200ms linear;
    -moz-transition: 200ms linear;
    -o-transition: 200ms linear;
    transition: 200ms linear;
}
.btn-default:active,
.btn-primary:active,
.btn-primary-inverse:active,
.btn-secondary:active,
.btn-secondary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active,
.btn-default.active,
.btn-primary.active,
.btn-primary-inverse.active,
.btn-secondary.active,
.btn-secondary-inverse.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
    outline: none !important;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-default {
    border: 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.3);
}
.btn-default:hover,
.btn-default:focus {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.8);
}
.btn-default:active,
.btn-default.active {
    background: rgba(0, 0, 0, 0.8);
}
.btn-primary {
    background: #009cf0;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus {
    background: #ffffff;
    color: #009cf0;
    border: 1px solid #009cf0;
}
.btn-primary:active,
.btn-primary.active {
    background: #ffffff;
    color: #009cf0;
    border: 1px solid #009cf0;
    box-shadow: 0 0 10px 1px #009cf0;
}
.btn-primary-inverse {
    box-shadow: none;
    border-radius: 0;
    background: #ffffff;
    color: #009cf0;
    border-color: #009cf0;
}
.btn-primary-inverse:hover,
.btn-primary-inverse:focus {
    color: #ffffff;
    border-color: #ffffff;
    background: #009cf0;
}
.btn-primary-inverse:active,
.btn-primary-inverse.active {
    color: #ffffff;
    border-color: #ffffff;
    background: #009cf0;
    box-shadow: 0 0 10px 1px #ffffff;
}
.btn-secondary {
    background: #555555;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    color: #ffffff;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: #ffffff;
    color: #555555;
    border: 1px solid #555555;
}
.btn-secondary:active,
.btn-secondary.active {
    background: #ffffff;
    color: #555555;
    border: 1px solid #555555;
    box-shadow: 0 0 10px 1px #555555;
}
.btn-secondary-inverse {
    box-shadow: none;
    border-radius: 0;
    background: #ffffff;
    color: #555555;
    border-color: #555555;
}
.btn-secondary-inverse:hover,
.btn-secondary-inverse:focus {
    color: #ffffff;
    border-color: #ffffff;
    background: #555555;
}
.btn-secondary-inverse:active,
.btn-secondary-inverse.active {
    color: #ffffff;
    border-color: #ffffff;
    background: #555555;
    box-shadow: 0 0 10px 1px #ffffff;
}
.btn-success {
    background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
    background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #3e8f3e;
}
.btn-success:hover,
.btn-success:focus {
    background-color: #419641;
    background-position: 0 -15px;
}
.btn-success:active,
.btn-success.active {
    background-color: #419641;
    border-color: #3e8f3e;
}
.btn-info {
    background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
    background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #28a4c9;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #2aabd2;
    background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
    background-color: #2aabd2;
    border-color: #28a4c9;
}
.btn-warning {
    background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
    background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #e38d13;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: #eb9316;
    background-position: 0 -15px;
}
.btn-warning:active,
.btn-warning.active {
    background-color: #eb9316;
    border-color: #e38d13;
}
.btn-danger {
    background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
    background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #b92c28;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #c12e2a;
    background-position: 0 -15px;
}
.btn-danger:active,
.btn-danger.active {
    background-color: #c12e2a;
    border-color: #b92c28;
}
.btn-lg {
    padding: 14px 44px;
}
.btn-xs {
    padding: 5px 25px;
}
.thumbnail,
.img-thumbnail {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #e8e8e8;
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
    background-repeat: repeat-x;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #357ebd;
    background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
    background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
    background-repeat: repeat-x;
}
.navbar-default {
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
    background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
}
.navbar-default .navbar-nav > .active > a {
    background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
    background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
    background-repeat: repeat-x;
    -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
}
.navbar-brand,
.navbar-nav > li > a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-inversee {
    background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
    background-image: linear-gradient(to bottom, #3c3c3c 0%, #222222 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
}
.navbar-inversee .navbar-nav > .active > a {
    background-image: -webkit-linear-gradient(top, #222222 0%, #282828 100%);
    background-image: linear-gradient(to bottom, #222222 0%, #282828 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
    background-repeat: repeat-x;
    -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
}
.navbar-inversee .navbar-brand,
.navbar-inversee .navbar-nav > li > a {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
    border-radius: 0;
}
.alert {
    border-radius: inherit;
    background-color: #e6e6e6;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.alert span {
    padding-right: 15px;
}
.alert-success {
    background-color: #dff0d8;
    border-color: rgba(60, 118, 61, 0.3);
}
.alert-info {
    background-color: #d9edf7;
    border-color: rgba(49, 112, 143, 0.3);
}
.alert-warning {
    background-color: #fcf8e3;
    border-color: rgba(184, 130, 59, 0.3);
}
.alert-danger {
    background-color: #f2dede;
    border-color: rgba(169, 68, 66, 0.3);
}
.progress {
    height: 10px;
    overflow: hidden;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 20px;
    -webkit-box-shadow: none;
    background-color: #555555;
}
.progress-white {
    background-color: #ffffff;
}
.progress-bar {
    background-color: #009cf0;
}
.progress-bar-primary {
    background-color: #009cf0;
}
.progress-bar-success {
    background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
    background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
    background-repeat: repeat-x;
}
.progress-bar-info {
    background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
    background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
    background-repeat: repeat-x;
}
.progress-bar-warning {
    background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
    background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
    background-repeat: repeat-x;
}
.progress-bar-danger {
    background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
    background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
    background-repeat: repeat-x;
}
.list-group {
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    text-shadow: 0 -1px 0 #3071a9;
    background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
    background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
    background-repeat: repeat-x;
    border-color: #3278b3;
}
.panel {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.panel-default > .panel-heading {
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
    background-repeat: repeat-x;
}
.panel-primary > .panel-heading {
    background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
    background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
    background-repeat: repeat-x;
}
.panel-success > .panel-heading {
    background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
    background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
    background-repeat: repeat-x;
}
.panel-info > .panel-heading {
    background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
    background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
    background-repeat: repeat-x;
}
.panel-warning > .panel-heading {
    background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
    background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
    background-repeat: repeat-x;
}
.panel-danger > .panel-heading {
    background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
    background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
    background-repeat: repeat-x;
}
.well {
    background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
    background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
    background-repeat: repeat-x;
    border-color: #dcdcdc;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
}






/* 2. Loading-Animation */
html > body > .component-body-loading-animation {
    top: 0;
    position: fixed;
    left: -100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}
html > body > .component-body-loading-animation.body-loading-animation-animate {
    z-index: 100;
    opacity: 0;
    -webkit-transition: -webkit-transform 5s ease-in, opacity 1s 5s;
    transition: transform 5s ease-in, opacity 1s 5s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}






/* 3. Slider */
html > body > .component-slider {
    background-color: #000000;
}
html > body > .component-slider .carousel {
    position: relative;
}
html > body > .component-slider .carousel.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}
html > body > .component-slider .carousel.carousel-fade .carousel-inner .active {
    opacity: 1;
}
html > body > .component-slider .carousel.carousel-fade .carousel-inner .active.left,
html > body > .component-slider .carousel.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
html > body > .component-slider .carousel.carousel-fade .carousel-inner .next.left,
html > body > .component-slider .carousel.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
html > body > .component-slider .carousel.carousel-fade .carousel-control {
    z-index: 2;
}
html > body > .component-slider .carousel > .carousel-inner .item {
    background-size: cover;
    background-position: 50% 0px;
    background-repeat: no-repeat;
    height: 100%;
}
html > body > .component-slider .carousel > .carousel-inner .item > img {
    opacity: 0 !important;
    width: 100%;
    height: 100%;
}
html > body > .component-slider .carousel > .carousel-inner .item .pattern-background {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../image/slider-patern-background.png) 0 0 repeat;
}
html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 69%;
    margin: auto;
    text-shadow: none;
}
@media (max-width: 992px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption {
        height: 60%;
    }
}
@media (max-width: 992px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .title > h1 {
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain > img {
        width: 20%;
    }
}
html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .title h1 {
    color: #ffffff;
    font-size: 4em;
    margin: 50px 0 30px 0;
    text-transform: uppercase;
}
@media (max-width: 992px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .title h1 {
        font-size: 2.8em;
        margin: 30px 0 20px 0;
    }
}
@media (max-width: 768px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .title h1 {
        font-size: 1.8em;
        margin: 20px 0 10px 0;
    }
}
html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .title h1 span {
    color: #009cf0;
}
html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .description {
    color: #ffffff;
    font-size: 1.25em;
    font-weight: 100;
}
@media (max-width: 768px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .description {
        font-size: 0.85em;
    }
}
html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .button a {
    margin-top: 60px;
    box-shadow: none;
    padding: 10px 20px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.8);
}
@media (max-width: 992px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .button a {
        margin-top: 30px;
    }
}
@media (max-width: 768px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .button a {
        padding: 5px 10px;
    }
}
@media (max-width: 500px) {
    html > body > .component-slider .carousel > .carousel-inner .item .carousel-caption .contain .button a {
        margin-top: 10px;
    }
}
html > body > .component-slider .carousel .carousel-control.right,
html > body > .component-slider .carousel .carousel-control.left {
    z-index: 9999;
    background-image: none;
}
html > body > .component-slider .carousel .glyphicon-chevron-left,
html > body > .component-slider .carousel .glyphicon-chevron-right {
    width: 50px;
    height: 50px;
    font-size: 12px;
    text-shadow: none;
    line-height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 992px) {
    html > body > .component-slider .carousel .glyphicon-chevron-left,
    html > body > .component-slider .carousel .glyphicon-chevron-right {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
}
html > body > .component-slider .carousel .carousel-control:hover,
html > body > .component-slider .carousel .carousel-control:focus {
    color: #009cf0;
}
html > body > .component-slider .carousel .carousel-control:hover span,
html > body > .component-slider .carousel .carousel-control:focus span {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
}






/* 4. About Devices */
@media (max-width: 768px) {
    html > body > .component-about-devices {
        display: none;
    }
}
html > body > .component-about-devices .container .row > div {
    float: none;
    margin: 0 auto;
}
html > body > .component-about-devices .container .row > div p {
    font-weight: 300;
    text-align: center;
    margin-bottom: 70px;
    color: #333333;
}
html > body > .component-about-devices .container .row > div.contain-devices {
    height: 490px;
    max-width: 930px;
    position: relative;
}
html > body > .component-about-devices .container .row > div.contain-devices .iMac {
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    text-align: center;
}
html > body > .component-about-devices .container .row > div.contain-devices .MacBook {
    right: 0;
    bottom: 5px;
    position: absolute;
}
html > body > .component-about-devices .container .row > div.contain-devices .iPad {
    left: 45px;
    bottom: 0;
    position: absolute;
}
html > body > .component-about-devices .container .row > div.contain-devices .iPhone {
    left: 34%;
    bottom: -12px;
    position: absolute;
}
html > body > .component-about-devices .container .row > div.contain-devices .story-tale-served {
    opacity: 1 !important;
}
@media (max-width: 1200px) {
    html > body > .component-about-devices .container .row > div.contain-devices {
        width: 96%;
    }
}
@media (max-width: 992px) {
    html > body > .component-about-devices .container .row > div.contain-devices {
        width: 100%;
        height: 355px;
    }
    html > body > .component-about-devices .container .row > div.contain-devices img {
        width: 100%;
    }
    html > body > .component-about-devices .container .row > div.contain-devices .iMac {
        width: 55%;
        margin: 0 auto;
    }
    html > body > .component-about-devices .container .row > div.contain-devices .MacBook {
        width: 50%;
    }
    html > body > .component-about-devices .container .row > div.contain-devices .iPad {
        width: 36%;
    }
    html > body > .component-about-devices .container .row > div.contain-devices .iPhone {
        width: 9%;
    }
}
@media (max-width: 768px) {
    html > body > .component-about-devices .container .row > div.contain-devices {
        height: 340px;
    }
}
@media (max-width: 650px) {
    html > body > .component-about-devices .container .row > div.contain-devices {
        height: 300px;
    }
}
@media (max-width: 600px) {
    html > body > .component-about-devices .container .row > div.contain-devices {
        height: 270px;
    }
}
@media (max-width: 550px) {
    html > body > .component-about-devices .container .row > div.contain-devices {
        height: 250px;
    }
}
@media (max-width: 500px) {
    html > body > .component-about-devices .container .row > div.contain-devices {
        height: 215px;
    }
}
@media (max-width: 480px) {
    html > body > .component-about-devices .container .row > div.contain-devices {
        height: 150px;
    }
    html > body > .component-about-devices .container .row > div.contain-devices .iPad {
        left: 20px;
    }
    html > body > .component-about-devices .container .row > div.contain-devices .iPhone {
        width: 7%;
    }
}






/* 5. Navigation  */
html > body > .component-navigation {
    overflow: visible;
    background: #ffffff;
    border-top: 2px solid #009cf0;
}
html > body > .component-navigation.fixed {
    top: 0;
    width: 100%;
    z-index: 10000;
    position: fixed;
}
html > body > .component-navigation.fixed.with-top-separator {
    top: 9px;
}
html > body > .component-navigation .container .navbar {
    margin: 0;
}
html > body > .component-navigation .container .navbar .navbar-header .navbar-toggle {
    margin-right: 0;
    margin-top: 1em;
    background: rgba(0, 0, 0, 0.3);
}
html > body > .component-navigation .container .navbar .navbar-header .navbar-toggle .icon-bar {
    background: #ffffff;
}
html > body > .component-navigation .container .navbar .navbar-header .navbar-toggle:hover .icon-bar {
    background: #009cf0;
}
html > body > .component-navigation .container .navbar .navbar-header .logo {
    margin: 14px 0;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar {
    margin: 0;
    padding: 0;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li {
    display: inline-block;
    padding: 19px 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.active,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.active,
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li:hover,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li:hover {
    margin-top: -3px;
    background: #fff;
    padding-top: 22px;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.active > a,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.active > a,
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li:hover > a,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li:hover > a {
    color: #009cf0;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown.open,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown.open {
    margin-top: -3px;
    padding-top: 22px;
    background: #ffffff;
    padding-bottom: 18px;
    border-bottom: 1px solid #009cf0;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown.open > a,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown.open > a {
    color: #009cf0;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown.open > a span,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown.open > a span {
    transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown a,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown a {
    outline: none;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown a:focus,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown a:focus,
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown a:hover,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown a:hover {
    background-color: transparent;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown a .caret,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown a .caret {
    margin-top: -2px;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown .dropdown-menu,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown .dropdown-menu {
    left: 0;
    padding: 10px;
    right: inherit;
    margin-top: 1px;
    box-shadow: none;
    border: 1px solid #f1f1f1;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown .dropdown-menu li,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown .dropdown-menu li {
    padding: 3px 0;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown .dropdown-menu li:hover a,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown .dropdown-menu li:hover a,
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown .dropdown-menu li.active a,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown .dropdown-menu li.active a{
    color: #009cf0;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown .dropdown-menu li a,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown .dropdown-menu li a {
    text-transform: none;
}
html > body > .component-navigation .container .navbar .navbar-collapse .nav > li a,
html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li a {
    padding: 0;
    color: #757575;
    font-size: 12px;
    font-weight: 500;
    text-shadow: none;
    display: inline-block;
    text-decoration: none;
    background: transparent;
    text-transform: uppercase;
}
@media (max-width: 992px) {
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li {
        padding: 19px 3px;
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li a,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li a {
        font-weight: 300;
    }
}
@media (max-width: 768px) {
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li {
        width: 100%;
        padding: 0;
        display: block;
        margin: 0 0 1px 0;
        background-color: #fbf9f9;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.active,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.active,
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li:hover,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li:hover {
        padding: 0;
        margin: 0 0 1px 0;
        border-color: rgba(0, 0, 0, 0.2);
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li a,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li a {
        width: 100%;
        padding: 10px 30px;
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown,
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown a,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown a {
        -webkit-transition: all 0s linear;
        -moz-transition: all 0s linear;
        -o-transition: all 0s linear;
        -ms-transition: all 0s linear;
        transition: all 0s linear;
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown.open,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown.open {
        margin: 0;
        padding: 0;
        border: none;
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown.open > a,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown.open > a {
        border: 1px solid rgba(0, 0, 0, 0.2);
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown .dropdown-menu,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown .dropdown-menu {
        padding: 0;
        border: none;
        margin-left: 30px;
        -webkit-transition: all 3s linear;
        -moz-transition: all 3s linear;
        -o-transition: all 3s linear;
        -ms-transition: all 3s linear;
        transition: all 3s linear;
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown .dropdown-menu li,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown .dropdown-menu li {
        width: 100%;
        padding: 0;
        display: block;
        margin: 0 0 1px 0;
        background-color: #ededed;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
    html > body > .component-navigation .container .navbar .navbar-collapse .nav > li.dropdown .dropdown-menu li a,
    html > body > .component-navigation .container .navbar .navbar-collapse .navbar > li.dropdown .dropdown-menu li a {
        width: 100%;
        padding: 10px 30px;
    }
    html > body > .component-navigation {
        border-bottom: 2px solid #009cf0;
    }
}
@media (max-width: 992px) {
    html > body > .component-navigation .container.container {
        width: 100%;
        padding: 0 15px;
    }
    html > body > .component-navigation .container.container .collapse {
        padding: 0;
    }
}





/* 6. Featured Works */
html > body > .component-featured-works {
    width: 100%;
    overflow: hidden;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item {
    overflow: hidden;
    display: inline-block;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item {
    position: relative;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item:hover .content {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item:hover .content .title-image,
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item:hover .content .tags,
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item:hover .content .icon-hover {
    -webkit-transform: translateX(0px) rotate(0deg);
    -moz-transform: translateX(0px) rotate(0deg);
    -o-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item .content {
    top: 0;
    width: 100%;
    height: 100%;
    padding: 35% 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    background-color: rgba(0, 156, 240, 0.9);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate(460px, -100px) rotate(180deg);
    -moz-transform: translate(460px, -100px) rotate(180deg);
    -o-transform: translate(460px, -100px) rotate(180deg);
    -ms-transform: translate(460px, -100px) rotate(180deg);
    transform: translate(460px, -100px) rotate(180deg);
    -webkit-transition: all 0.2s 0.4s ease-in-out;
    -moz-transition: all 0.2s 0.4s ease-in-out;
    -o-transition: all 0.2s 0.4s ease-in-out;
    -ms-transition: all 0.2s 0.4s ease-in-out;
    transition: all 0.2s 0.4s ease-in-out;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item .content .title-image {
    margin: 0;
    color: #ffffff;
    font-weight: 500;
    font-size: 1.15em;
    margin-bottom: 15px;
    -webkit-transform: translateX(-300px) rotate(90deg);
    -moz-transform: translateX(-300px) rotate(90deg);
    -o-transform: translateX(-300px) rotate(90deg);
    -ms-transform: translateX(-300px) rotate(90deg);
    transform: translateX(-300px) rotate(90deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item .content .tags {
    width: 35%;
    margin: 0 auto;
    padding: 2px 5px;
    border: 1px solid #ffffff;
    -webkit-transform: translateX(300px) rotate(90deg);
    -moz-transform: translateX(300px) rotate(90deg);
    -o-transform: translateX(300px) rotate(90deg);
    -ms-transform: translateX(300px) rotate(90deg);
    transform: translateX(300px) rotate(90deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item .content .tags span {
    color: #ffffff;
    font-size: 0.85em;
    display: block;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item .content .tags span.separator-tags {
    width: 30px;
    height: 1px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: -10000px;
    background-color: #ffffff;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item .content .icon-hover {
    left: 0;
    right: 0;
    width: 31px;
    height: 31px;
    color: #ffffff;
    margin: 0 auto;
    font-size: 5em;
    cursor: pointer;
    margin-top: 30px;
    position: absolute;
    text-indent: -10000px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("../image/gallery-image-icon-plus.png");
    -webkit-transform: translateX(-300px) rotate(360deg);
    -moz-transform: translateX(-300px) rotate(360deg);
    -o-transform: translateX(-300px) rotate(360deg);
    -ms-transform: translateX(-300px) rotate(360deg);
    transform: translateX(-300px) rotate(360deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
html > body > .component-featured-works .padding-in-box .contain-gallery #gallery .owl-item .item .content .icon-hover:hover {
    width: 40px;
    height: 40px;
    margin-top: 25px;
    -webkit-animation: spin 0.6s linear;
    -moz-animation: spin 0.6s linear;
    animation: spin 0.6s linear;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(180deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(180deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}




/* 7. Why Choose */
html > body > .component-why-choose {
    background-color: #f4f4f4;
}
html > body > .component-why-choose .container .title h2 {
    font-weight: 500;
    font-size: 2em;
}
html > body > .component-why-choose .container .row > div .description {
    margin-bottom: 30px;
}
html > body > .component-why-choose .container .row > div .description p {
    font-size: 1.2em;
    font-weight: 300;
}
html > body > .component-why-choose .container .row > div .description p span {
    color: #009cf0;
}
@media (max-width: 768px) {
    html > body > .component-why-choose .container .row > div .description p {
        text-align: center;
    }
}
html > body > .component-why-choose .container .row > div .right > div {
    margin-bottom: 20px;
}
html > body > .component-why-choose .container .row > div .right > div:last-child {
    margin-bottom: 0;
}
html > body > .component-why-choose .container .row > div .right > div:hover .icon,
html > body > .component-why-choose .container .row > div .right > div:focus .icon {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    background: #009cf0;
}
html > body > .component-why-choose .container .row > div .right > div:hover .icon span,
html > body > .component-why-choose .container .row > div .right > div:focus .icon span {
    color: #ffffff;
}
html > body > .component-why-choose .container .row > div .right > div:hover .details h3,
html > body > .component-why-choose .container .row > div .right > div:focus .details h3 {
    color: #009cf0;
}
html > body > .component-why-choose .container .row > div .right > div .icon {
    float: left;
    width: 30px;
    height: 30px;
    margin-top: 3px;
    text-align: center;
    color: #009cf0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 1px solid #009cf0;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
@media (max-width: 768px) {
    html > body > .component-why-choose .container .row > div .right > div .icon {
        float: none;
        margin: 0 auto;
    }
}
html > body > .component-why-choose .container .row > div .right > div .icon span {
    line-height: 28px;
}
html > body > .component-why-choose .container .row > div .right > div .icon span:before {
    font-size: 1em;
}
html > body > .component-why-choose .container .row > div .right > div .details {
    float: left;
    text-align: left;
}
@media (max-width: 768px) {
    html > body > .component-why-choose .container .row > div .right > div .details {
        text-align: center;
        width: 100%;
        margin-top: 20px;
    }
}
html > body > .component-why-choose .container .row > div .right > div .details h3 {
    color: #555555;
    margin: 0;
    font-weight: 300;
}
html > body > .component-why-choose .container .row > div .right > div .details p {
    font-weight: 100;
}
html > body > .component-why-choose .container .row > div .iMac-why-choose {
    margin-top: 8px;
    max-width: 400px;
    position: relative;
}
@media (max-width: 768px) {
    html > body > .component-why-choose .container .row > div .iMac-why-choose {
        width: 100%;
        margin: 0 auto;
        max-width: 350px;
        margin-bottom: 30px;
    }
}
html > body > .component-why-choose .container .row > div .iMac-why-choose img {
    width: 100%;
}
html > body > .component-why-choose .container .row > div .iMac-why-choose .photo-in-iMac {
    width: 90%;
    position: absolute;
    top: 5.5%;
    left: 0;
    right: 0;
    margin: 0 auto;
}




/* 8. Social Icons */
html > body > .component-element-social-icons .container .content ul.social-icon {
    text-align: center;
}
html > body > .component-element-social-icons .container .content ul.social-icon li {
    margin: 12px;
    text-align: center;
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
@media (max-width: 992px) {
    html > body > .component-element-social-icons .container .content ul.social-icon li {
        margin: 5px;
    }
}
html > body > .component-element-social-icons .container .content ul.social-icon li:hover {
    background-color: #009cf0;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
html > body > .component-element-social-icons .container .content ul.social-icon li:hover a span {
    color: #ffffff;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
html > body > .component-element-social-icons .container .content ul.social-icon li a span {
    color: #555555;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
html > body > .component-element-social-icons .container .content ul.social-icon li.clearfix {
  display: none !important;
}
html > body > .component-element-social-icons .container .content ul.social-icon.icon-small {
    margin-bottom: 80px;
}
@media (max-width: 992px) {
    html > body > .component-element-social-icons .container .content ul.social-icon.icon-small {
        margin-bottom: 30px;
    }
}
html > body > .component-element-social-icons .container .content ul.social-icon.icon-small li {
    width: 30px;
    height: 30px;
}
html > body > .component-element-social-icons .container .content ul.social-icon.icon-small li a span {
    line-height: 30px;
}
html > body > .component-element-social-icons .container .content ul.social-icon.icon-large li {
    width: 40px;
    height: 40px;
}
html > body > .component-element-social-icons .container .content ul.social-icon.icon-large li a span {
    line-height: 40px;
}




/* 10. Our Team */
html > body > .component-our-team-row {
    background-color: #f4f4f4;
}
html > body > .component-our-team-row .container .title h2 {
    margin: 0;
}
@media (max-width: 768px) {
    html > body > .component-our-team-row .container .row > div {
        float: none;
    }
}
html > body > .component-our-team-row .container .row > div .team-talon-row {
    text-align: center;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:nth-child(1),
html > body > .component-our-team-row .container .row > div .team-talon-row:nth-child(2) {
    margin-top: 130px;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .photo-container {
    max-width: 200px;
    max-height: 200px;
    margin: 0 auto;
    margin-top: -100px;
    border: 0 solid rgba(0, 0, 0, 0);
    -webkit-transition: border 0.3s linear;
    -moz-transition: border 0.3s linear;
    -o-transition: border 0.3s linear;
    transition: border 0.3s linear;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
@media (max-width: 992px) {
    html > body > .component-our-team-row .container .row > div .team-talon-row .photo-container {
        margin-top: -100px;
    }
}
html > body > .component-our-team-row .container .row > div .team-talon-row .photo-container img {
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .name-and-occupation {
    margin: 25px 0;
    padding: 0 10px;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .name-and-occupation h3 {
    margin: 0 0 5px 0;
    font-weight: 300;
    text-transform: uppercase;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .name-and-occupation .occupation {
    margin: 0;
    font-size: 0.85em;
    text-transform: uppercase;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .description {
    padding: 0 10px;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .description p {
    color: #111111;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .social {
    padding: 0 10px;
    margin: 17px 0 27px 0 ;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .social ul li {
    width: 20px;
    height: 20px;
    margin: 0 2px;
    text-align: center;
    display: inline-block;
    background-color: #b2b2b2;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
html > body > .component-our-team-row .container .row > div .team-talon-row .social ul li a span {
    color: #ffffff;
    font-size: 0.8em;
    line-height: 20px;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover {
    background-color: #009cf0;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover .photo-container {
    border: 10px solid #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover .photo-container img {
    border: 2px solid #009cf0;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover .name-and-occupation h3 {
    color: #ffffff;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover .name-and-occupation .occupation {
    color: #ffffff;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover .description p {
    color: #ffffff;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover .social ul li {
    background-color: rgba(255, 255, 255, 0.5);
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover .social ul li:hover {
    background-color: #ffffff;
}
html > body > .component-our-team-row .container .row > div .team-talon-row:hover .social ul li a span {
    color: #009cf0;
}
html > body > .component-our-team-row .container .row > div .social-icon-band {
    clear: both;
    padding-top: 35px;
    text-align: center;
}
html > body > .component-our-team-row .container .row > div .social-icon-band li {
    width: 20px;
    height: 20px;
    margin: 0 2px;
    text-align: center;
    display: inline-block;
    background-color: #b2b2b2;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
html > body > .component-our-team-row .container .row > div .social-icon-band li:hover {
    background: #009cf0;
}
html > body > .component-our-team-row .container .row > div .social-icon-band li a span {
    color: #ffffff;
    font-size: 0.8em;
    line-height: 20px;
}





/* 12. Our Clients */
html > body > .component-our-clients-row .container .title h2 {
    margin: 0;
    text-align: center;
}
html > body > .component-our-clients-row .container .carousel-indicators {
    left: 0;
    width: 100%;
    margin-left: 0;
    position: inherit;
}
html > body > .component-our-clients-row .container .carousel-indicators li {
    border: 0;
    width: 165px;
    height: auto;
    margin: 0 12px;
    cursor: pointer;
    text-indent: 0;
    border-radius: 0;
    display: inline-block;
    background-color: transparent;
}
@media (max-width: 992px) {
    html > body > .component-our-clients-row .container .carousel-indicators li {
        margin: 12px;
    }
}
html > body > .component-our-clients-row .container .carousel-indicators li.active a img,
html > body > .component-our-clients-row .container .carousel-indicators li:hover a img {
    opacity: 1;
    -webkit-filter: grayscale(0%);
}
html > body > .component-our-clients-row .container .carousel-indicators li a {
    display: block;
}
html > body > .component-our-clients-row .container .carousel-indicators li a img {
    width: 100%;
    opacity: 0.4;
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
html > body > .component-our-clients-row .container .carousel-inner {
    padding: 0 15px;
    min-height: 200px;
}
html > body > .component-our-clients-row .container .carousel-inner .item .carousel-caption {
    padding: 20px 20% 0 20%;
    bottom: inherit;
    position: static;
}
@media (max-width: 992px) {
    html > body > .component-our-clients-row .container .carousel-inner .item .carousel-caption {
        padding: 0 10%;
    }
}
@media (max-width: 768px) {
    html > body > .component-our-clients-row .container .carousel-inner .item .carousel-caption {
        padding: 0;
    }
}
html > body > .component-our-clients-row .container .carousel-inner .item .carousel-caption .description p {
    font-size: 1.2em;
    font-weight: 300;
    text-align: center;
    text-shadow: none;
}
html > body > .component-our-clients-row .container .carousel-inner .item .carousel-caption .description p span {
    color: #009cf0;
}
html > body > .component-our-clients-row .container .carousel-inner .item .carousel-caption .description p.author {
    color: #7e7e7e;
    font-size: 1em;
    margin-top: 25px;
}




/* 13. Recent Posts */
html > body > .component-recent-posts {
    background-color: #f4f4f4;
}
@media (max-width: 768px) {
    html > body > .component-recent-posts .container .row > div {
        text-align: center;
        margin-bottom: 50px;
    }
}
@media (max-width: 768px) {
    html > body > .component-recent-posts .container .row > div:last-child {
        margin-bottom: 0;
    }
}
html > body > .component-recent-posts .container .row > div:hover .image-posted img {
    border-color: #009cf0;
}
html > body > .component-recent-posts .container .row > div .image-posted img {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0);
}
html > body > .component-recent-posts .container .row > div .contain {
    margin: 0 10px;
}
html > body > .component-recent-posts .container .row > div .contain .title-post {
    margin: 20px 0;
}
html > body > .component-recent-posts .container .row > div .contain .description p {
    color: #828282;
    font-weight: 300;
}
html > body > .component-recent-posts .container .row > div .contain .post-data {
    margin-top: 20px;
}
html > body > .component-recent-posts .container .row > div .contain .post-data p {
    color: #aeaeae;
    cursor: pointer;
    margin: 0 4.5% 0 0;
    font-weight: 300;
    display: inline-block;
}
html > body > .component-recent-posts .container .row > div .contain .post-data p:hover {
    color: #009cf0;
}
html > body > .component-recent-posts .container .row > div .contain .post-data p span {
    padding-right: 5px;
}




/* 14. Portfolio */
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-filter {
    text-align: center;
    margin-bottom: 50px;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-filter li {
    padding: 4px 0;
    display: inline-block;
    margin: 0 20px 20px 0;
    border: 1px solid #e7e7e7;
    background-color: #ffffff;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-filter li:hover {
    border-color: #009cf0;
    background-color: #009cf0;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-filter li:hover a {
    color: #ffffff;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-filter li:last-child {
    margin: 0;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-filter li a {
    color: #a7a7a7;
    padding: 5px 10px;
    text-transform: uppercase;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list {
    margin: 0;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li {
    width: 19.99%;
    height: 260px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display: inline-block;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li:hover .content,
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li.active-hover .content {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li:hover .content .title-image,
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li.active-hover .content .title-image,
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li:hover .content .tags,
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li.active-hover .content .tags,
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li:hover .content .icon-hover,
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li.active-hover .content .icon-hover {
    -webkit-transform: translateX(0px) rotate(0deg);
    -moz-transform: translateX(0px) rotate(0deg);
    -o-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li img {
    height: 100%;
    display: block;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li .content {
    top: 0;
    width: 100%;
    height: 100%;
    padding: 15% 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    background-color: rgba(0, 156, 240, 0.9);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate(460px, -100px) rotate(180deg);
    -moz-transform: translate(460px, -100px) rotate(180deg);
    -o-transform: translate(460px, -100px) rotate(180deg);
    -ms-transform: translate(460px, -100px) rotate(180deg);
    transform: translate(460px, -100px) rotate(180deg);
    -webkit-transition: all 0.2s 0.4s ease-in-out;
    -moz-transition: all 0.2s 0.4s ease-in-out;
    -o-transition: all 0.2s 0.4s ease-in-out;
    -ms-transition: all 0.2s 0.4s ease-in-out;
    transition: all 0.2s 0.4s ease-in-out;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li .content .title-image {
    margin: 0;
    color: #ffffff;
    font-weight: 500;
    font-size: 1.15em;
    margin-bottom: 15px;
    -webkit-transform: translateX(-300px) rotate(90deg);
    -moz-transform: translateX(-300px) rotate(90deg);
    -o-transform: translateX(-300px) rotate(90deg);
    -ms-transform: translateX(-300px) rotate(90deg);
    transform: translateX(-300px) rotate(90deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li .content .tags {
    width: 35%;
    margin: 0 auto;
    padding: 2px 5px;
    border: 1px solid #ffffff;
    -webkit-transform: translateX(300px) rotate(90deg);
    -moz-transform: translateX(300px) rotate(90deg);
    -o-transform: translateX(300px) rotate(90deg);
    -ms-transform: translateX(300px) rotate(90deg);
    transform: translateX(300px) rotate(90deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li .content .tags span {
    color: #ffffff;
    font-size: 0.85em;
    display: block;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li .content .tags span.separator-tags {
    width: 30px;
    height: 1px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: -10000px;
    background-color: #ffffff;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li .content .icon-hover {
    left: 0;
    right: 0;
    width: 31px;
    height: 31px;
    color: #ffffff;
    margin: 0 auto;
    font-size: 5em;
    margin-top: 30px;
    position: absolute;
    text-indent: -10000px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("../image/gallery-image-icon-plus.png");
    -webkit-transform: translateX(-300px) rotate(360deg);
    -moz-transform: translateX(-300px) rotate(360deg);
    -o-transform: translateX(-300px) rotate(360deg);
    -ms-transform: translateX(-300px) rotate(360deg);
    transform: translateX(-300px) rotate(360deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
@media (max-width: 1400px) {
    html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li {
        width: 19.8%;
    }
}
@media (max-width: 992px) {
    html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li {
        width: 33.1%;
    }
}
@media (max-width: 768px) {
    html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li {
        width: 49.9%;
    }
    html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-filter {
        padding: 0 20px;
    }
    html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-filter li {
        display: block;
        margin: 0 0 20px 0;
    }
    html > body > .component-portfolio .content-portfolio .image-container {
        margin: 0;
    }
    html > body > .component-portfolio .content-portfolio .image-container .see-image-container {
        padding: 0;
    }
}
@media (max-width: 500px) {
    html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list li {
        width: 100%;
    }
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list .isotope-item {
    z-index: 2;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list .isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list .isotope,
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list .isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
html > body > .component-portfolio .content-portfolio .portfolio-content .portfolio-list .isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
html > body > .component-portfolio .content-portfolio .image-container {
    padding: 0;
    display: none;
}
html > body > .component-portfolio .content-portfolio .image-container.open-container {
    display: block;
}
html > body > .component-portfolio .content-portfolio .image-container .row .see-image-container img {
    width: 100%;
}
html > body > .component-portfolio .content-portfolio .image-container .row .see-image-container .control-arrow {
    width: 35px;
    bottom: 50px;
    margin: 0 auto;
    position: relative;
}
html > body > .component-portfolio .content-portfolio .image-container .row .see-image-container .control-arrow a {
    display: inline-block;
}
html > body > .component-portfolio .content-portfolio .image-container .row .see-image-container .control-arrow a:hover .control {
    border-color: #009cf0;
    background-color: #009cf0;
}
html > body > .component-portfolio .content-portfolio .image-container .row .see-image-container .control-arrow a .control {
    width: 35px;
    height: 35px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.25);
}
html > body > .component-portfolio .content-portfolio .image-container .row .see-image-container .control-arrow a .control span {
    color: #ffffff;
    font-size: 20px;
    line-height: 33px;
}




/* 15. Contact */
html > body > .component-contact-email-and-map .description {
    padding: 0 15px;
    text-align: center;
    margin-bottom: 50px;
}
html > body > .component-contact-email-and-map > .relative {
    height: 260px;
    position: relative;
}
html > body > .component-contact-email-and-map > .relative .modal-contact.active {
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
}
html > body > .component-contact-email-and-map > .relative #responsive_map {
    max-height: 750px;
    height: 100%;
    width: 100%;
}
html > body > .component-contact-email-and-map > .relative #responsive_map.gray-scale {
    -webkit-filter: grayscale(100%);
}
html > body > .component-contact-email-and-map > .relative #responsive_map div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
html > body > .component-contact-email-and-map > .relative #responsive_map .gm-style-iw {
    max-width: none !important;
    max-height: none !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    line-height: normal !important;
    padding: 5px !important;
}
html > body > .component-contact-email-and-map > .relative .container {
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0 auto;
    position: absolute;
}
html > body > .component-contact-email-and-map > .relative .container .row form {
    float: none;
    padding: 40px;
    margin: 0 auto;
    max-width: 680px;
    position: relative;
    background: rgba(255, 255, 255, 0.9);
}
html > body > .component-contact-email-and-map > .relative .container .row form.form-inactive {
    display: none;
}
html > body > .component-contact-email-and-map > .relative .container .row form .exit-modal {
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 1.4em;
    font-weight: 100;
    position: absolute;
    color: #333333;
}
html > body > .component-contact-email-and-map > .relative .container .row form .exit-modal:hover {
    color: #009cf0;
}
html > body > .component-contact-email-and-map > .relative .container .row form button {
    box-shadow: none;
    padding: 7px 12px;
    margin: 20px 0 0 15px;
}
html > body > .component-contact-email-and-map > .relative .container .row form .form-group label {
    font-size: 1em;
    font-weight: 100;
    color: #555555;
    font-family: "MerriweatherSans", sans-serif;
}
html > body > .component-contact-email-and-map > .relative .container .row form .form-group label,
html > body > .component-contact-email-and-map > .relative .container .row form .form-group input,
html > body > .component-contact-email-and-map > .relative .container .row form .form-group textarea {
    border-radius: 0;
}
html > body > .component-contact-email-and-map > .relative .container .row form .form-group textarea {
    width: 100% !important;
}
@media (max-width: 768px) {
    html > body > .component-contact-email-and-map > .relative {
        height: auto;
    }
    html > body > .component-contact-email-and-map > .relative .container {
        padding: 0;
        position: static;
    }
    html > body > .component-contact-email-and-map > .relative .container .row form {
        padding: 10px 0;
        background-color: #f4f4f4;
    }
    html > body > .component-contact-email-and-map > .relative .container .row form .exit-modal {
        top: 5px;
    }
}
html > body > .component-contact-email-and-map > .relative .contain-button-see-modal {
    z-index: 5;
    width: 100%;
    bottom: 60px;
    display: none;
    position: absolute;
    text-align: center;
}
html > body > .component-contact-email-and-map > .relative .contain-button-see-modal.active {
    display: block;
}
html > body > .component-contact-email-and-map > .relative .contain-button-see-modal .button-see-modal {
    background: #ffffff;
    color: #009cf0;
    text-transform: uppercase;
    border: 1px solid #009cf0;
}
html > body > .component-contact-email-and-map > .relative .contain-button-see-modal .button-see-modal:hover {
    color: #ffffff;
    border-color: #ffffff;
    background: #009cf0;
}
@media (max-width: 768px) {
    html > body > .component-contact-email-and-map > .relative .contain-button-see-modal {
        bottom: inherit;
        position: inherit;
    }
    html > body > .component-contact-email-and-map > .relative .modal-contact,
    html > body > .component-contact-email-and-map > .relative #responsive_map,
    html > body > .component-contact-email-and-map > .relative #responsive_map {
        display: none !important;
    }
}




/* 16. Subscription */
html > body > .component-subscription {
    background-color: #009cf0;
}
html > body > .component-subscription .container form {
    margin: 0;
}
html > body > .component-subscription .container form .row div {
    margin: 29px 0;
    height: 42px;
}
html > body > .component-subscription .container form .row div h3 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 100;
    line-height: 42px;
    text-transform: uppercase;
}
@media (max-width: 992px) {
    html > body > .component-subscription .container form .row div h3 {
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    html > body > .component-subscription .container form .row div h3 {
        font-size: 17px;
    }
}
html > body > .component-subscription .container form .row div input {
    width: 100%;
    height: 42px;
    color: #ffffff;
    padding: 0 10px;
    font-size: 18px;
    box-shadow: none;
    background: transparent;
    border: 1px solid #ffffff;
}
html > body > .component-subscription .container form .row div input:focus {
    box-shadow: 0 0 10px 0;
    border: 1px solid #ffffff;
}
html > body > .component-subscription .container form .row div *::-webkit-input-placeholder {
    color: #ffffff;
}
html > body > .component-subscription .container form .row div *:-moz-placeholder {
    color: #ffffff;
}
html > body > .component-subscription .container form .row div *:-ms-input-placeholder {
    /* IE10+ */
    color: #ffffff;
}
html > body > .component-subscription .container form .row div .button-action {
    padding: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    color: #009cf0;
    text-transform: uppercase;
    border: 1px solid #009cf0;
}
html > body > .component-subscription .container form .row div .button-action:hover {
    color: #ffffff;
    border-color: #ffffff;
    background: #009cf0;
}
@media (max-width: 992px) {
    html > body > .component-subscription .container form .row .col-md-2,
    html > body > .component-subscription .container form .row .col-md-4 {
        margin: 0 0 20px 0;
    }
}
@media (max-width: 992px) {
    html > body > .component-subscription .container form .row .col-md-6 {
        margin: 10px 0;
    }
}





/* 17. Skills */
html > body > .component-skills-bar .container .title h2 {
    margin: 0;
}
html > body > .component-skills-bar .container .row > div > div {
    margin-bottom: 40px;
}
html > body > .component-skills-bar .container .row > div > div:last-child {
    margin-bottom: 0;
}
html > body > .component-skills-bar .container .row > div > div p {
    font-weight: 500;
}
@media (max-width: 768px) {
    html > body > .component-skills-bar .container .row > div:first-child > div:last-child {
        margin-bottom: 40px;
    }
}





/* 18. Separator Achievements */
html > body > .component-separator-achievements {
    background-image: url("../image/_separator-achievements-background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
html > body > .component-separator-achievements .parallax {
    background-color: rgba(0, 156, 240, 0.9);
}
html > body > .component-separator-achievements .parallax > .container {
    text-align: center;
}
html > body > .component-separator-achievements .parallax > .container > div > p {
    color: #ffffff;
}
html > body > .component-separator-achievements .parallax > .container > div > p.number {
    font-size: 3em;
}
html > body > .component-separator-achievements .parallax > .container > div > p.number span {
    font-weight: 300;
}
html > body > .component-separator-achievements .parallax > .container > div > p.picture > span {
    font-size: 4.3em;
}
html > body > .component-separator-achievements .parallax > .container > div > p.name {
    font-weight: 300;
    font-size: 1.35em;
    margin: 15px 0 5px 0;
}
html > body > .component-separator-achievements .parallax > .container > div > p span {
    text-align: center;
    font-size: 1em;
    text-transform: uppercase;
}
@media (max-width: 992px) {
    html > body > .component-separator-achievements .parallax > .container > div > p.number {
        font-size: 2.5em;
    }
    html > body > .component-separator-achievements .parallax > .container > div > p.picture > span {
        font-size: 3em;
    }
    html > body > .component-separator-achievements .parallax > .container > div > p.name {
        font-size: 1.2em;
        margin: 15px 0 5px 0;
    }
}
@media (max-width: 992px) {
    html > body > .component-separator-achievements .parallax > .container > div:nth-child(1),
    html > body > .component-separator-achievements .parallax > .container > div:nth-child(2) {
        margin-bottom: 50px;
    }
}
@media (max-width: 768px) {
    html > body > .component-separator-achievements .parallax {
        padding: 30px 0;
    }
    html > body > .component-separator-achievements .parallax > .container > div:nth-child(3) {
        margin-bottom: 50px;
    }
}





/* 19. Separator Progress */
html > body > .component-separator-progress.separator-progress-bg-image {
    background-image: url("../image/_separator-progress-background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
html > body > .component-separator-progress.separator-progress-bg-image .padding-in-box {
    background-color: rgba(255,255,255,0.8);
}
html > body > .component-separator-progress .container .row > div {
    text-align: center;
}
@media (max-width: 768px) {
    html > body > .component-separator-progress .container .row > div {
        margin-bottom: 40px;
    }
    html > body > .component-separator-progress .container .row > div:last-child {
        margin-bottom: 0;
    }
}
html > body > .component-separator-progress .container .row > div .progress-bar-round-container {
    width: 120px;
    padding: 10px 10px 5px 10px;
    margin: 0 auto;
    background-color: #009cf0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
html > body > .component-separator-progress .container .row > div .progress-bar-round-container input {
    color: #ffffff;
    font-size: 1.2em !important;
}
html > body > .component-separator-progress .container .row > div .progress-bar-round-container .progress-bar-round {
    display: block;
}
html > body > .component-separator-progress .container .row > div h3 {
    margin: 30px 0;
    color: #555555;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    html > body > .component-separator-progress .container .row > div h3 {
        margin: 20px 0;
    }
}





/* 20. Separator Quotation */
html > body > .component-separator-quotation {
    background-image: url("../image/_separator-quotation-background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
html > body > .component-separator-quotation .parallax {
    overflow: hidden;
    background-color: rgba(0, 156, 240, 0.8);
}
html > body > .component-separator-quotation .parallax .container {
    text-align: center;
}
html > body > .component-separator-quotation .parallax .container ul li > span.fa {
    color: #ffffff;
    font-size: 4.2em;
    text-shadow: none;
}
html > body > .component-separator-quotation .parallax .container ul li > .quotation {
    margin: 50px;
    color: #ffffff;
    font-weight: 700;
    font-size: 3.25em;
    line-height: 1.3em;
    text-transform: uppercase;
}
html > body > .component-separator-quotation .parallax .container ul li > .author {
    font-size: 1.2em;
    color: #ffffff;
}
@media (max-width: 992px) {
    html > body > .component-separator-quotation .parallax .container ul li > span.fa {
        font-size: 3em;
    }
    html > body > .component-separator-quotation .parallax .container ul li > .quotation {
        margin: 20px 15px;
        font-size: 2.5em;
    }
}
@media (max-width: 768px) {
    html > body > .component-separator-quotation .parallax .container ul li > span.fa {
        font-size: 2em;
    }
    html > body > .component-separator-quotation .parallax .container ul li > .quotation {
        margin: 20px 15px;
        font-size: 1.5em;
    }
}





/* 21. Separator Notification */
html > body > .component-separator-notification {
    background-image: url("../image/_separator-notification-background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
html > body > .component-separator-notification .parallax {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
}
html > body > .component-separator-notification .parallax .container {
    text-align: center;
}
html > body > .component-separator-notification .parallax .container ul li .social-icon {
    font-size: 5em;
    margin-bottom: 30px;
    color: #009cf0;
}
html > body > .component-separator-notification .parallax .container ul li .author {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
    color: #009cf0;
}
html > body > .component-separator-notification .parallax .container ul li .quotation {
    margin: 20px;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.3em;
}
html > body > .component-separator-notification .parallax .container ul li .time-posted {
    color: #c9c9c9;
}





/* 22. Price Table 1*/
@media (max-width: 768px) {
    html > body > .component-price-table .container .row > div {
        margin-bottom: 100px;
    }
    html > body > .component-price-table .container .row > div:last-child {
        margin-bottom: 0;
    }
}
html > body > .component-price-table .container .row > div div,
html > body > .component-price-table .container .row > div a {
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    transition: all 150ms linear;
}
html > body > .component-price-table .container .row > div .talon {
    text-align: center;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
html > body > .component-price-table .container .row > div .talon:hover {
    border-color: #009cf0;
}
html > body > .component-price-table .container .row > div .talon:hover .price {
    border-color: #009cf0;
}
html > body > .component-price-table .container .row > div .talon:hover .price .center {
    background-color: #009cf0;
}
html > body > .component-price-table .container .row > div .talon .price {
    width: 140px;
    height: 140px;
    padding: 10px;
    margin: 0 auto;
    margin-top: -60px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
html > body > .component-price-table .container .row > div .talon .price:hover {
    border-color: #009cf0;
}
html > body > .component-price-table .container .row > div .talon .price .center {
    width: 100%;
    height: 100%;
    padding: 28px 0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #555555;
}
html > body > .component-price-table .container .row > div .talon .price .center:hover {
    background-color: #009cf0;
}
html > body > .component-price-table .container .row > div .talon .price .center h3 {
    margin: 0;
    color: #ffffff;
    font-size: 2.6em;
    font-weight: 300;
}
html > body > .component-price-table .container .row > div .talon .price .center h3 span {
    margin-right: -7px;
}
html > body > .component-price-table .container .row > div .talon .price .center p {
    margin: 0;
    color: #ffffff;
}
html > body > .component-price-table .container .row > div .talon .title-talon h2 {
    margin: 25px 0;
    font-size: 2em;
    font-weight: 300;
    color: #555555;
}
@media (max-width: 992px) {
    html > body > .component-price-table .container .row > div .talon .title-talon h2 {
        font-size: 1.5em;
    }
}
html > body > .component-price-table .container .row > div .talon .benefits {
    margin: 0;
}
html > body > .component-price-table .container .row > div .talon .benefits li {
    padding: 10px 0;
    color: #888888;
    font-size: 1em;
    font-weight: 300;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
html > body > .component-price-table .container .row > div .talon .benefits li:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
html > body > .component-price-table .container .row > div .talon a.btn {
    margin: 25px 0;
    text-shadow: none;
    padding: 10px 17px;
}
html > body > .component-price-table .container .row > div .talon.professional {
    background-color: #009cf0;
}
html > body > .component-price-table .container .row > div .talon.professional .price {
    position: relative;
    border: 1px solid #009cf0;
}
html > body > .component-price-table .container .row > div .talon.professional .price .badge {
    right: 0;
    top: -10px;
    padding: 0;
    width: 50px;
    height: 50px;
    font-weight: 300;
    font-size: 1.25em;
    line-height: 48px;
    position: absolute;
    color: #009cf0;
    text-transform: uppercase;
    background-color: #ffffff;
    border: 1px solid #009cf0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
html > body > .component-price-table .container .row > div .talon.professional .price .center {
    background-color: #009cf0;
}
html > body > .component-price-table .container .row > div .talon.professional .title-talon h2 {
    color: #ffffff;
}
html > body > .component-price-table .container .row > div .talon.professional .benefits li {
    color: #ffffff;
}





/* 23. Price Table 2 */
@media (max-width: 768px) {
    html > body > .component-price-table-2 .container .row > div {
        margin-bottom: 100px;
    }
}
html > body > .component-price-table-2 .container .row > div div,
html > body > .component-price-table-2 .container .row > div a {
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    transition: all 150ms linear;
}
html > body > .component-price-table-2 .container .row > div.talon {
    text-align: center;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
html > body > .component-price-table-2 .container .row > div.talon:hover {
    border-color: #009cf0;
}
html > body > .component-price-table-2 .container .row > div.talon:hover .price {
    border-color: #009cf0;
    background-color: #009cf0;
}
html > body > .component-price-table-2 .container .row > div.talon:hover .price .center h3,
html > body > .component-price-table-2 .container .row > div.talon:hover .price .center p {
    color: #ffffff;
}
html > body > .component-price-table-2 .container .row > div.talon .price {
    width: 140px;
    height: 140px;
    padding: 10px;
    margin: 0 auto;
    margin-top: -60px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
html > body > .component-price-table-2 .container .row > div.talon .price .center {
    width: 100%;
    height: 100%;
    padding: 28px 0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
html > body > .component-price-table-2 .container .row > div.talon .price .center h3 {
    margin: 0;
    color: #878787;
    font-size: 2.6em;
    font-weight: 300;
}
html > body > .component-price-table-2 .container .row > div.talon .price .center h3 span {
    margin-right: -7px;
}
html > body > .component-price-table-2 .container .row > div.talon .price .center p {
    margin: 0;
    color: #878787;
}
html > body > .component-price-table-2 .container .row > div.talon .title-talon h2 {
    margin: 25px 0;
    font-size: 2em;
    font-weight: 300;
    color: #555555;
}
@media (max-width: 992px) {
    html > body > .component-price-table-2 .container .row > div.talon .title-talon h2 {
        font-size: 1.5em;
    }
}
html > body > .component-price-table-2 .container .row > div.talon .benefits {
    margin: 0;
}
html > body > .component-price-table-2 .container .row > div.talon .benefits li {
    padding: 10px 0;
    color: #888888;
    font-size: 1em;
    font-weight: 300;
}
html > body > .component-price-table-2 .container .row > div.talon a.btn {
    margin: 25px 0;
    text-shadow: none;
    padding: 10px 17px;
}
html > body > .component-price-table-2 .container .row > div.talon.professional {
    margin-top: -10px;
    padding-bottom: 10px;
    border-color: #ffffff;
    background-color: #009cf0;
}
@media (max-width: 768px) {
    html > body > .component-price-table-2 .container .row > div.talon.professional {
        margin-top: 0;
        padding-bottom: 0;
    }
}
html > body > .component-price-table-2 .container .row > div.talon.professional:hover .price {
    background-color: #ffffff;
}
html > body > .component-price-table-2 .container .row > div.talon.professional:hover .price .center {
    background-color: #009cf0;
}
html > body > .component-price-table-2 .container .row > div.talon.professional:hover .price .center h3,
html > body > .component-price-table-2 .container .row > div.talon.professional:hover .price .center p {
    color: #ffffff;
}
html > body > .component-price-table-2 .container .row > div.talon.professional .price {
    margin-top: -50px;
    border-color: #009cf0;
}
html > body > .component-price-table-2 .container .row > div.talon.professional .price .center h3,
html > body > .component-price-table-2 .container .row > div.talon.professional .price .center p {
    color: #009cf0;
}
html > body > .component-price-table-2 .container .row > div.talon.professional .title-talon h2 {
    color: #ffffff;
}
html > body > .component-price-table-2 .container .row > div.talon.professional .benefits li {
    color: #ffffff;
}





/* 24. Boxes Style 1 */
html > body > .component-boxes-style-1 .container .row div {
    text-align: center;
}
@media (max-width: 992px) {
    html > body > .component-boxes-style-1 .container .row div {
        margin-bottom: 35px;
    }
}
@media (max-width: 992px) {
    html > body > .component-boxes-style-1 .container .row div:last-child {
        margin-bottom: 0;
    }
}
html > body > .component-boxes-style-1 .container .row div:hover .icon {
    background-color: #009cf0;
}
html > body > .component-boxes-style-1 .container .row div:hover .icon span {
    color: #ffffff;
}
html > body > .component-boxes-style-1 .container .row div:hover .icon .arrow-bar:after {
    border-top-color: #009cf0;
}
html > body > .component-boxes-style-1 .container .row div:hover .icon .arrow-bar:before {
    border-top-color: #009cf0;
}
html > body > .component-boxes-style-1 .container .row div .icon {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e4e4e4;
}
html > body > .component-boxes-style-1 .container .row div .icon.hint--top:after {
    left: 0;
    width: 200px;
    font-size: 1em;
    text-shadow: none;
    line-height: 20px;
    margin-left: -60px;
    white-space: normal;
}
html > body > .component-boxes-style-1 .container .row div .icon span {
    font-size: 2em;
    line-height: 70px;
    color: #009cf0;
}
html > body > .component-boxes-style-1 .container .row div .icon .arrow-bar {
    margin-top: -2px;
}
html > body > .component-boxes-style-1 .container .row div .icon .arrow-bar:after,
html > body > .component-boxes-style-1 .container .row div .icon .arrow-bar:before {
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
html > body > .component-boxes-style-1 .container .row div .icon .arrow-bar:after {
    border-top-color: #ffffff;
    border-width: 6px;
    margin-left: -6px;
}
html > body > .component-boxes-style-1 .container .row div .icon .arrow-bar:before {
    border-top-color: #e4e4e4;
    border-width: 8px;
    margin-left: -8px;
}
html > body > .component-boxes-style-1 .container .row div h3 {
    font-size: 1em;
    font-weight: 300;
    margin: 22px 0 0 0;
    text-transform: uppercase;
}





/* 25. Boxes Style 2 */
html > body > .component-boxes-style-2 .container .row div {
    text-align: center;
}
@media (max-width: 992px) {
    html > body > .component-boxes-style-2 .container .row div {
        margin-bottom: 35px;
    }
}
@media (max-width: 992px) {
    html > body > .component-boxes-style-2 .container .row div:last-child {
        margin-bottom: 0;
    }
}
html > body > .component-boxes-style-2 .container .row div:hover .icon {
    background-color: #009cf0;
}
html > body > .component-boxes-style-2 .container .row div:hover .icon span {
    color: #ffffff;
}
html > body > .component-boxes-style-2 .container .row div:hover .icon .arrow-bar:after {
    border-top-color: #009cf0;
}
html > body > .component-boxes-style-2 .container .row div:hover .icon .arrow-bar:before {
    border-top-color: #009cf0;
}
html > body > .component-boxes-style-2 .container .row div .icon {
    width: 95px;
    height: 95px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e4e4e4;
}
html > body > .component-boxes-style-2 .container .row div .icon span {
    font-size: 3em;
    line-height: 95px;
    color: #009cf0;
}
html > body > .component-boxes-style-2 .container .row div .icon .arrow-bar {
    margin-top: -2px;
}
html > body > .component-boxes-style-2 .container .row div .icon .arrow-bar:after,
html > body > .component-boxes-style-2 .container .row div .icon .arrow-bar:before {
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
html > body > .component-boxes-style-2 .container .row div .icon .arrow-bar:after {
    border-top-color: #ffffff;
    border-width: 6px;
    margin-left: -6px;
}
html > body > .component-boxes-style-2 .container .row div .icon .arrow-bar:before {
    border-top-color: #e4e4e4;
    border-width: 8px;
    margin-left: -8px;
}
html > body > .component-boxes-style-2 .container .row div h3 {
    margin: 22px;
    font-weight: 300;
}






/* 26. Boxes Style 3 */
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.left > div .icon {
    float: left;
}
@media (max-width: 768px) {
    html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.left > div .icon {
        float: none;
        margin: 0 auto;
        text-align: center;
    }
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.left > div .details {
    float: left;
    text-align: left;
}
@media (max-width: 768px) {
    html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.left > div .details {
        text-align: center;
        width: 100%;
    }
}
@media (max-width: 1200px) {
    html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.left > div .details {
        padding-left: 0;
    }
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.right > div .icon {
    float: right;
}
@media (max-width: 768px) {
    html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.right > div .icon {
        float: none;
        margin: 0 auto;
        text-align: center;
    }
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.right > div .details {
    float: right;
    text-align: right;
}
@media (max-width: 768px) {
    html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.right > div .details {
        text-align: center;
        width: 100%;
    }
}
@media (max-width: 1200px) {
    html > body > .component-boxes-style-3 .container .content .row > .col-sm-6.right > div .details {
        padding-right: 0;
    }
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div {
    margin-bottom: 20px;
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div:hover .icon {
    background: #009cf0;
    border-color: #009cf0;
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div:hover .icon span {
    color: #ffffff;
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div:hover .details h3 {
    color: #009cf0;
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div .icon {
    width: 80px;
    height: 80px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #d1d1d1;
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div .icon span {
    line-height: 80px;
    color: #009cf0;
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div .icon span:before {
    font-size: 2em;
}
html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div .details h3 {
    font-size: 1em;
    font-weight: 300;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}
@media (max-width: 1200px) {
    html > body > .component-boxes-style-3 .container .content .row > .col-sm-6 > div .details {
        margin-top: 20px;
    }
}





/* 27. Milestone Counters 1 */
html > body > .component-milestone-counters-1 .container .title h2 {
    margin: 0;
}
html > body > .component-milestone-counters-1 .container .row > div {
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0);
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    transition: all 150ms linear;
}
html > body > .component-milestone-counters-1 .container .row > div > p span {
    text-align: center;
}
html > body > .component-milestone-counters-1 .container .row > div > p.picture {
    margin: 15px 0 35px 0;
}
html > body > .component-milestone-counters-1 .container .row > div > p.picture span {
    font-size: 4.3em;
    color: #009cf0;
}
html > body > .component-milestone-counters-1 .container .row > div > p.number {
    margin: 0 0 20px 0;
}
html > body > .component-milestone-counters-1 .container .row > div > p.number span {
    font-size: 4.5em;
    font-weight: 100;
}
html > body > .component-milestone-counters-1 .container .row > div > p.name span {
    color: #929292;
    font-size: 1.3em;
    font-weight: 300;
}
@media (max-width: 768px) {
    html > body > .component-milestone-counters-1 .container .row > div > p.picture {
        margin: 0 0 20px 0;
    }
    html > body > .component-milestone-counters-1 .container .row > div > p.picture span {
        font-size: 3em;
    }
    html > body > .component-milestone-counters-1 .container .row > div > p.number {
        margin: 0 0 10px 0;
    }
    html > body > .component-milestone-counters-1 .container .row > div > p.number span {
        font-size: 3em;
    }
}
html > body > .component-milestone-counters-1 .container .row > div:hover {
    border-color: #009cf0;
}
@media (max-width: 992px) {
    html > body > .component-milestone-counters-1 .container .row > div:nth-child(1),
    html > body > .component-milestone-counters-1 .container .row > div:nth-child(2) {
        margin-bottom: 50px;
    }
}
@media (max-width: 768px) {
    html > body > .component-milestone-counters-1 .container .row > div:nth-child(3) {
        margin-bottom: 50px;
    }
}






/* 28. Milestone Counters 2 */
html > body > .component-milestone-counters-2 .container .title h2 {
    margin: 0;
}
html > body > .component-milestone-counters-2 .container .row > div {
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0);
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    transition: all 150ms linear;
}
html > body > .component-milestone-counters-2 .container .row > div > p span {
    text-align: center;
}
html > body > .component-milestone-counters-2 .container .row > div > p.picture {
    margin: 15px 0 15px 0;
}
html > body > .component-milestone-counters-2 .container .row > div > p.picture span {
    font-size: 4.3em;
    color: #009cf0;
}
html > body > .component-milestone-counters-2 .container .row > div > p.name {
    margin: 0 0 20px 0;
}
html > body > .component-milestone-counters-2 .container .row > div > p.name span {
    color: #929292;
    font-size: 1.3em;
    font-weight: 300;
    margin: 15px 0 5px 0;
}
html > body > .component-milestone-counters-2 .container .row > div > p.number span {
    font-size: 3em;
    font-weight: 300;
}
@media (max-width: 768px) {
    html > body > .component-milestone-counters-2 .container .row > div > p.picture span {
        font-size: 3em;
    }
    html > body > .component-milestone-counters-2 .container .row > div > p.name {
        margin: 0 0 15px 0;
    }
    html > body > .component-milestone-counters-2 .container .row > div > p.number span {
        font-size: 2.5em;
    }
}
html > body > .component-milestone-counters-2 .container .row > div:hover {
    border-color: #009cf0;
}
@media (max-width: 992px) {
    html > body > .component-milestone-counters-2 .container .row > div:nth-child(1),
    html > body > .component-milestone-counters-2 .container .row > div:nth-child(2) {
        margin-bottom: 50px;
    }
}
@media (max-width: 768px) {
    html > body > .component-milestone-counters-2 .container .row > div:nth-child(3) {
        margin-bottom: 50px;
    }
}





/* 29. Alert */
html > body > .component-element-alert-boxes .container .row > div > div {
    margin-bottom: 35px;
}





/* 30. Buttons */
html > body > .component-element-buttons .container .row > div ul li {
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    html > body > .component-element-buttons .container .row > div ul li {
        text-align: center;
    }
}
html > body > .component-element-buttons .container .row > div ul li button {
    text-transform: uppercase;
}





/* 31. List Items */
html > body > .component-element-list-items .container .contain .row > div ul li {
    float: none;
}
html > body > .component-element-list-items .container .contain .row > div ul li:hover div span {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
html > body > .component-element-list-items .container .contain .row > div ul li div {
    display: inline-block;
}
html > body > .component-element-list-items .container .contain .row > div ul li div span {
    font-size: 1em;
    color: #009cf0;
}
html > body > .component-element-list-items .container .contain .row > div ul li p {
    display: inline-block;
}





/* 32. Accordions */
html > body > .component-element-accordions .container .row > div .panel-group .panel {
    box-shadow: none;
    position: relative;
    border-radius: inherit;
    border-color: rgba(0, 0, 0, 0.18);
}
html > body > .component-element-accordions .container .row > div .panel-group .panel .panel-heading {
    box-shadow: none;
    border-radius: inherit;
    background-image: none;
    background-color: #d2d2d2;
    border-color: rgba(0, 0, 0, 0.18);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
html > body > .component-element-accordions .container .row > div .panel-group .panel .panel-heading:hover {
    background-color: #ffffff;
}
html > body > .component-element-accordions .container .row > div .panel-group .panel .panel-heading .panel-title a {
    font-size: 14px;
    font-weight: 300;
    color: #555555;
}
html > body > .component-element-accordions .container .row > div .panel-group .panel .panel-heading .panel-title a .large-contain {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 35px;
    position: absolute;
}
html > body > .component-element-accordions .container .row > div .panel-group .panel .panel-heading .panel-title a span {
    font-size: 14px;
    padding-right: 10px;
}
html > body > .component-element-accordions .container .row > div .panel-group .panel .panel-collapse .panel-body {
    color: #929292;
    font-size: 13px;
    font-weight: 300;
}
html > body > .component-element-accordions .container .row > div .panel-group.accordion-reverse .panel .panel-heading {
    background-color: #ffffff;
}
html > body > .component-element-accordions .container .row > div .panel-group.accordion-reverse .panel .panel-heading:hover .panel-title a {
    color: #009cf0;
}
html > body > .component-element-accordions .container .row > div .panel-group.accordion-reverse .panel .panel-heading .panel-title a span {
    color: #009cf0;
}





/* 33. Tabs */
html > body > .component-element-tabs .container .row > div {
    margin: 50px 0;
}
html > body > .component-element-tabs .container .row > div:first-child {
    margin-top: 0;
}
html > body > .component-element-tabs .container .row > div:last-child {
    margin-bottom: 0;
}
html > body > .component-element-tabs .container .row > div .tab.tab-2 .nav-tabs > li.active:hover a {
    border-top: 1px solid #edebeb;
    border-left: 1px solid #edebeb;
    border-right: 1px solid #edebeb;
}
html > body > .component-element-tabs .container .row > div .tab.tab-2 .nav-tabs > li:hover a {
    color: #009cf0;
    border-color: #009cf0;
    background-color: #ffffff;
}
html > body > .component-element-tabs .container .row > div .tab.tab-2 .nav-tabs > li > a {
    color: #ffffff;
    background-color: #009cf0;
}
html > body > .component-element-tabs .container .row > div .tab.tab-3 .nav-tabs > li.active a,
html > body > .component-element-tabs .container .row > div .tab.tab-3 .nav-tabs > li.active:hover a {
    border: none;
    color: #ffffff;
    background-color: #009cf0;
}
html > body > .component-element-tabs .container .row > div .tab.tab-3 .nav-tabs > li:hover a {
    color: #009cf0;
    border-color: #009cf0;
    background-color: #ffffff;
}
html > body > .component-element-tabs .container .row > div .tab.tab-3 .nav-tabs > li > a {
    border: 1px solid #edebeb;
    background-color: #ffffff;
}
html > body > .component-element-tabs .container .row > div .tab.tab-3 .tab-content .tab-pane {
    border: none;
    background-color: #009cf0;
}
html > body > .component-element-tabs .container .row > div .tab.tab-3 .tab-content .tab-pane p {
    color: #ffffff;
}
html > body > .component-element-tabs .container .row > div .tab .nav-tabs {
    border: none;
}
html > body > .component-element-tabs .container .row > div .tab .nav-tabs > li {
    margin-bottom: 7px;
}
html > body > .component-element-tabs .container .row > div .tab .nav-tabs > li:hover a {
    border: 1px solid #edebeb;
    background-color: #ffffff;
}
html > body > .component-element-tabs .container .row > div .tab .nav-tabs > li:active a {
    border: 1px solid #c2c2c2;
}
html > body > .component-element-tabs .container .row > div .tab .nav-tabs > li.active {
    margin-bottom: 0;
}
html > body > .component-element-tabs .container .row > div .tab .nav-tabs > li.active > a {
    padding-top: 14px;
    margin-top: -5px;
    border-bottom: none;
    padding-bottom: 18px;
    color: #009cf0;
    background-color: #ffffff;
    border-top: 1px solid #edebeb;
    border-left: 1px solid #edebeb;
    border-right: 1px solid #edebeb;
}
html > body > .component-element-tabs .container .row > div .tab .nav-tabs > li > a {
    font-size: 1em;
    border-radius: 0;
    margin-right: 5px;
    padding: 10px 23px;
    color: #555555;
    background-color: #d2d2d2;
}
@media (max-width: 768px) {
    html > body > .component-element-tabs .container .row > div .tab .nav-tabs > li > a {
        padding: 10px 5px;
    }
}
html > body > .component-element-tabs .container .row > div .tab .nav-tabs > li > a > span {
    padding-right: 10px;
}
html > body > .component-element-tabs .container .row > div .tab .tab-content {
    margin-top: -2px;
}
html > body > .component-element-tabs .container .row > div .tab .tab-content .tab-pane {
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #edebeb;
}
html > body > .component-element-tabs .container .row > div .tab .tab-content .tab-pane p {
    color: #929292;
}





/* 34. Blockquote */
html > body > .component-element-block-quote .container .row > div {
    margin-bottom: 100px;
}
html > body > .component-element-block-quote .container .row > div:last-child {
    margin-bottom: 0;
}
@media (max-width: 992px) {
    html > body > .component-element-block-quote .container .row > div {
        margin-bottom: 50px;
    }
}
@media (max-width: 768px) {
    html > body > .component-element-block-quote .container .row > div {
        margin-bottom: 30px;
    }
}
html > body > .component-element-block-quote .container .row > div blockquote {
    color: #929292;
    font-size: 14px;
    font-weight: 300;
    position: relative;
    font-style: italic;
    border: 1px solid #edebeb;
    background-color: #ffffff;
    padding: 20px 20px 20px 80px;
}
html > body > .component-element-block-quote .container .row > div blockquote .quote {
    top: 15px;
    left: 20px;
    position: absolute;
    color: #009cf0;
}
html > body > .component-element-block-quote .container .row > div blockquote .quote span {
    font-size: 50px;
    font-style: normal;
    font-family: "RammettoOne";
}
html > body > .component-element-block-quote .container .row > div blockquote p {
    color: #929292;
}
html > body > .component-element-block-quote .container .row > div blockquote.block-quote-primary {
    border: none;
    color: #ffffff;
    background-color: #009cf0;
}
html > body > .component-element-block-quote .container .row > div blockquote.block-quote-primary .quote {
    color: #ffffff;
}
html > body > .component-element-block-quote .container .row > div blockquote.block-quote-primary p {
    color: #ffffff;
}
html > body > .component-element-block-quote .container .row > div blockquote.block-quote-secondary {
    border: none;
    color: #ffffff;
    background-color: #555555;
}
html > body > .component-element-block-quote .container .row > div blockquote.block-quote-secondary .quote {
    color: #009cf0;
}
html > body > .component-element-block-quote .container .row > div blockquote.block-quote-secondary p {
    color: #ffffff;
}





/* 35. Typography Heading */
html > body > .component-typography-heading .container .row > div {
    margin-bottom: 50px;
}
html > body > .component-typography-heading .container .row > div:hover h1,
html > body > .component-typography-heading .container .row > div:hover h2,
html > body > .component-typography-heading .container .row > div:hover h3,
html > body > .component-typography-heading .container .row > div:hover h4,
html > body > .component-typography-heading .container .row > div:hover h5,
html > body > .component-typography-heading .container .row > div:hover h6 {
    color: #009cf0;
}
html > body > .component-typography-heading .container .row > div h1,
html > body > .component-typography-heading .container .row > div h2,
html > body > .component-typography-heading .container .row > div h3,
html > body > .component-typography-heading .container .row > div h4,
html > body > .component-typography-heading .container .row > div h5,
html > body > .component-typography-heading .container .row > div h6 {
    margin-top: 0;
}
html > body > .component-typography-heading .container .row > div p {
    margin-top: 20px;
}
@media (max-width: 768px) {
    html > body > .component-typography-heading .container .row > div p {
        margin-top: 15px;
    }
}
html > body > .component-typography-heading .container .row > div:last-child {
    margin-bottom: 0;
}




/* 36. Blog */

/* 36.1. Blog Post */
html > body > .component-blog-post {
    background-color: #f4f4f4;
}
html > body > .component-blog-post .container-primary {
    padding-bottom: 50px;
}
html > body > .component-blog-post .container-primary .image-posted {
    width: 100%;
    overflow: hidden;
    max-height: 800px;
    margin-bottom: 50px;
}
html > body > .component-blog-post .container-primary .image-posted img {
    width: 100%;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts {
    text-align: center;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts > div {
    margin-bottom: 25px;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts > div span {
    color: #929292;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post {
    min-height: 68px;
    border: 1px solid #d1d1d1;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post .day-contain {
    width: 100%;
    margin: -3px 0;
    text-align: center;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post .day-contain span {
    font-size: 2.4em;
    font-weight: 300;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post .month-year-contain {
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post .month-year-contain span {
    font-size: 0.9em;
    font-weight: 100;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .type-posts {
    min-height: 68px;
    border: 1px solid #d1d1d1;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .type-posts span {
    font-size: 2em;
    line-height: 68px;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts {
    margin-top: 50px;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li {
    width: 100%;
    height: 68px;
    margin: 0 auto;
    margin-bottom: 8px;
    border: 1px solid #d1d1d1;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:hover {
    border-color: #009cf0;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:hover a span {
    color: #009cf0;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:active {
    box-shadow: 0 0 9px 0 #009cf0;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:first-child {
    -webkit-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:last-child {
    -webkit-border-radius: 0 0 7px 7px;
    -moz-border-radius: 0 0 7px 7px;
    border-radius: 0 0 7px 7px;
}
html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li a span {
    font-size: 2em;
    line-height: 68px;
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .details-posts > div {
        float: left;
        margin: 0 10px 20px 0;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post {
        width: 65px;
        min-height: 65px;
        padding: 5px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post .day-contain {
        margin: 0;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post .day-contain span {
        font-size: 1.5em;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .date-post .month-year-contain {
        padding-bottom: 0;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .type-posts {
        width: 65px;
        min-height: 65px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .type-posts span {
        line-height: 63px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts {
        margin-top: 0;
        margin-left: 20px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li {
        width: 65px;
        height: 65px;
        margin-right: 6px;
        display: inline-block;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li a span {
        line-height: 65px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:first-child {
        -webkit-border-radius: 7px 0 0 7px;
        -moz-border-radius: 7px 0 0 7px;
        border-radius: 7px 0 0 7px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:last-child {
        -webkit-border-radius: 0 7px 7px 0;
        -moz-border-radius: 0 7px 7px 0;
        border-radius: 0 7px 7px 0;
    }
}
@media (max-width: 400px) {
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts {
        margin: 0;
        width: 100%;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul {
        float: left;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li {
        width: 40px;
        height: 40px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li a span {
        font-size: 1.3em;
        line-height: 40px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:first-child {
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
    }
    html > body > .component-blog-post .container-primary .container .row > .details-posts .social-icon-posts ul li:last-child {
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
    }
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .title-post h1 {
    font-size: 2.2em;
    margin: 0 0 10px 0;
    color: #555555;
    font-family: "RobotoSlab";
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .posting-data {
    margin-bottom: 20px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .posting-data ul li {
    display: inline-block;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .posting-data ul li span {
    color: #bababa;
    padding: 0 4px;
    font-weight: 100;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .posting-data ul li:first-child span:first-child {
    padding: 0;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .posting-data ul li.separator-bar span {
    padding: 0 10px;
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .posting-data ul li {
        padding: 0;
        display: block;
    }
    html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .posting-data ul li.separator-bar {
        display: none;
    }
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain > p {
    color: #929292;
    font-weight: 300;
    line-height: 1.8em;
    margin-bottom: 20px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain > p.margin {
    margin-bottom: 30px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain > p span {
    color: #555555;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain .list-items {
    margin: 20px 30px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain .list-items li {
    float: none;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain .list-items li:hover div span {
    padding-right: 10px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain .list-items li div {
    display: inline-block;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain .list-items li div span {
    font-size: 1em;
    padding-right: 5px;
    color: #009cf0;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain .list-items li p {
    margin-bottom: 5px;
    display: inline-block;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain blockquote.block-quote-secondary {
    border: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
    position: relative;
    font-style: italic;
    background-color: #555555;
    padding: 20px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .container-article .text-contain blockquote.block-quote-secondary p {
    color: #ffffff;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about {
    margin-top: 50px;
    position: relative;
    background-color: #ececec;
    border: 1px solid #ececec;
    padding: 20px 20px 20px 60px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about:hover {
    border-color: #d8d8d8;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about:hover .image-contain {
    border-color: #d8d8d8;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .image-contain {
    left: -40px;
    width: 80px;
    height: 80px;
    padding: 4px;
    overflow: hidden;
    position: absolute;
    border: 1px solid #f3f3f3;
    background-color: #ffffff;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .image-contain img {
    width: 100%;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .about .name {
    margin-bottom: 2px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .about .name span {
    font-size: 1.2em;
    font-family: "RobotoSlab";
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .about .occupation {
    color: #929292;
    font-size: 12px;
    margin-bottom: 15px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .about .description {
    color: #929292;
    font-weight: 300;
    line-height: 1.8em;
    margin-bottom: 15px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .about .read-more {
    color: #009cf0;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .about .read-more:hover span {
    margin-left: 15px;
}
html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .about .read-more span {
    margin-left: 5px;
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .post-article .author-about {
        padding: 20px;
        text-align: center;
    }
    html > body > .component-blog-post .container-primary .container .row > .post-article .author-about .image-contain {
        margin: 0 auto;
        position: static;
        margin-bottom: 5px;
    }
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments {
    margin-top: 90px;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    padding: 15px 60px 15px 120px;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments:hover {
    border-color: #d8d8d8;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments:hover .image-contain {
    border-color: #d8d8d8;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments:hover .about .name {
    color: #009cf0;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments:hover .about .reply {
    color: #009cf0;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .image-contain {
    top: -40px;
    left: 20px;
    width: 80px;
    height: 80px;
    padding: 4px;
    overflow: hidden;
    position: absolute;
    border: 1px solid #f4f4f4;
    background-color: #ffffff;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .image-contain img {
    width: 100%;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .name {
    margin-bottom: 2px;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .name span {
    font-size: 1.2em;
    font-family: "RobotoSlab";
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .posting-date {
    color: #929292;
    font-size: 12px;
    margin-bottom: 15px;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .description {
    color: #929292;
    margin: 30px 0;
    font-weight: 300;
    line-height: 1.8em;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .reply {
    top: 15px;
    right: 60px;
    color: #929292;
    font-weight: 100;
    position: absolute;
    font-family: "RobotoSlab";
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .reply:hover span {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .reply span {
    margin-left: 3px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments.child-comment {
    margin-top: 10px;
    padding: 0 0 0 100px;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments.child-comment .image-contain {
    top: 0;
    left: 0;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments.child-comment .about .description {
    margin: 0 0 30px 0 ;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments.child-comment .about .reply {
    top: 0;
    right: 0;
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments.child-comment .about .description {
        margin: 30px 0 ;
    }
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments.child-comment:hover {
    border-color: transparent;
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments {
        padding: 20px;
    }
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .image-contain {
        float: left;
        position: static;
    }
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .name {
        margin-top: 20px;
        margin-left: 100px;
    }
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .posting-date {
        margin-left: 100px;
    }
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .comments .about .reply {
        right: 15px;
    }
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .container-comments .child-comment > .child-comment {
        margin-left: -100px;
    }
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group {
    margin-bottom: 30px;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group.pl0 {
    padding-left: 0;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group.pr0 {
    padding-right: 0;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group.plr0 {
    padding: 0;
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group.pl0,
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group.pr0,
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group.plr0 {
        padding: 0 15px;
        margin-bottom: 20px;
    }
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group {
        margin-bottom: 20px;
    }
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group input,
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group textarea {
    padding: 15px 25px;
    box-shadow: none;
    border-radius: 0;
    border-color: #ebebeb;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group input {
    height: 50px;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group textarea {
    min-height: 190px;
    width: 100% !important;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group ::-webkit-input-placeholder {
    font-weight: 100;
    font-style: italic;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group :-moz-placeholder {
    font-weight: 100;
    font-style: italic;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group ::-moz-placeholder {
    font-weight: 100;
    font-style: italic;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .form-group :-ms-input-placeholder {
    font-weight: 100;
    font-style: italic;
}
html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment .btn {
    font-weight: 500;
    padding: 10px 18px;
}
@media (max-width: 768px) {
    html > body > .component-blog-post .container-primary .container .row > .comments-and-post .add-comment {
        text-align: center;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    html > body > .component-blog-post .container-primary .container .row .details-posts {
        padding: 0;
        margin-left: 15px;
        width: 8.33333333%;
    }
    html > body > .component-blog-post .container-primary .container .row .post-article {
        width: 89%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    html > body > .component-blog-post .container-primary .container .row .details-posts {
        padding: 0;
    }
}




/* 36.2. Blog Widgets */
.component-widgets .container {
    width: 100%;
}
.component-widgets .container .row > div {
    padding: 0;
    margin-bottom: 40px;
}
.component-widgets .container .row > div .title-post-widgets {
    color: #555555;
    margin: 0 0 15px 0;
}
.component-widgets .container .row > div p {
    line-height: 1.75em;
}
.component-widgets .container .row > div.widgets-search-bar form {
    margin: 0;
    padding: 0;
    height: 45px;
    position: relative;
}
.component-widgets .container .row > div.widgets-search-bar form .form-group {
    width: 100%;
    height: 100%;
    max-height: 45px;
}
.component-widgets .container .row > div.widgets-search-bar form .form-group input {
    width: 100%;
    height: 100%;
    box-shadow: none;
    border-radius: 0;
    padding-right: 60px;
}
.component-widgets .container .row > div.widgets-search-bar form button.btn {
    top: 0;
    right: 0;
    padding: 0;
    width: 50px;
    height: 100%;
    border-radius: 0;
    position: absolute;
    background-color: #d1d1d1;
}
.component-widgets .container .row > div.widgets-search-bar form button.btn:hover {
    background-color: #c5c5c5;
}
.component-widgets .container .row > div.widgets-search-bar form button.btn:hover span {
    color: #009cf0;
}
.component-widgets .container .row > div.widgets-about-author .description {
    font-size: 13px;
    color: #929292;
}
.component-widgets .container .row > div.widgets-categories .content ul li {
    padding: 10px 0;
}
.component-widgets .container .row > div.widgets-categories .content ul li:hover {
    background-color: #009cf0;
}
.component-widgets .container .row > div.widgets-categories .content ul li:hover a {
    color: #ffffff;
}
.component-widgets .container .row > div.widgets-categories .content ul li:hover a span {
    color: #ffffff;
}
.component-widgets .container .row > div.widgets-categories .content ul li a {
    color: #929292;
    font-weight: 300;
}
.component-widgets .container .row > div.widgets-categories .content ul li a span {
    padding: 0 5px;
    color: #009cf0;
}
.component-widgets .container .row > div.widgets-recent-posts .content ul li {
    margin: 10px 0;
    display: inline-block;
}
.component-widgets .container .row > div.widgets-recent-posts .content ul li:hover img {
    opacity: 0.7;
}
.component-widgets .container .row > div.widgets-recent-posts .content ul li:hover .description {
    color: #009cf0;
}
.component-widgets .container .row > div.widgets-recent-posts .content ul li img {
    float: left;
    width: 65px;
    height: 65px;
    overflow: hidden;
    margin-right: 10px;
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .component-widgets .container .row > div.widgets-recent-posts .content ul li img {
        float: none;
    }
}
.component-widgets .container .row > div.widgets-recent-posts .content ul li .description {
    margin: 10px 0 10px 0 ;
}
.component-widgets .container .row > div.widgets-archives .content ul li {
    padding: 10px 0;
}
.component-widgets .container .row > div.widgets-archives .content ul li:hover a {
    color: #009cf0;
}
.component-widgets .container .row > div.widgets-archives .content ul li:hover a span {
    padding-right: 10px;
}
.component-widgets .container .row > div.widgets-archives .content ul li a {
    color: #929292;
    font-weight: 300;
}
.component-widgets .container .row > div.widgets-archives .content ul li a span {
    padding: 0 5px;
    color: #009cf0;
}
.component-widgets .container .row > div.widgets-archives .content ul li:last-child {
    padding-bottom: 0;
}
.component-widgets .container .row > div.widgets-tag .content ul li {
    margin: 10px 5px 10px 0;
    display: inline-block;
}
.component-widgets .container .row > div.widgets-tag .content ul li:hover a {
    color: #ffffff;
    border-color: #009cf0;
    background-color: #009cf0;
}
.component-widgets .container .row > div.widgets-tag .content ul li a {
    color: #929292;
    font-weight: 300;
    padding: 5px 15px;
    border: 1px solid #d1d1d1;
}




/* 36.3. Blog Post Slider */
.component-blog-post-slider .container > .row .post-article .slider-posted {
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 500px;
    margin-bottom: 30px;
}
.component-blog-post-slider .container > .row .post-article .slider-posted .carousel .carousel-inner .item img {
    width: 100%;
}
.component-blog-post-slider .container > .row .post-article .slider-posted .carousel .control-arrow {
    width: 160px;
    bottom: 50px;
    margin: 0 auto;
    position: relative;
}
.component-blog-post-slider .container > .row .post-article .slider-posted .carousel .control-arrow a {
    display: inline-block;
}
.component-blog-post-slider .container > .row .post-article .slider-posted .carousel .control-arrow a:hover .control {
    border-color: #009cf0;
    background-color: #009cf0;
}
.component-blog-post-slider .container > .row .post-article .slider-posted .carousel .control-arrow a .control {
    width: 35px;
    height: 35px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background-color: rgba(0, 0, 0, 0.25);
}
.component-blog-post-slider .container > .row .post-article .slider-posted .carousel .control-arrow a .control span {
    color: #ffffff;
    font-size: 20px;
    line-height: 33px;
}
.component-blog-post-slider .container > .row .post-article .slider-posted .carousel .control-arrow a.view-full-image {
    margin: 0 20px;
}
.component-blog-post-slider .container > .row .post-article .slider-posted .carousel .control-arrow a.view-full-image span {
    font-size: 16px;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts {
    padding-left: 0;
    text-align: center;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts > div {
    max-width: 68px;
    min-height: 68px;
    margin-bottom: 25px;
    border: 1px solid #d1d1d1;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts > div span {
    color: #929292;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts .date-post .day-contain {
    width: 100%;
    margin: -3px 0;
    text-align: center;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts .date-post .day-contain span {
    font-size: 2.4em;
    font-weight: 300;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts .date-post .month-year-contain span {
    font-size: 0.9em;
    font-weight: 100;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts .type-posts {
    position: relative;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts .type-posts span {
    line-height: 65px;
}
.component-blog-post-slider .container > .row .post-article > .row .details-posts .type-posts span.fa-ellipsis-h {
    font-size: 3em;
}
@media (max-width: 768px) {
    .component-blog-post-slider .container > .row .post-article > .row .details-posts > div {
        float: left;
        margin: 0 10px 20px 0;
    }
    .component-blog-post-slider .container > .row .post-article > .row .details-posts .date-post {
        width: 65px;
        min-height: 65px;
        padding: 5px;
    }
    .component-blog-post-slider .container > .row .post-article > .row .details-posts .date-post .day-contain {
        margin: 0;
    }
    .component-blog-post-slider .container > .row .post-article > .row .details-posts .date-post .day-contain span {
        font-size: 1.5em;
    }
    .component-blog-post-slider .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
        padding-bottom: 0;
    }
    .component-blog-post-slider .container > .row .post-article > .row .details-posts .type-posts {
        width: 65px;
        min-height: 65px;
    }
    .component-blog-post-slider .container > .row .post-article > .row .details-posts .type-posts span {
        line-height: 63px;
    }
}
.component-blog-post-slider .container > .row .post-article > .row .container-article {
    padding-right: 0;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .title-post h1 {
    font-size: 1.9em;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #555555;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .posting-data {
    margin-bottom: 0px;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .posting-data ul li {
    display: inline-block;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .posting-data ul li span {
    color: #bababa;
    padding: 0 4px;
    font-weight: 100;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .posting-data ul li:first-child span:first-child {
    padding: 0;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar span {
    padding: 0 10px;
}
@media (max-width: 768px) {
    .component-blog-post-slider .container > .row .post-article > .row .container-article .posting-data ul li {
        padding: 0;
        display: block;
    }
    .component-blog-post-slider .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar {
        display: none;
    }
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .text-contain {
    margin-bottom: 20px;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .text-contain p {
    color: #929292;
    font-weight: 300;
    line-height: 1.8em;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .read-more {
    color: #009cf0;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .read-more:hover span {
    margin-left: 15px;
}
.component-blog-post-slider .container > .row .post-article > .row .container-article .read-more span {
    margin-left: 5px;
}
@media (max-width: 768px) {
    .component-blog-post-slider .container > .row .post-article > .row .details-posts,
    .component-blog-post-slider .container > .row .post-article > .row .container-article {
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .component-blog-post-slider .container > .row .details-posts {
        padding: 0;
        width: 9%;
    }
    .component-blog-post-slider .container > .row .container-article {
        width: 88%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .component-blog-post-slider .container > .row .details-posts {
        padding: 0;
    }
}





/* 36.4. Blog Post Image */
.component-blog-post-image .container > .row .post-article .image-posted {
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 500px;
    margin-bottom: 30px;
}
.component-blog-post-image .container > .row .post-article .image-posted img {
    width: 100%;
}
.component-blog-post-image .container > .row .post-article > .row .details-posts {
    padding-left: 0;
    text-align: center;
}
.component-blog-post-image .container > .row .post-article > .row .details-posts > div {
    max-width: 68px;
    min-height: 68px;
    margin-bottom: 25px;
    border: 1px solid #d1d1d1;
}
.component-blog-post-image .container > .row .post-article > .row .details-posts > div span {
    color: #929292;
}
.component-blog-post-image .container > .row .post-article > .row .details-posts .date-post .day-contain {
    width: 100%;
    margin: -3px 0;
    text-align: center;
}
.component-blog-post-image .container > .row .post-article > .row .details-posts .date-post .day-contain span {
    font-size: 2.4em;
    font-weight: 300;
}
.component-blog-post-image .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}
.component-blog-post-image .container > .row .post-article > .row .details-posts .date-post .month-year-contain span {
    font-size: 0.9em;
    font-weight: 100;
}
.component-blog-post-image .container > .row .post-article > .row .details-posts .type-posts span {
    font-size: 2em;
    line-height: 68px;
}
@media (max-width: 768px) {
    .component-blog-post-image .container > .row .post-article > .row .details-posts > div {
        float: left;
        margin: 0 10px 20px 0;
    }
    .component-blog-post-image .container > .row .post-article > .row .details-posts .date-post {
        width: 65px;
        min-height: 65px;
        padding: 5px;
    }
    .component-blog-post-image .container > .row .post-article > .row .details-posts .date-post .day-contain {
        margin: 0;
    }
    .component-blog-post-image .container > .row .post-article > .row .details-posts .date-post .day-contain span {
        font-size: 1.5em;
    }
    .component-blog-post-image .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
        padding-bottom: 0;
    }
    .component-blog-post-image .container > .row .post-article > .row .details-posts .type-posts {
        width: 65px;
        min-height: 65px;
    }
    .component-blog-post-image .container > .row .post-article > .row .details-posts .type-posts span {
        line-height: 63px;
    }
}
.component-blog-post-image .container > .row .post-article > .row .container-article {
    padding-right: 0;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .title-post h1 {
    font-size: 1.9em;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #555555;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .posting-data {
    margin-bottom: 0px;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .posting-data ul li {
    display: inline-block;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .posting-data ul li span {
    color: #bababa;
    padding: 0 4px;
    font-weight: 100;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .posting-data ul li:first-child span:first-child {
    padding: 0;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar span {
    padding: 0 10px;
}
@media (max-width: 768px) {
    .component-blog-post-image .container > .row .post-article > .row .container-article .posting-data ul li {
        padding: 0;
        display: block;
    }
    .component-blog-post-image .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar {
        display: none;
    }
}
.component-blog-post-image .container > .row .post-article > .row .container-article .text-contain {
    margin-bottom: 20px;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .text-contain p {
    color: #929292;
    font-weight: 300;
    line-height: 1.8em;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .read-more {
    color: #009cf0;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .read-more:hover span {
    margin-left: 15px;
}
.component-blog-post-image .container > .row .post-article > .row .container-article .read-more span {
    margin-left: 5px;
}
@media (max-width: 768px) {
    .component-blog-post-image .container > .row .post-article > .row .details-posts,
    .component-blog-post-image .container > .row .post-article > .row .container-article {
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .component-blog-post-image .container > .row .details-posts {
        padding: 0;
        width: 9%;
    }
    .component-blog-post-image .container > .row .container-article {
        width: 88%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .component-blog-post-image .container > .row .details-posts {
        padding: 0;
    }
}




/* 36.5. Blog Post Video 1 */
.component-blog-post-video-1 .container > .row .post-article .video-posted {
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 500px;
    margin-bottom: 30px;
}
.component-blog-post-video-1 .container > .row .post-article .video-posted iframe {
    border: 0;
    width: 100%;
}
.component-blog-post-video-1 .container > .row .post-article > .row .details-posts {
    padding-left: 0;
    text-align: center;
}
.component-blog-post-video-1 .container > .row .post-article > .row .details-posts > div {
    max-width: 68px;
    min-height: 68px;
    margin-bottom: 25px;
    border: 1px solid #d1d1d1;
}
.component-blog-post-video-1 .container > .row .post-article > .row .details-posts > div span {
    color: #929292;
}
.component-blog-post-video-1 .container > .row .post-article > .row .details-posts .date-post .day-contain {
    width: 100%;
    margin: -3px 0;
    text-align: center;
}
.component-blog-post-video-1 .container > .row .post-article > .row .details-posts .date-post .day-contain span {
    font-size: 2.4em;
    font-weight: 300;
}
.component-blog-post-video-1 .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}
.component-blog-post-video-1 .container > .row .post-article > .row .details-posts .date-post .month-year-contain span {
    font-size: 0.9em;
    font-weight: 100;
}
.component-blog-post-video-1 .container > .row .post-article > .row .details-posts .type-posts span {
    font-size: 2em;
    line-height: 68px;
}
@media (max-width: 768px) {
    .component-blog-post-video-1 .container > .row .post-article > .row .details-posts > div {
        float: left;
        margin: 0 10px 20px 0;
    }
    .component-blog-post-video-1 .container > .row .post-article > .row .details-posts .date-post {
        width: 65px;
        min-height: 65px;
        padding: 5px;
    }
    .component-blog-post-video-1 .container > .row .post-article > .row .details-posts .date-post .day-contain {
        margin: 0;
    }
    .component-blog-post-video-1 .container > .row .post-article > .row .details-posts .date-post .day-contain span {
        font-size: 1.5em;
    }
    .component-blog-post-video-1 .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
        padding-bottom: 0;
    }
    .component-blog-post-video-1 .container > .row .post-article > .row .details-posts .type-posts {
        width: 65px;
        min-height: 65px;
    }
    .component-blog-post-video-1 .container > .row .post-article > .row .details-posts .type-posts span {
        line-height: 63px;
    }
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article {
    padding-right: 0;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .title-post h1 {
    font-size: 1.9em;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #555555;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .posting-data {
    margin-bottom: 10px;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .posting-data ul li {
    display: inline-block;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .posting-data ul li span {
    color: #bababa;
    padding: 0 4px;
    font-weight: 100;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .posting-data ul li:first-child span:first-child {
    padding: 0;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar span {
    padding: 0 10px;
}
@media (max-width: 768px) {
    .component-blog-post-video-1 .container > .row .post-article > .row .container-article .posting-data ul li {
        padding: 0;
        display: block;
    }
    .component-blog-post-video-1 .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar {
        display: none;
    }
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .text-contain {
    margin-bottom: 20px;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .text-contain p {
    color: #929292;
    font-weight: 300;
    line-height: 1.8em;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .read-more {
    color: #009cf0;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .read-more:hover span {
    margin-left: 15px;
}
.component-blog-post-video-1 .container > .row .post-article > .row .container-article .read-more span {
    margin-left: 5px;
}
@media (max-width: 768px) {
    .component-blog-post-video-1 .container > .row .post-article > .row .details-posts,
    .component-blog-post-video-1 .container > .row .post-article > .row .container-article {
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .component-blog-post-video-1 .container > .row .details-posts {
        padding: 0;
        width: 9%;
    }
    .component-blog-post-video-1 .container > .row .container-article {
        width: 88%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .component-blog-post-video-1 .container > .row .details-posts {
        padding: 0;
    }
}




/* 36.6. Blog Post Video 2 */
.component-blog-post-video-2 .container > .row .post-article .video-posted {
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 500px;
    margin-bottom: 30px;
}
.component-blog-post-video-2 .container > .row .post-article .video-posted iframe {
    border: 0;
    width: 100%;
}
.component-blog-post-video-2 .container > .row .post-article > .row .details-posts {
    padding-left: 0;
    text-align: center;
}
.component-blog-post-video-2 .container > .row .post-article > .row .details-posts > div {
    max-width: 68px;
    min-height: 68px;
    margin-bottom: 25px;
    border: 1px solid #d1d1d1;
}
.component-blog-post-video-2 .container > .row .post-article > .row .details-posts > div span {
    color: #929292;
}
.component-blog-post-video-2 .container > .row .post-article > .row .details-posts .date-post .day-contain {
    width: 100%;
    margin: -3px 0;
    text-align: center;
}
.component-blog-post-video-2 .container > .row .post-article > .row .details-posts .date-post .day-contain span {
    font-size: 2.4em;
    font-weight: 300;
}
.component-blog-post-video-2 .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}
.component-blog-post-video-2 .container > .row .post-article > .row .details-posts .date-post .month-year-contain span {
    font-size: 0.9em;
    font-weight: 100;
}
.component-blog-post-video-2 .container > .row .post-article > .row .details-posts .type-posts span {
    font-size: 2em;
    line-height: 68px;
}
@media (max-width: 768px) {
    .component-blog-post-video-2 .container > .row .post-article > .row .details-posts > div {
        float: left;
        margin: 0 10px 20px 0;
    }
    .component-blog-post-video-2 .container > .row .post-article > .row .details-posts .date-post {
        width: 65px;
        min-height: 65px;
        padding: 5px;
    }
    .component-blog-post-video-2 .container > .row .post-article > .row .details-posts .date-post .day-contain {
        margin: 0;
    }
    .component-blog-post-video-2 .container > .row .post-article > .row .details-posts .date-post .day-contain span {
        font-size: 1.5em;
    }
    .component-blog-post-video-2 .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
        padding-bottom: 0;
    }
    .component-blog-post-video-2 .container > .row .post-article > .row .details-posts .type-posts {
        width: 65px;
        min-height: 65px;
    }
    .component-blog-post-video-2 .container > .row .post-article > .row .details-posts .type-posts span {
        line-height: 63px;
    }
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article {
    padding-right: 0;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .title-post h1 {
    font-size: 1.9em;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #555555;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .posting-data {
    margin-bottom: 10px;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .posting-data ul li {
    display: inline-block;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .posting-data ul li span {
    color: #bababa;
    padding: 0 4px;
    font-weight: 100;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .posting-data ul li:first-child span:first-child {
    padding: 0;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar span {
    padding: 0 10px;
}
@media (max-width: 768px) {
    .component-blog-post-video-2 .container > .row .post-article > .row .container-article .posting-data ul li {
        padding: 0;
        display: block;
    }
    .component-blog-post-video-2 .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar {
        display: none;
    }
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .text-contain {
    margin-bottom: 20px;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .text-contain p {
    color: #929292;
    font-weight: 300;
    line-height: 1.8em;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .read-more {
    color: #009cf0;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .read-more:hover span {
    margin-left: 15px;
}
.component-blog-post-video-2 .container > .row .post-article > .row .container-article .read-more span {
    margin-left: 5px;
}
@media (max-width: 768px) {
    .component-blog-post-video-2 .container > .row .post-article > .row .details-posts,
    .component-blog-post-video-2 .container > .row .post-article > .row .container-article {
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .component-blog-post-video-2 .container > .row .details-posts {
        padding: 0;
        width: 9%;
    }
    .component-blog-post-video-2 .container > .row .container-article {
        width: 88%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .component-blog-post-video-2 .container > .row .details-posts {
        padding: 0;
    }
}




/* 36.7. Blog Post Text */
.component-blog-post-text .container > .row .post-article .image-posted {
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 500px;
    margin-bottom: 30px;
}
.component-blog-post-text .container > .row .post-article .image-posted img {
    width: 100%;
}
.component-blog-post-text .container > .row .post-article > .row .details-posts {
    padding-left: 0;
    text-align: center;
}
.component-blog-post-text .container > .row .post-article > .row .details-posts > div {
    max-width: 68px;
    min-height: 68px;
    margin-bottom: 25px;
    border: 1px solid #d1d1d1;
}
.component-blog-post-text .container > .row .post-article > .row .details-posts > div span {
    color: #929292;
}
.component-blog-post-text .container > .row .post-article > .row .details-posts .date-post .day-contain {
    width: 100%;
    margin: -3px 0;
    text-align: center;
}
.component-blog-post-text .container > .row .post-article > .row .details-posts .date-post .day-contain span {
    font-size: 2.4em;
    font-weight: 300;
}
.component-blog-post-text .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}
.component-blog-post-text .container > .row .post-article > .row .details-posts .date-post .month-year-contain span {
    font-size: 0.9em;
    font-weight: 100;
}
.component-blog-post-text .container > .row .post-article > .row .details-posts .type-posts span {
    font-size: 2em;
    line-height: 68px;
}
@media (max-width: 768px) {
    .component-blog-post-text .container > .row .post-article > .row .details-posts > div {
        float: left;
        margin: 0 10px 20px 0;
    }
    .component-blog-post-text .container > .row .post-article > .row .details-posts .date-post {
        width: 65px;
        min-height: 65px;
        padding: 5px;
    }
    .component-blog-post-text .container > .row .post-article > .row .details-posts .date-post .day-contain {
        margin: 0;
    }
    .component-blog-post-text .container > .row .post-article > .row .details-posts .date-post .day-contain span {
        font-size: 1.5em;
    }
    .component-blog-post-text .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
        padding-bottom: 0;
    }
    .component-blog-post-text .container > .row .post-article > .row .details-posts .type-posts {
        width: 65px;
        min-height: 65px;
    }
    .component-blog-post-text .container > .row .post-article > .row .details-posts .type-posts span {
        line-height: 63px;
    }
}
.component-blog-post-text .container > .row .post-article > .row .container-article {
    padding-right: 0;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .title-post h1 {
    font-size: 1.9em;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #555555;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .posting-data {
    margin-bottom: 10px;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .posting-data ul li {
    display: inline-block;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .posting-data ul li span {
    color: #bababa;
    padding: 0 4px;
    font-weight: 100;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .posting-data ul li:first-child span:first-child {
    padding: 0;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar span {
    padding: 0 10px;
}
@media (max-width: 768px) {
    .component-blog-post-text .container > .row .post-article > .row .container-article .posting-data ul li {
        padding: 0;
        display: block;
    }
    .component-blog-post-text .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar {
        display: none;
    }
}
.component-blog-post-text .container > .row .post-article > .row .container-article .text-contain {
    margin-bottom: 20px;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .text-contain p {
    color: #929292;
    font-weight: 300;
    line-height: 1.8em;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .read-more {
    color: #009cf0;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .read-more:hover span {
    margin-left: 15px;
}
.component-blog-post-text .container > .row .post-article > .row .container-article .read-more span {
    margin-left: 5px;
}
@media (max-width: 768px) {
    .component-blog-post-text .container > .row .post-article > .row .details-posts,
    .component-blog-post-text .container > .row .post-article > .row .container-article {
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .component-blog-post-text .container > .row .details-posts {
        padding: 0;
        width: 9%;
    }
    .component-blog-post-text .container > .row .container-article {
        width: 88%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .component-blog-post-text .container > .row .details-posts {
        padding: 0;
    }
}




/* 36.8. Blog Post Quote */
.component-blog-post-quote .container > .row .post-article .image-posted {
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 500px;
    margin-bottom: 30px;
}
.component-blog-post-quote .container > .row .post-article .image-posted img {
    width: 100%;
}
.component-blog-post-quote .container > .row .post-article > .row .details-posts {
    padding-left: 0;
    text-align: center;
}
.component-blog-post-quote .container > .row .post-article > .row .details-posts > div {
    max-width: 68px;
    min-height: 68px;
    position: relative;
    margin-bottom: 25px;
    border: 1px solid #d1d1d1;
}
.component-blog-post-quote .container > .row .post-article > .row .details-posts > div span {
    color: #929292;
}
.component-blog-post-quote .container > .row .post-article > .row .details-posts .date-post .day-contain {
    width: 100%;
    margin: -3px 0;
    text-align: center;
}
.component-blog-post-quote .container > .row .post-article > .row .details-posts .date-post .day-contain span {
    font-size: 2.4em;
    font-weight: 300;
}
.component-blog-post-quote .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}
.component-blog-post-quote .container > .row .post-article > .row .details-posts .date-post .month-year-contain span {
    font-size: 0.9em;
    font-weight: 100;
}
.component-blog-post-quote .container > .row .post-article > .row .details-posts .type-posts span {
    left: 0;
    right: 0;
    bottom: -12px;
    font-size: 50px;
    font-style: normal;
    position: absolute;
    font-family: "RammettoOne";
}
@media (max-width: 768px) {
    .component-blog-post-quote .container > .row .post-article > .row .details-posts > div {
        float: left;
        margin: 0 10px 20px 0;
    }
    .component-blog-post-quote .container > .row .post-article > .row .details-posts .date-post {
        width: 65px;
        min-height: 65px;
        padding: 5px;
    }
    .component-blog-post-quote .container > .row .post-article > .row .details-posts .date-post .day-contain {
        margin: 0;
    }
    .component-blog-post-quote .container > .row .post-article > .row .details-posts .date-post .day-contain span {
        font-size: 1.5em;
    }
    .component-blog-post-quote .container > .row .post-article > .row .details-posts .date-post .month-year-contain {
        padding-bottom: 0;
    }
    .component-blog-post-quote .container > .row .post-article > .row .details-posts .type-posts {
        width: 65px;
        min-height: 65px;
    }
    .component-blog-post-quote .container > .row .post-article > .row .details-posts .type-posts span {
        line-height: 63px;
    }
}
.component-blog-post-quote .container > .row .post-article > .row .container-article {
    padding-right: 0;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .title-post h1 {
    font-size: 1.9em;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #555555;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .posting-data {
    margin-bottom: 10px;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .posting-data ul li {
    display: inline-block;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .posting-data ul li span {
    color: #bababa;
    padding: 0 4px;
    font-weight: 100;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .posting-data ul li:first-child span:first-child {
    padding: 0;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar span {
    padding: 0 10px;
}
@media (max-width: 768px) {
    .component-blog-post-quote .container > .row .post-article > .row .container-article .posting-data ul li {
        padding: 0;
        display: block;
    }
    .component-blog-post-quote .container > .row .post-article > .row .container-article .posting-data ul li.separator-bar {
        display: none;
    }
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .text-contain blockquote {
    border: none;
    color: #929292;
    font-size: 14px;
    font-weight: 300;
    position: relative;
    font-style: italic;
    padding: 5px 0 0 0;
    background-color: transparent;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .text-contain blockquote p {
    color: #929292;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .read-more {
    color: #009cf0;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .read-more:hover span {
    margin-left: 15px;
}
.component-blog-post-quote .container > .row .post-article > .row .container-article .read-more span {
    margin-left: 5px;
}
@media (max-width: 768px) {
    .component-blog-post-quote .container > .row .post-article > .row .details-posts,
    .component-blog-post-quote .container > .row .post-article > .row .container-article {
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .component-blog-post-quote .container > .row .details-posts {
        padding: 0;
        width: 9%;
    }
    .component-blog-post-quote .container > .row .container-article {
        width: 88%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .component-blog-post-quote .container > .row .details-posts {
        padding: 0;
    }
}





/* 37. Footer */
html > body > .component-footer {
    background-color: #eeeeee;
    border-top: 3px solid #009cf0;
}
@media (max-width: 768px) {
    html > body > .component-footer .container > .row > div {
        margin-bottom: 30px;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}
@media (max-width: 560px) {
    html > body > .component-footer .container > .row > .flickr-widget li {
        float: left;
        margin: 2px;
        display: block;
    }
}
html > body > .component-footer .container > .row > div.clearfix {
    margin-bottom: 0;
    border-bottom: none;
}
html > body > .component-footer .container > .row > div .logo-contain .logo {
    margin-bottom: 25px;
}
html > body > .component-footer .container > .row > div > p {
    line-height: 23px;
    margin-bottom: 20px;
}
html > body > .component-footer .container > .row > div > p a {
    color: #009cf0;
}
html > body > .component-footer .container > .row > div .title-widget {
    margin-bottom: 15px;
}
html > body > .component-footer .container > .row > div .title-widget p {
    margin: 0;
    font-size: 1.35em;
    font-weight: 300;
}
html > body > .component-footer .container > .row > div ul li {
    font-size: 1em;
    font-weight: 300;
    color: #555555;
}
html > body > .component-footer .container > .row > div .hover-image {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    background-color: #009cf0;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("../image/_footer-image-icon-plus.png");
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
html > body > .component-footer .container > .row > div.recent-post .post {
    margin-bottom: 15px;
}
@media (max-width: 768px) {
    html > body > .component-footer .container > .row > div.recent-post .post {
        margin-bottom: 30px;
    }
}
html > body > .component-footer .container > .row > div.recent-post .post:hover .hover-image {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    -webkit-animation: spin 0.3s linear;
    -moz-animation: spin 0.3s linear;
    animation: spin 0.3s linear;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(180deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(180deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
html > body > .component-footer .container > .row > div.recent-post .post .contain-image-post {
    padding: 0;
    cursor: pointer;
    position: relative;
}
@media (max-width: 768px) {
    html > body > .component-footer .container > .row > div.recent-post .post .contain-image-post {
        width: 30%;
        float: none;
        margin: 0 auto;
    }
}
html > body > .component-footer .container > .row > div.recent-post .post .contain-image-post img {
    width: 100%;
}
html > body > .component-footer .container > .row > div.recent-post .post .contain-detail-post {
    padding: 0 0 0 10px;
}
html > body > .component-footer .container > .row > div.recent-post .post .contain-detail-post .title-post {
    margin: 0;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 20px;
    color: #555555;
}
html > body > .component-footer .container > .row > div.recent-post .post .contain-detail-post .post-date {
    margin: 0;
    font-size: 0.85em;
    line-height: 20px;
    color: #555555;
}
html > body > .component-footer .container > .row >  .contact-us > ul li {
    font-weight: 600;
    margin-bottom: 5px;
}
html > body > .component-footer .container > .row >  .contact-us > ul li span{
    font-weight: 400;
}
html > body > .component-footer .container > .row >  .contact-us > ul li:hover {
    color: #555555;
}
html > body > .component-footer .container > .row >  .contact-us > ul li:hover span{
    color: #009cf0;
}
html > body > .component-footer .container > .row > div .follow-us .title-widget {
    margin-top: 25px;
}
html > body > .component-footer .container > .row > div .follow-us ul li {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    text-align: center;
    display: inline-block;
}
@media (max-width: 1200px) {
    html > body > .component-footer .container > .row > div .follow-us ul li {
        margin-right: 0;
    }
}
html > body > .component-footer .container > .row > div .follow-us ul li:hover {
    background-color: #009cf0;
}
html > body > .component-footer .container > .row > div .follow-us ul li:hover a span {
    color: #ffffff;
}
html > body > .component-footer .container > .row > div .follow-us ul li a {
    width: 100%;
    height: 100%;
}
html > body > .component-footer .container > .row > div .follow-us ul li a span {
    line-height: 30px;
    color: #555555;
}
html > body > .component-footer .container > .row > div.flickr-widget ul li {
    width: 80px;
    height: 80px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}
html > body > .component-footer .container > .row > div.flickr-widget ul li:hover .hover-image {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    -webkit-animation: spin 0.3s linear;
    -moz-animation: spin 0.3s linear;
    animation: spin 0.3s linear;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(180deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(180deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
html > body > .component-footer .container > .row > div.flickr-widget ul li img {
    height: 100%;
}





/* 38. Footer Bar */
html > body > .component-footer-bar {
    background-color: #ffffff;
}
html > body > .component-footer-bar .container {
    padding: 20px 0;
}
html > body > .component-footer-bar .container .row > div p {
    margin: 0;
    color: #555555;
    font-weight: 300;
    line-height: 2em;
    text-align: center;
    font-family: Arial, sans-serif;
}
html > body > .component-footer-bar .container .row > div p span {
    color: #009cf0;
}