@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); @import "animate.css"; @import "touchTouch.css"; @import url(//fonts.googleapis.com/css?family=Lato:300,400,700&display=swap); @import url(//fonts.googleapis.com/css?family=Asap:400,700,700italic&display=swap); @import url(//fonts.googleapis.com/css?family=Roboto:400,700&display=swap); /*======================================================== Main variables =========================================================*/ /*hover color*/ /*hover 2 color*/ /*color of content*/ /*color of border*/ /*======================================================== Typography =========================================================*/ /*color of input fields in contact form*/ /*======================================================== Main layout styles =========================================================*/ html, body { margin: 0; padding: 0; height: 100%; } body { min-width: 300px; background: #fff; color: #666667; font: 16px/24px 'Lato', Arial, sans-serif; } a[href^="tel:"] { color: inherit; text-decoration: none; } * { -webkit-text-size-adjust: none; } h1 { position: relative; display: inline-block; margin: 0; float: left; } h1 img { max-width: inherit; } h2 { position: relative; font: bold 72px/72px 'Asap', Arial, sans-serif; font-style: italic; color: #666667; margin-top: 94px; padding-bottom: 7px; } h2:before { position: absolute; display: inline-block; content: ''; width: 370px; max-width: 100%; height: 1px; left: 50%; margin-left: -185px; bottom: 0; background: #666667; } h3 { position: relative; font: bold 30px/30px 'Asap', Arial, sans-serif; color: #666667; margin-top: 28px; padding-bottom: 14px; } h3:before { position: absolute; display: inline-block; content: ''; width: 170px; max-width: 100%; height: 1px; left: 50%; margin-left: -85px; bottom: 0; background: #666667; } h4 { position: relative; font: 24px/30px 'Asap', Arial, sans-serif; color: #666667; margin-top: 26px; padding-bottom: 16px; margin-bottom: -10px; } h4:before { position: absolute; display: inline-block; content: ''; width: 170px; max-width: 100%; height: 1px; left: 50%; margin-left: -85px; bottom: 0; background: #666667; } .content-load-spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/gallery-loader-list.gif) #ffffff 50% 50% no-repeat; z-index: 1000; overflow: hidden; } .top_section { width: 100%; overflow: hidden; background: #ededed; padding: 10px 0 7px; } .left_txt { float: left; padding-left: 24px; } /*======================================================== HEADER styles =========================================================*/ #header { background: #e78024; padding: 0; position: relative; z-index: 100; } #header:before { position: absolute; display: inline-block; content: ''; width: 100%; height: 16px; left: 0; bottom: -16px; z-index: -1; background: url(../images/shadow1.png) repeat-x 0 0; } /* Main menu styles ========================================================*/ /*======================================================== menu variables =========================================================*/ nav { margin-top: 0px; float: right; margin-right: 14px; } .sf-menu { float: right; } .sf-menu > li { float: left; position: relative; margin: 0 0 0 1px; } .sf-menu > li > a { display: inline-block; padding: 0px 10px; font: 24px/96px 'Roboto', Arial, sans-serif; text-transform: uppercase; color: #ffffff; /*background: @menu-bg-color;*/ -webkit-transition: 0.3s all ease; transition: 0.3s all ease; /* rollover line =============================================*/ } .sf-menu > li > a:hover { color: #e78024; /*background: @menu-bg-hover-color;*/ -webkit-transition: 0.3s all ease; transition: 0.3s all ease; } .sf-menu > li > a:hover strong { width: 100%; opacity: 1; } .sf-menu > li > a.sf-with-ul:after { content: ''; position: absolute; width: 5px; bottom: 10px; left: 50%; pointer-events: none; z-index: 999; width: 0; height: 0; /*border-style: solid; border-width: 3px 3px 0 3px; border-color: #333 transparent transparent transparent;*/ } .sf-menu > li > a strong { width: 0%; position: absolute; display: inline-block; left: 0; top: 0; bottom: 0; -webkit-transition: 0.3s all ease; transition: 0.3s all ease; z-index: -1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; opacity: 0; /* css triangle =============================================*/ /*&:before { content: ""; display: block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fa9183; position: absolute; top: -5px; left: 50%; margin-left: -3px; }*/ } .sf-menu > li.current > a { color: #e78024; /*background: @menu-bg-hover-color;*/ } .sf-menu > li.current > a strong { width: 100%; opacity: 1; } .sf-menu > li.sfHover > a { color: #e78024; /*background: @menu-bg-hover-color;*/ } .sf-menu > li.sfHover > a strong { width: 100%; opacity: 1; } .sf-menu a { -webkit-transition: 0.3s all ease; transition: 0.3s all ease; } .sf-menu a:hover { -webkit-transition: 0.3s all ease; transition: 0.3s all ease; } /* First level sub-menu styles - submenu ========================================================*/ .sf-menu ul { position: absolute; top: 95px; left: 0px; background: #616161; padding: 25px 0px 25px; width: 235px; z-index: 2; display: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sf-menu ul li { position: relative; text-align: left; text-indent: 30px; line-height: 30px; } .sf-menu ul li a { font: 300 14px/40px 'Lato', Arial, sans-serif; color: #ffffff; display: block; } .sf-menu ul li a:hover { color: #ffffff; background: #f18d05; } .sf-menu ul li a.sf-with-ul:after { content: ''; font-family: 'FontAwesome'; position: absolute; width: 5px; font-size: 14px; line-height: 14px; font-weight: normal; color: #fff; right: 54px; bottom: 12px; pointer-events: none; z-index: 999; } .sf-menu ul li.sfHover > a { color: #ffffff; } /* Second level sub-menu styles - submenu2 ========================================================*/ .sf-menu ul ul { position: absolute; top: -25px; left: 236px; width: 130px; background: #616161; /*padding: 10px 10px;*/ z-index: 4; } .sf-menu ul ul li { /*line-height: 30px;*/ } .sf-menu ul ul li a { color: #ffffff; } @media only screen and (max-width: 1299px) { .sf-menu > li > a { padding: 0px 5px; font: 22px/70px 'Roboto', Arial, sans-serif; -webkit-transition-duration: 0s; transition-duration: 0s; } h1 img { height: 70px; } /*nav {margin-right: 0;}*/ } @media only screen and (max-width: 979px) { .sf-menu > li > a { font: 14px/70px 'Roboto', Arial, sans-serif; } } @media only screen and (max-width: 767px) { .sf-menu { display: none; } .select-menu { display: block; width: 100%; border-radius: 0px !important; -moz-border-radius: 0px !important; -webkit-border-radius: 0px !important; border: 2px solid #bbb; position: relative; outline: none !important; z-index: 1000; margin-top: 0px; margin-bottom: 3px; } } /* Stuck menu styles ========================================================*/ .isStuck { background: #e78024; padding: 0px 0 0px; z-index: 999; text-align: center; } /*.isStuck h1{ display: none; } .isStuck .sf-menu > li > a {line-height: 25px; font-size: 18px;} .isStuck .sf-menu > li > a strong {bottom: 0px;} .isStuck nav{ float: none; display: inline-block; margin-top: 0; } .isStuck .sf-menu{float: none;} .isStuck .sf-menu ul {top: 26px;} .isStuck .sf-menu ul ul{top: -25px;} */ /*.isStuck nav{margin-right: 0;}*/ .isStuck h1 img { height: 50px; } .isStuck .sf-menu > li > a { line-height: 50px; } @media only screen and (max-width: 979px) { .isStuck { display: none !important; } } /*======================================================== USEFUL styles =========================================================*/ a { text-decoration: none; cursor: pointer; color: inherit; -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } a:hover { color: #e78024; text-decoration: none; } a.link1:hover { color: #000; } a.link2 { color: #de3f18; } a.link2:hover { color: #000; } .txt1 { color: #979797; font-size: 14px; margin-top: 6px; float: left; } .txt2 { font: 18px/24px 'Asap', Arial, sans-serif; color: #666667; margin-top: 6px; padding-left: 40px; float: right; } .txt2 i { font-size: 24px; margin-top: 3px; margin-right: 3px; } .txt3 { font: bold 36px/48px 'Asap', Arial, sans-serif; font-style: italic; margin-top: 235px; } .txt4 { font: bold 30px/32px 'Asap', Arial, sans-serif; color: #666667; margin-top: 48px; } .color1 { color: #e47d21; } .color2 { color: #2eb3e0; } .color3 { color: #a0bb46; } .color4 { color: #de3f18; } .box { overflow: hidden; } .bold { font-weight: bold; } .fw400 { font-weight: 400; } .fw600 { font-weight: 600; } .fz15 { font-size: 15px; } .circle { overflow: hidden; border-radius: 1000px; } .fleft { float: left; } .fright { float: right; } .clear { clear: both; width: 100%; font-size: 0; line-height: 0; } .wrapper { position: relative; overflow: hidden; width: 100%; } .txt_left { text-align: left; } .txt_right { text-align: right; } .txt_cntr { text-align: center; } .txt_ital { font-style: italic; } .txt_upp { text-transform: uppercase; } .txt_line_through { text-decoration: line-through; } .pos_rel { position: relative; } .txt_und { text-decoration: underline; } .padTop1 { padding-top: 10px; } .padBot1 { padding-bottom: 10px; } .padLeft1 { padding-left: 10px; } .padRight1 { padding-right: 10px; } .icon_section { margin-top: 97px; } .marTop0 { margin-top: 0px; } .marTop1 { margin-top: 38px; } .marTop2 { margin-top: 14px; } .marTop3 { margin-top: 60px; } .marTop4 { margin-top: 87px; } .marTop5 { margin-top: 65px; } .marTop6 { margin-top: 65px !important; } .hline { margin-top: 75px; width: 100%; height: 1px; background: #dddddd; overflow: hidden; } .hline.v2 { margin-top: 75px; } .hline.v3 { margin-top: 84px; margin-bottom: 66px; } p { margin-top: 25px; } img { margin-bottom: 0px; max-width: 100%; height: auto; } .img_border { border: 1px solid #efefef; background: #f8f8f8; padding: 7px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 10px; } .img_rounded { border-radius: 500px; } .img1 { margin-top: 85px; } .img2 { margin-top: 42px; } blockquote { overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; } blockquote:before { position: relative; content: ''; font: normal normal 72px/72px 'FontAwesome'; color: #fff; text-align: center; } .bq_txt1 { font: 300 24px/36px 'Lato', Arial, sans-serif; margin-top: 27px; } .bq_txt2 { font: bold 30px/32px 'Asap', Arial, sans-serif; margin-top: 35px; } .bq_txt3 { font: 14px/20px 'Asap', Arial, sans-serif; margin-top: 7px; } .sign1 { display: inline-block; margin: 10px 31px 0 1px; background: #282827; width: 4px; height: 4px; } .num_section { font: 300 52px/52px 'Lato', Arial, sans-serif; float: left; color: #fa9183; width: 52px; display: block; margin-top: -10px; } .date_section { position: relative; width: 100%; max-width: 100px; background-color: #eb6654; float: left; text-align: center; margin-top: 43px; color: #fff; text-transform: uppercase; } .day { font: bold 37px/37px 'Lato', Arial, sans-serif; margin-top: 8px; display: block; } .month { font: 300 10px/12px 'Lato', Arial, sans-serif; margin-top: 3px; display: block; } /*======================================================== LISTS =========================================================*/ .listWithMarker { margin: 0; margin-top: 45px; } .listWithMarker li { display: block; padding-left: 23px; background: url(../images/list_marker.png) 0px 4px no-repeat; margin-bottom: 0; padding-bottom: 10px; } .listWithMarker li a { color: #e78024; text-decoration: none; font: 300 13px/20px "Lato", Arial, sans-serif; text-transform: uppercase; } .listWithMarker li a:hover, .listWithMarker li.current a { color: #000; } /*======================================================== BUTTONS =========================================================*/ .more_btn { display: inline-block; margin-top: 24px; padding: 13px 32px; text-decoration: none; font: 16px/22px "Lato", Arial, sans-serif; color: #555; background: #fff; border: 2px solid #666667; text-transform: uppercase; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; } .more_btn.v2 { margin-top: 93px; padding: 13px 48px; } .more_btn:hover { color: #fff; background: #666667; } .more_btn2 { display: inline-block; margin-top: 24px; padding: 22px 22px; text-decoration: none; font: 16px/22px "Lato", Arial, sans-serif; color: #fff; background: #e78024; width: 300px; text-align: center; text-transform: uppercase; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; } .more_btn2:hover { color: #fff; background: #666667; } /*********************************start magnifier2*************************************/ .figure1 { margin-top: 30px; } .magnifier2 { position: relative; /* display:block; */ display: inline-block; } .zoom { position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(0, 0, 0, 0.33); -webkit-transition: 0.6s all ease; transition: 0.6s all ease; padding: 5px; text-align: center; } a.magnifier2:hover .zoom { opacity: 1; } a.magnifier2:hover .descr_txt { padding-top: 0; } a.magnifier2 .zoom { opacity: 0; } .descr_txt { position: relative; margin-top: 130px; max-width: 255px; display: inline-block; font: 300 24px/32px 'Lato', Arial, sans-serif; color: #fff; padding-top: 100px; -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } /*********************************end magnifier2*************************************/ /*----------- start social icons ----------------*/ .soc_icons_top { position: relative; display: block; margin-top: 3px; white-space: nowrap; text-align: center; margin-right: 20px; float: right; } .soc_icons_top > li { position: relative; display: inline-block; margin-left: 2px; } .soc_icons_top > li > a { position: relative; line-height: 1em; -webkit-transition: 0.4s all ease; transition: 0.4s all ease; color: #fff; width: 25px; height: 25px; display: inline-block; background: #666667; text-align: center; border-radius: 500px; } .soc_icons_top i { font: normal normal 14px/25px 'FontAwesome'; } .soc_icons_top > li > a:hover { color: #000; text-decoration: none; background: #e78024; } .soc_icons { position: relative; display: block; margin-top: 24px; white-space: nowrap; text-align: center; } .soc_icons > li { position: relative; display: inline-block; margin-right: 72px; } .soc_icons > li:last-child { margin-right: 0; } .soc_icons > li > a { position: relative; line-height: 1em; -webkit-transition: 0.4s all ease; transition: 0.4s all ease; width: 87px; height: 87px; display: inline-block; color: #fff; background: #666667; text-align: center; border-radius: 500px; } .soc_icons i { font: normal normal 47px/87px 'FontAwesome'; } .soc_icons > li > a:hover { color: #000; text-decoration: none; background: #e78024; } .icon1 { font: normal normal 126px/126px 'FontAwesome'; padding: 2px; margin-top: 72px; } /*----------- end social icons ----------------*/ .search_main { float: right; } .fw_video_main { /*border-radius: 10px; overflow: hidden;*/ margin-top: 48px; margin-bottom: -12px; background: #fff; } .fw_video { width: 100%; height: 332px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .fw_video iframe { position: relative; display: inline-block; outline: none; width: 100%; height: 100%; border: none; } .player .video-wrapper { border-radius: 10px; } .fw_video iframe html { border-radius: 10px; } /*======================================================== CONTENT styles =========================================================*/ #content { padding: 0 0 0px 0; /*background: #fff;*/ overflow: hidden; } .content_pages { padding-bottom: 150px !important; } .box-11 { width: 100%; margin-top: 103px; background: #e9e9e9; text-align: center; padding: 67px 0 177px; } .col1 { float: left; width: 236px; margin-right: 31px; } .col1.last { margin-right: 0; } #about { padding-bottom: 116px; background: #eee; } #services { padding-top: 57px; padding-bottom: 115px; background: #f8f8f8; } #tips { padding-top: 17px; padding-bottom: 152px; } #contacts { width: 100%; padding: 66px 0 101px; background: #eee; } #privacy { width: 100%; padding: 6px 0 101px; background: #eee; } .box-1 { color: #fff; background: url('../images/bg1.jpg') 0 0; text-align: center; padding: 34px 0 70px 0; min-height: 663px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .box-2 { color: #fff; background: url('../images/bg2.jpg') 0 0; text-align: center; padding: 88px 0 140px 0; min-height: 735px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /**** start Map ****/ .content_map { margin-top: 73px; position: relative; height: 485px; margin-bottom: 81px; } .google-map-api { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #map-canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #map-canvas img { max-width: none !important; } /**** end Map ****/ /**** start address section ****/ .address1 { padding-top: 23px; display: block; } .address1 dt { font-size: 15px; text-transform: uppercase; margin-bottom: 15px; } .address1 dd span { min-width: 75px; display: inline-block; text-align: left; } .address1 dd span.col1 { min-width: 0; } /**** end address section ****/ /*======================================================== FOOTER styles =========================================================*/ #footer { padding: 56px 0 67px; color: #666667; overflow: hidden; text-align: center; font-size: 14px; } .txt_priv span.priv_bold { font-weight: 900; } /*======================================================== Widget styles =========================================================*/ /* UItoTop styles ========================================================*/ #toTop { display: none; text-decoration: none; position: fixed; bottom: 80px; right: 30px; overflow: hidden; border: none; color: #9a9a9a; width: 40px; height: 43px; font-size: 37px; line-height: 38px; z-index: 20; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } #toTop:hover { outline: none; color: #e78024; } @media only screen and (max-width: 1199px) { #toTop { display: none !important; } } /*======================================================== RESPONSIVE LAYOUTS STYLES =========================================================*/ @media only screen and (max-width: 1299px) { .sample { height: auto; /*delete this class*/ } .txt3 br { display: none; margin-top: 200px; } } @media only screen and (max-width: 1199px) { figure a { width: 100%; } } @media only screen and (max-width: 979px) { .map figure, .map figure iframe, #form input, #form textarea, #form .success { width: 100% !important; float: none !important; } #form .success { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .map figure { height: auto !important; margin-bottom: 15px; } .descr_txt { margin-top: 60px; } h2 { font: bold 42px/42px 'Asap', Arial, sans-serif; } } @media only screen and (max-width: 767px) { img { width: 100%; } img.no_resize, h1 img { width: auto; } .map figure iframe { height: 300px; } figure a { width: 100%; } a.link_icon1 { margin-top: 0px; } nav { float: none; margin: 5px; margin-top: 3px; } .descr_txt { margin-top: 150px; } h1 { float: none; } .txt3 { margin-top: 185px; } .soc_icons > li { margin-right: 22px; } .soc_icons > li > a { width: 50px; height: 50px; } .soc_icons i { font: normal normal 27px/50px 'FontAwesome'; } } @media only screen and (max-width: 479px) { .sample { height: auto; /*delete this class*/ } h1 { width: 100%; min-height: 70px; } h1 img { width: 100%; max-width: 389px; } .txt2 { float: none; padding-left: 0; } .descr_txt { margin-top: 80px; } h2:before { width: 100%; margin-left: 0; left: 0; } .more_btn2 { width: 100%; } .txt3 { font: bold 26px/38px 'Asap', Arial, sans-serif; margin-top: 165px; } } @media only screen and (max-width: 320px) { .sample { height: auto; /*delete this class*/ } } /*Core variables and mixins*/