/*--FONTS--*/ @font-face { font-family: 'raleway'; src: url('../fonts/raleway-black-webfont.eot'); src: url('../fonts/raleway-black-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-black-webfont.woff2') format('woff2'), url('../fonts/raleway-black-webfont.woff') format('woff'), url('../fonts/raleway-black-webfont.ttf') format('truetype'), url('../fonts/raleway-black-webfont.svg#ralewayblack') format('svg'); font-weight: 900; font-style: normal; } @font-face { font-family: 'raleway'; src: url('../fonts/raleway-bold-webfont.eot'); src: url('../fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-bold-webfont.woff2') format('woff2'), url('../fonts/raleway-bold-webfont.woff') format('woff'), url('../fonts/raleway-bold-webfont.ttf') format('truetype'), url('../fonts/raleway-bold-webfont.svg#ralewaybold') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'raleway'; src: url('../fonts/raleway-extrabold-webfont.eot'); src: url('../fonts/raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-extrabold-webfont.woff2') format('woff2'), url('../fonts/raleway-extrabold-webfont.woff') format('woff'), url('../fonts/raleway-extrabold-webfont.ttf') format('truetype'), url('../fonts/raleway-extrabold-webfont.svg#ralewayextrabold') format('svg'); font-weight: 800; font-style: normal; } @font-face { font-family: 'raleway'; src: url('../fonts/raleway-extralight-webfont.eot'); src: url('../fonts/raleway-extralight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-extralight-webfont.woff2') format('woff2'), url('../fonts/raleway-extralight-webfont.woff') format('woff'), url('../fonts/raleway-extralight-webfont.ttf') format('truetype'), url('../fonts/raleway-extralight-webfont.svg#ralewayextralight') format('svg'); font-weight: 200; font-style: normal; } @font-face { font-family: 'raleway'; src: url('../fonts/raleway-light-webfont.eot'); src: url('../fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-light-webfont.woff2') format('woff2'), url('../fonts/raleway-light-webfont.woff') format('woff'), url('../fonts/raleway-light-webfont.ttf') format('truetype'), url('../fonts/raleway-light-webfont.svg#ralewaylight') format('svg'); font-weight:300; font-style: normal; } @font-face { font-family: 'raleway'; src: url('../fonts/raleway-medium-webfont.eot'); src: url('../fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-medium-webfont.woff2') format('woff2'), url('../fonts/raleway-medium-webfont.woff') format('woff'), url('../fonts/raleway-medium-webfont.ttf') format('truetype'), url('../fonts/raleway-medium-webfont.svg#ralewaymedium') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'raleway'; src: url('../fonts/raleway-regular-webfont.eot'); src: url('../fonts/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-regular-webfont.woff2') format('woff2'), url('../fonts/raleway-regular-webfont.woff') format('woff'), url('../fonts/raleway-regular-webfont.ttf') format('truetype'), url('../fonts/raleway-regular-webfont.svg#ralewayregular') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'raleway'; src: url('../fonts/raleway-semibold-webfont.eot'); src: url('../fonts/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-semibold-webfont.woff2') format('woff2'), url('../fonts/raleway-semibold-webfont.woff') format('woff'), url('../fonts/raleway-semibold-webfont.ttf') format('truetype'), url('../fonts/raleway-semibold-webfont.svg#ralewaysemibold') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'raleway'; src: url('../fonts/raleway-thin-webfont.eot'); src: url('../fonts/raleway-thin-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-thin-webfont.woff2') format('woff2'), url('../fonts/raleway-thin-webfont.woff') format('woff'), url('../fonts/raleway-thin-webfont.ttf') format('truetype'), url('../fonts/raleway-thin-webfont.svg#ralewaythin') format('svg'); font-weight: 100; font-style: normal; } * { margin:0; padding:0;} html, body { height:100%;} body { font-size:13px; color:#ddd; letter-spacing:1px; font-family:'raleway', sans-serif; } #overdiv { display:block; position:fixed; width:100%; height:100%; background:url(../img/preloader.gif) no-repeat center center #1c1c1c; z-index:1000;} .porto { background:url(../img/normal/fbg.jpg) no-repeat center top; } .porto, .item-2 { background-attachment:fixed !important;} .home #main { background:url(../img/index-bg2.png) no-repeat 0 6%; background-size:620px auto; } html { background:url(../img/bg.jpg) repeat 0 0; } html{height: 100%;} *, *:before, *:after { box-sizing: inherit; } .minscreen { height:100%; width:100%; background:url(../img/bg.jpg) repeat 0 0; position:fixed;} /* ---------------------*/ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } [hidden] { display: none; } a { outline:none; color:#2f9faf;} a:hover { color:#fff;} img { border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } /*--- 1200 - BASE ---*/ #bg { position:relative; overflow:hidden; min-height:100%;} #main { width:100%; margin:0 auto; padding:0 0 80px 0; height: auto; overflow:hidden; max-width:1200px; min-height:100%; position:relative; box-sizing:padding-box; } header { display: inline-block; width:100%; height:auto; margin:20px 0 0 0;} footer { width:100%; height:80px; bottom:0; left:0; position:absolute; margin: 0; text-align:center; background:url(../img/crow-bg.svg) center top no-repeat; background-size:155px auto;} #copyright { text-align:center; display:block; width:auto; font-size:0.7142em; color:#bebebe; font-weight:900; margin:0 auto 0; height:44px; padding:30px 0 0; } .reserved { font-weight:500; color:#777;} /*--- Text-elements ---*/ h1 { font-size: 3rem; font-weight: 100; letter-spacing: -1px; line-height: 3.4rem; margin: 0 0 2rem; text-transform: uppercase;} h2 { font-size: 2.286em; font-weight: 300; line-height: 2.3rem; font-family: 'raleway'; margin: 0 0 2rem; text-transform: uppercase; color:#9b5a26;} h3 { font-size: 2rem; font-weight: 400; line-height: 2.2rem; margin: 0 0 1.2rem; text-transform: uppercase;} h4 { font-size: 1.7rem; font-weight: 800; line-height: 1.6rem; margin: 0 0 1em; text-transform: uppercase;} h5 { font-size: 1.4rem; font-weight: 400; line-height: 1.6rem; margin: 0 0 1rem; text-transform: uppercase;} h6 { font-size: 1rem; line-height: 1.2rem; margin: 0 0 1rem; text-transform: uppercase;} strong, b { font-weight:700;} em, i { font-style:italic;} u { text-decoration: none; text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff; background: rgb(255, 255, 255); background: -moz-linear-gradient(180deg, rgb(255, 255, 255) 84%, rgb(0, 0, 0) 88%, rgb(255, 255, 255) 90%); background: -webkit-linear-gradient(180deg, rgb(255, 255, 255) 84%, rgb(0, 0, 0) 88%, rgb(255, 255, 255) 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.84, rgb(255, 255, 255)), color-stop(0.88, rgb(0, 0, 0)), color-stop(0.90, rgb(255, 255, 255))); background: -o-linear-gradient(180deg, rgb(255, 255, 255) 70%, rgb(0, 0, 0) 72%, rgb(255, 255, 255) 74%); background: linear-gradient(180deg, rgb(255, 255, 255) 84%, rgb(0, 0, 0) 88%, rgb(255, 255, 255) 90%); } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1rem; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } small { font-size: 0.75rem; } big { font-size: 1.25rem; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } p { margin:0 0 1.5rem 0;} ul, ol { margin:0.6rem 0 0.6rem 1.5rem;} li { margin:0 0 0.6rem 0;} dl dt { background-color: #222222; clear: both; color: #ffffff; font-weight: 600; margin: 0 2rem 0.4em 1.4rem; padding: 0 1rem;} dl dd { border-bottom: 1px solid; font-style: italic; margin: 0 2rem 2rem 1.4rem; padding: 0 1rem 0.6rem; word-spacing: 3px;} blockquote:after{ color: #7a7a7a; content: "“"; display: block; font-family: Georgia; font-size: 6rem; left: -4rem; position: absolute; top: 2rem;} blockquote { border-left: 2px solid #aaa; font-size: 1.2rem; font-style: italic; font-weight: 100; line-height: 1.3em; margin: 1rem 2rem 1rem 4.2rem; padding: 0rem 1rem; position: relative;} blockquote:before { color: #ddd; content: "“"; display: block; font-family: Georgia; font-size: 6rem; font-weight: 900; left: -4rem; position: absolute; top: 2.1rem;} blockquote.quote { color: #666; display: block; font-size: 1rem; font-style: normal; font-weight: 700; margin: 1rem 0 0; padding: 0 0 0 1.6rem; position: relative; width: 100%;} blockquote.quote:after { color: #666; content: "*"; display: block; font-family: Georgia; font-size: 2.6rem; left: 0; position: absolute; top: 0.39rem;} /*--- BUTTONS a.button{ border-radius: 5px; display: inline-block; font-weight: 400; height: 32px; font-size: 0.9em; zoom:1; text-decoration:none; min-width: 150px; padding: 10px 0 0; text-align: center; text-transform: uppercase; width: auto;} button { border: 0 none; border-radius: 5px; box-sizing: border-box; display: inline-block; font-size: 0.9em; font-weight: 100; height: 42px; margin: 0; zoom:1; min-width: 150px; padding: 10px 0 12px; text-align: center; text-transform: uppercase; width: auto; cursor:pointer;} input[type="button"], input[type="submit"], input[type="reset"] { border: 0 none; border-radius: 5px; box-sizing: border-box; display: inline-block; zoom:1; font-size: 0.9em; font-weight: 100; height: 38px; margin: 1.2em 10px; min-width: 150px; padding: 8px 0 8px; text-align: center; text-transform: uppercase; width: auto; cursor:pointer;} a.button-small{ border-radius: 5px; display: inline-block; font-weight: 100; height: 24px; zoom:1; min-width: 100px; padding: 4px 1rem 0; text-align: center; text-transform: uppercase; width: auto; letter-spacing: normal; font-size:0.75rem;} button.small { border: 0 none; border-radius: 5px; box-sizing: border-box; display: inline-block; font-size: 0.75rem; font-weight: 100; height: 28px; margin: 0; zoom:1; min-width: 100px; padding: 6px 1rem 5px; text-align: center; text-transform: uppercase; width: auto; cursor:pointer;} input[type="button"].small, input[type="submit"].small, input[type="reset"].small { border: 0 none; border-radius: 5px; box-sizing: border-box; display: inline-block; zoom:1; font-size: 0.75rem; font-weight: 100; height: 28px; margin: 0; min-width: 100px; padding: 6px 1rem 5px; text-align: center; text-transform: uppercase; width: auto; cursor:pointer;} a.button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {} --*/ /*--- Tables ---*/ table { border-collapse: collapse; border-spacing: 0; } table.full { width:100%;} table th, table td { padding:3px 6px;} thead th, tfoot th { font-weight: 200; text-align: left; text-transform: uppercase;} tr {} td {} table tr td:nth-child(even) { background:none;} table tbody tr:nth-child(even) td { background:none;} tr:hover td { background:#333 !important; color:#eee;} /*--- Forms---*/ legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; } input, select, textarea { margin: 0; vertical-align: baseline; *vertical-align: middle; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 1.0833%; *width: 1.0833%; } textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } .quickform { margin: 10em 0 6em; text-align: center;} #quickform { display: inline-block; height: auto; margin: 0 auto; padding: 0 20px; width: auto;} .quickmes { background: #212121; border-color: #333; border-image: none; border-radius: 8px; border-style: none none solid; border-width: 0 0 1px; color: #aaa; height: 46px; float:left; margin: 0 18px 0 18px; padding: 0 0 0 18px; -moz-transform: skew(-18deg); -o-transform: skew(-18deg); -webkit-transform: skew(-18deg); transform: skew(-18deg); width: 350px;} .quickmes:hover { background:#333; color:#eee;} .submit { float:left; border:none 0px; border-radius: 8px; background: #212121; color: #aaa; display: block; height: 46px; -moz-transform: skew(-18deg); -o-transform: skew(-18deg); -webkit-transform: skew(-18deg); transform: skew(-18deg); width: 46px; cursor:pointer; font-size: 1.429em; font-weight: 500; *zoom: 1;} .submit:hover { background:#38646b; color:#c9c9c9;} .form { text-align:center;} input.fullmes { background: #212121; border-color: #333; border-image: none; border-radius: 8px; border-style: none none solid; border-width: 0 0 1px; color: #aaa; height: 46px; margin: 5px 18px; padding: 0 0 0 18px; width: 350px;} input.fullmes:hover { background:#333; color:#eee;} textarea.fullmes { background: #212121; border-color: #333; border-image: none; border-radius: 8px; border-style: none none solid; border-width: 0 0 1px; color: #aaa; height: auto; margin: 5px 18px; padding: 0 0 0 18px; width: 350px;} textarea.fullmes:hover { background:#333; color:#eee;} .fullsubmit { border:none 0px; border-radius: 8px; background: #212121; color: #aaa; display: block; height: 46px; width: 100px; cursor:pointer; margin:5px auto; font-size: 1.429em; font-weight: 500; *zoom: 1;} .fullsubmit:hover { background:#38646b; color:#c9c9c9;} /*--- Grid ---*/ .grid-block { height:auto; overflow:hidden; margin:0 auto; width:100%; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col15, .col45 { float:left; box-sizing:border-box; padding:10px;} .col12 { width:100%;} .col11 { width:91.6666%;} .col10 { width:83.3333%;} .col9 { width:75%;} .col8 { width:66.6666%;} .col7 { width:58.3333%;} .col6 { width:50%;} .col5 { width:41.6666%;} .col4 { width:33.3333%;} .col3 { width:25%;} .col2 { width:16.6666%;} .col1 { width:8.3333%;} .col3m { width:25%; float: left; margin:0;} .col6m { width:50%; float:right;} /*Custom styles*/ #logo { display:block; width:70px; float:left; height:47px; margin:0;} .lgrey-svg path { fill: #eee;} .grey-svg path { fill: #8a8a8a;} .menu { padding:0; margin:0; float:right;} .menu a { font-weight:3; letter-spacing:1px; text-decoration: none; font-size:12px; text-transform:uppercase;} .menu li { list-style:none; padding:0 20px 0 0; margin:0; float:left; width: auto; } .menu li:last-child { list-style:none; padding:0; margin:0; float:left; width: auto; } .social a { text-decoration:none; padding:0 5px 5px 0; display:inline-block;} .social a:hover svg path { fill:#cf8143;} .mod-languages { font-size:0.714em; font-weight:400; padding:4px 0 0; text-align:center;} .logo { float:left; margin:-10px 0 0;} .lang { float:right; display:inline-block; padding: 0 20px 0 0} .mod-languages ul { margin:0; padding:0; list-style:none;} .mod-languages li { float:left; width:30px; padding:0 0 0 5px; margin:0;} .mod-languages li:first-child { border-right: 1px dotted #4d4d4d; padding:0 10px 0 0;} .mod-languages li:last-child { padding:0 5px 0 0;} .mod-languages a { text-decoration:none;} .mod-languages a:hover { color:#fff;} .lang-active a { font-weight:900; color: #bebebe;} #YPorto { margin:0 auto; display:block; overflow:hidden; } #wrap { margin:0 auto; display:block; } .Yline { overflow:hidden; width:98%; position: relative; height:410px; margin:20px auto; border:solid #333; border-width:0 1px; padding:0 20px 0 20px ;} .Yline svg { display:block; margin:0 auto 10px;} .Yline #wrap { display:block; position:relative; width:1100px; height:440px; left:0;} .Yline .item-type { color: #555; font-size: 11px; font-weight: 100; letter-spacing: 1px; position: relative; text-transform: uppercase;} .Yline .item-name { position:relative; margin:-20px 0 0; color:#ccc; font-size:0.769em; font-weight:500; text-transform:uppercase; text-decoration:none;} .Ylist { width: auto; display:inline-block; position: relative; height: auto; margin:20px auto; padding:0 0 0 20px;} .Ylist #wrap { display:block; margin:0 auto; width:100%; height:auto;} .prt { text-align:center;} .slide .item-name { background: #1c1c1c none repeat scroll 0 0; color: #eee; display: block; margin: -27px 0 8px; opacity: 0.8; padding: 5px 20px 5px 0; text-align: center; position: relative; font-weight:500; text-decoration:none; z-index: 60;} .slide { float:left; width:250px; height:350px; background-repeat:no-repeat; background-position:center center; color:#FFF; font-weight:700; } .Yline .slide { margin-right:20px;} .Ylist .slide { margin:0 0 0 0;} .reload { position:relative; top:0; left:0;} .item-img a { position:relative; width:100%; height:100%; display:block;} .item-img a span { opacity:1; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(17,17,17,0.6) 99%, rgba(17,17,17,0.6) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(17,17,17,0.6) 99%,rgba(17,17,17,0.6) 100%); background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(17,17,17,0.6) 99%,rgba(17,17,17,0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#66111111',GradientType=1 ); position:absolute; width:100%; height:100%; left:0; top:0; z-index:150; } .slide .item-img { width:250px; height:350px; overflow:hidden; display:block; } .slide img { display:block; width:100%; height:auto;} .porto-intro { border-bottom:1px solid #222; margin:0 12.5% 2em 0; height:26px; } .fporto { color: #5a5c5c; font-size: 1.714em; line-height:0.9em; font-weight: 300; margin: 0; width: auto; display:inline-block; text-transform: uppercase;} .porto-link { margin: 4px 0 0; float:right;} .porto-link a { color:#2f9faf; font-size: 1em; font-weight: 300; letter-spacing: 1px; text-decoration: none; text-transform: uppercase;} .porto-link a:hover { color:#eee;} .intro { margin: 5em 0 6em;} .intro-me { display:inline-block; width:100%; height:auto; float:left;} .intro-me h2 { color: #9b5a26; font-family: "raleway"; font-size: 1.692em; font-weight: 300; line-height: 1.1em; margin: 0 0 1rem; text-transform: uppercase;} .intro-me h4 { color: #ccc; font-family: "raleway"; font-size: 1em; font-weight: 600; line-height: 1.4em; margin: 0 0 1rem 0; text-transform: uppercase;} .intro-me p { color: #838383; font-family: "raleway"; font-size: 1em; font-weight: 300; line-height: 1.4em; margin: 0 0 1rem 0;} .featured-items { overflow:hidden; width:100%; margin:0 auto;} .porto-prev a { color: #666; font-size: 0.7em; font-weight: 500; text-align: center; text-decoration: none; text-transform: uppercase;} .porto-prev a:hover { color:#2f9faf;} .porto-prev img { display:block; width:100%; height:auto;} .fitem-img { position:relative;} .fitem-img span { opacity:1; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(17,17,17,0.6) 99%, rgba(17,17,17,0.6) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(17,17,17,0.6) 99%,rgba(17,17,17,0.6) 100%); background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(17,17,17,0.6) 99%,rgba(17,17,17,0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#66111111',GradientType=1 ); position:absolute; width:100%; height:100%; left:0; top:0; } .fitem-img:hover span { opacity:0;} .fitem-title { margin:10px 0 0 0;} .quickform h4, .soch { font-size:1.385em; font-weight:300; color:#aaa; } .quickform p { color:#404040;} .logo, .lang { position:relative; z-index:60;} .mobile-menu { display:none;} .social{ float:left;} .tmenu { overflow:hidden;} .porto h1, .porto-item { text-align:center; color:#995e0a; font-weight:300; text-transform:uppercase; font-size:2.769em; letter-spacing:1px;} .prt-controls { display:block; width:64px; margin:0 auto; height:50px;} .prt-type { color:#eee; text-transform:uppercase; text-decoration:none;} .selectview { float:left;} #Yline { background:url("../img/menu-sprite.svg") no-repeat; background-size:20px auto; background-position:left -115px; display:block; width:32px; height:23px; padding:0 10px 0 0; border-right: 1px dotted #4d4d4d;} #Yline:hover { background-position:left -138px;} #Ylist { background:url("../img/menu-sprite.svg") no-repeat; background-size:20px auto; background-position:left -70px; display:block; width:22px; height:23px; margin:0 0 0 10px;} #Ylist:hover { background-position:left -93px;} .prt-type#Yline { background-position:left -138px;} .prt-type#Yline:hover { background-position:left -115px;} .prt-type#Ylist { background-position:left -93px;} .prt-type#Ylist:hover { background-position:left -70px;} .modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; opacity:0; display:block; z-index:100; background:#1c1c1c;} .modal-win { background: url("../img/bg.jpg") repeat scroll 0 0; border: 3px solid #666; display: block; opacity: 1; position: relative; text-align: center; z-index: 101;} .close-modal { float: right; font-size: 1em; font-weight: 900; padding: 0 1em 1em 0; text-align: right; text-transform: uppercase; clear:both; cursor:pointer;} .close-modal:hover { color:#ccc;} .modal-message { margin: 2em 0; opacity: 1; z-index: 101; } .porto-imagex12 { display:block; width:100%; max-width:1200px; height:auto;} .porto-image { display:block; width: auto; height:auto; margin:0 auto; text-align:center; max-width:900px;} .porto-imagex6 { display:block; margin:0 auto; width:100%; max-width:460px; margin: 0 auto; box-sizing: border-box; border:5px solid #1c1c1c; height:auto;} .porto-imagex7 { display:block; margin:0 auto; width:100%; max-width:700px; margin: 0 auto; box-sizing: border-box; border:5px solid #1c1c1c; height:auto;} .porto-imagex600 { display:block; margin:0 auto; width:100%; max-width:600px; margin: 0 auto; box-sizing: border-box; border:5px solid #1c1c1c; height:auto;} .porto-text { color: #777; font-size: 1em; font-weight: 200; text-align:center; margin: 2em auto 1.2rem; text-shadow: 1px 1px 0 #1c1c1c; text-transform: uppercase; clear:both; width:100%; } .porto-image img, .porto-imagex6 img, .porto-imagex12 img, .porto-imagex7 img { width: 100%; height:auto; display:block; border:10px solid #222; box-sizing: content-box; margin:0 auto;} .porto-imagex600 img { width: auto; height:auto; display:block; border:5px solid #222; box-sizing: content-box; margin:0 auto; } .pagenav { display: inline-block; width:100%; padding:0; margin:0; list-style:none;} .previous { width:40%; float:left; padding:0; margin:0; text-align:left;} .next { width:40%; float:right; padding:0; margin:0; text-align:right;} .parcat { display:block; margin:0 0 1em; width:100%; text-align:center;} .next, .previous { width:48%; margin:-42px 0 0 0;} .parcat, .next a, .previous a { text-decoration:none; text-transform:uppercase; font-size:1em;} .cont-tel { color: #aaa; display: block; font-size: 2em; height:70px; vertical-align: middle; margin:0 0 20px 0; } .cont-tel svg { float:left; } .cont-tel > span { float: left; margin: 19px 0 0 10px; } .cont-skype { color: #aaa; display: block; font-size: 2em; height:70px; vertical-align: middle; } .cont-skype svg { float: left; margin: 10px 0 0 14px; } .cont-skype > span { float: left; margin: 15px 0 0 24px; } .cont-tel svg path, .cont-skype svg path{ fill:#444; } .articlebody { border-top: 1px solid #222; border-bottom: 1px solid #222; padding:40px 0; margin:0 0 40px 0; overflow:hidden;} .gototop { display: inline-block; margin:-18px 0 20px; height:auto; text-decoration:none; cursor:pointer; } .gototop svg { display:block; width:40px; height:auto;} .socicon { display: inline-block; margin:10px 20px 0 0; text-decoration:none;} .socicon svg { display:block; width:40px; height:auto;} .socicon:hover svg path, .gototop:hover svg path{ fill:#C60;} .socialblc { text-align:center; border-bottom:1px solid #222; padding:0 0 40px 0; display:block; margin:-40px 0 0 0;} .prof-intro { display:block; width:50%; float:right; box-sizing:border-box; padding:10px;} .prof-more { display:block; width:auto; max-width:60%; font-size:1.2em; font-weight:200; line-height:1.6em; margin:0 auto 5em auto;} .prof-skill { width:50%; height:auto; border-right:1px dotted #444; box-sizing:border-box; padding:0 0 30px 0; font-weight:400; text-align:left; float:left;} .prof-tool { width:50%; height:auto; box-sizing:border-box; padding:0 0 0 30px; float:left; font-weight:200; text-align:left;} .cv { display: block; margin: 40px auto 0; text-align: center; text-transform: uppercase; width: 300px;} @media screen and (max-width: 620px){ .prof-more { max-width:94%; font-size:1.2em; font-weight:200; line-height:1.4em; margin:0 auto 3em auto;} .sl-warp { font-size: 1em;} } @media screen and (max-width: 900px) { .porto-image { display:block; width:100%; box-sizing: border-box; border:10px solid #222; max-width:920px; height:auto; margin:0 auto;} .parcat, .next a, .previous a { font-size:0.8em;} .next, .previous { width:48%; margin:0;} h1 { line-height:1em; margin:0 0 0.5em 0} .porto-image img, .porto-imagex6 img, .porto-imagex12 img { width:100%; height:auto; display:block; border:none 0px;} } @media screen and (min-width: 860px) and (max-width: 1100px) { .social{ width:61px; padding:0 0 10px 10px; } } @media screen and (max-width:880px) { .modal-win { width:70%;} .smenu{ background: url("../img/bg.jpg") repeat; float: left; height: auto; padding: 70px 0 19px; position: absolute; width: 100%; z-index: 50; top:-1000px; } .social { padding:14px 0 0 10px;} .social a { display: block; padding: 0 5px 7px 24px; text-decoration: none; } .menu li { float: right; list-style: outside none none; margin: 0; padding: 0 20px 10px 0; text-align: right; width: 100%; } .menu li:last-child { float: right; list-style: outside none none; margin: 0; padding: 0 20px 0 0; text-align: right; } .mobile-menu{ background:url("../img/menu-sprite.svg") no-repeat; background-size:28px auto; background-position:right top; display: inline-block; height: 20px; width:auto; color:#5fc1d0; font-size:12px; margin: 6px 10px 0 0; padding: 5px 34px 0 0; text-decoration: none; position:relative; z-index:60; text-transform: uppercase; cursor:pointer; } .mobile-menu:hover{ background-position:right -24px; color:#fff; } .mm-open{ background:url("../img/menu-sprite.svg") no-repeat; background-size:28px auto; background-position:right -75px; color: #fff; } .mm-open:hover{ background-position:right -50px; color:#5fc1d0; } } @media screen and (max-width: 1004px) { .featured-items .porto-prev a { max-width: 300px; display:block; } .fitem-title { background: #1c1c1c none repeat scroll 0 0; color: #eee; display: block; margin: -30px 0 8px; opacity: 0.8; padding: 5px 0; position: relative; z-index: 60; } .porto-intro { border-bottom: 1px solid #222; float: none; height: 26px; margin: 0 auto 4em;} .fporto { color: #5a5c5c; display: block; font-size: 1.714em; font-weight: 700; line-height: 0.8em; margin: 0 auto; text-align:center; text-transform: uppercase; width: auto; } .porto-link { float: none; margin: 16px auto 0; text-align: center; } .Yline { width:98%;} .cont-tel { margin:0 auto 20px auto; width:280px; font-size:1.4em;} .cont-skype { margin:0 auto; width:280px; font-size:1.4em;} #fullform { display: inline-block; margin: 0 auto; width: auto; text-align:center;} } @media screen and (max-width: 320px) { .tel-col12 { width:100%;} .tel-col6 { width:50%;} .tel-col4 { width:33.3333%;} .tel-col3 { width:25%;} .tel-col8 { width:66.6666%;} .tel-col7 { width:75%;} } @media screen and (min-width: 320px) and (max-width: 500px) { .smart-col12 { width:100%;} .smart-col10 { width:83.3333%;} .smart-col6 { width:50%;} .smart-col4 { width:33.3333%;} .smart-col3 { width:25%;} .smart-col8 { width:66.6666%;} .smart-col7 { width:75%;} .porto { background:url(../img/500/fbg.jpg) no-repeat center top; } .featured-items .porto-prev a { margin:0 auto; } .lang { float:right; display:inline-block; padding: 0} .quickmes { margin: 0 10px 0 5px; padding: 0 0 0 5px; width: 200px;} input.fullmes { width: 250px;} textarea.fullmes { width: 250px;} .modal-win { width:90%;} } @media screen and (min-width: 500px) and (max-width: 600px) { .porto { background:url(../img/600/fbg.jpg) no-repeat center top; } } @media screen and (min-width: 600px) and (max-width: 900px) { .porto { background:url(../img/800/fbg.jpg) no-repeat center top; } } @media screen and (min-width: 900px) and (max-width: 1100px) { .porto { background:url(../img/1000/fbg.jpg) no-repeat center top; } } @media screen and (min-width: 500px) and (max-width: 1004px) { .tablet-col12 { width:100%;} .tablet-col10 { width:83.3333%;} .tablet-col6 { width:50%;} .tablet-col4 { width:33.3333%;} .tablet-col3 { width:25%;} .tablet-col8 { width:66.6666%;} .tablet-col7 { width:75%;} .featured-items .porto-prev:nth-child(odd) a { max-width: 300px; float:right; } .featured-items .porto-prev:nth-child(even) a { max-width: 300px; float:left; } .lang { float:right; display:inline-block; padding: 0} } @media screen and (min-width: 1004px) and (max-width: 2000px) { #main { max-width:1300px; } } @media screen and (min-width: 1440px) and (max-width: 2000px) { .porto { background:url(../img/1920/fbg.jpg) no-repeat center top; } } @media screen and (min-width: 1000px) and (max-width: 1800px) { .porto { background-size:cover; } } /*--- Aligment ---*/ .right { float:right;} .left { float:left; } .center { float:none; margin:0 auto; clear:both;} .txt-left { text-align:left} .txt-right { text-align:right} .txt-center { text-align:center;} /*--- COLORS ---*/ .block-white { background-color:#ffffff; padding:1rem; margin:0 0 1rem 0; } .block-white:last-child { margin:0; } .bg-white { background-color:#ffffff;} .bg-dark { background-color:#222222;} .txt-white { color:#ffffff;} .txt-dark { color:#333333;} .txt-blue { color:#175a8f;} .brd-white { border-color:#ffffff;} .brd-dark { border-color:#333333;} .btn-white { background-color:#ffffff; color:#333333;} .btn-white:hover {} .btn-dark { background-color:#333333; color:#ffffff;} .btn-dark:hover {} .btn-green { background-color:#289b28; color:#ffffff;} .btn-green:hover { background-color:#12c512; } .btn-blue { background-color:#3b6f9a; color:#ffffff;} .btn-blue:hover { background-color:#3384c6; } .btn-red { background-color:#d82e22; color:#ffffff;} .btn-red:hover { background-color:#c0170b; } .btn-orange { background-color:#fb9120; color:#ffffff;} .btn-orange:hover { background-color:#ffba00; } .link-white {} .link-white:hover {} .link-dark {} .link-dark:hover {} /* SLIDER*/ .svt { margin:1em auto 0; width:70%; padding:0; background: none; overflow:hidden; height: auto; position:relative; text-align:center;} .slides { overflow:hidden; width:70%; height:200px; display:block; margin:0;} .sl-warp { box-sizing: border-box; display: block; font-size: 1.2em; font-weight: 100; padding: 50px 20px 20px;} .hd-tab { width:25%; padding:10px 1%; position:relative; height:3em; text-transform:uppercase; margin:0; vertical-align:top; display: inline-block; color:#FFF; font-size:1em; font-weight:300; text-align:center; cursor:pointer;} div.activesl:before{ content:"\A"; border-style: solid; border-width: 20px 20px 0 20px; border-color: #2f9faf transparent transparent; position: absolute; bottom: -20px; left:34%; z-index:22;} .hd-tab:hover, div.activesl { background-color:#2f9faf;} .acc-tab { display:none; } .cnt-tab { position:absolute; display:block; width:100%; height:100%; background:rgba(28, 28, 28, 0.5)} .active-svt-tab {} @media screen and (max-width: 800px){ .slides { height:280px;} .hd-tab { width:30%; padding:5px 1%; height:3em; font-size:0.9em; line-height:130%;} } @media screen and (max-width: 600px) { .svt { margin:1em auto 0; width:94%; padding:10px 0; overflow:hidden; height: auto; position:relative;} .slides { overflow:hidden; width:100%; height:auto; display:block; background: none; margin:00;} .hd-tab { display: none;} .acc-tab { width:97%; padding:1.5%; float:left; height:auto; text-align:center; display: block; color:#FFF; font-size:1em; text-transform:uppercase; margin:5px 0; background:#999; font-weight:300; text-align:center; position:relative; cursor:pointer; } .acc-tab:hover, div.activesl { background-color:#2f9faf; } div.activesl{ border:0px; width:97%;} div.activesl:before{ content:"\A"; border-style: solid; border-width: 20px 20px 0 20px; border-color: #2f9faf transparent transparent; position: absolute; bottom: -20px; left:44%; z-index:22;} .cnt-tab { position: inherit; display:block; overflow:hidden; width:96%; float:left; padding:0 1%; height:0; } .active-svt-tab { height:auto; } /* SLIDER END */