a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:after, blockquote:before, q:after, q:before { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } @font-face { font-family: Helvetica Neue; src: url('/include/fonts/HelveticaNeueLTPro-Roman.otf'); } @font-face { font-family: Helvetica Neue; src: url('/include/fonts/HelveticaNeue-Medium.otf'); } header { width: 100%; overflow: hidden; background: url("/img/?cat=site&file=header.png") no-repeat; background-size: 100% 375Px; background-position: right; height: 375Px; } header .content { margin-top: 60px; } header .content .left { display: inline-block; margin-left: 100px; } header .content .left h1 { font-family: Lato; font-size: 30px; } header .content .left h2 { font-family: Lato; font-size: 24px; } header .content nav { float: right; margin-right: 30px; display: inline-block; vertical-align: top; } header .content nav a { font-family: Lato; font-size: 22px; font-weight: bold; margin: 0px 20px; line-height: 41px; vertical-align: top; color: black; text-decoration: none; transition-duration: 0.3s; } header .content nav a:hover { color: #424242; } header .content nav .social { vertical-align: top; display: inline-block; } header .content nav .social a { margin: 0px 30px; position: relative; } header .content nav .social a img { position: absolute; top: 50%; transform: translateY(-50%); } header .content nav .bar { display: inline-block; height: 41px; width: 2px; background-color: black; } @media screen and (min-width: 0px) and (max-width: 1200px) { header .content .left { margin-left: 40px; } header .content nav { margin-right: 40px; } } @media screen and (min-width: 0px) and (max-width: 1040px) { header { margin-bottom: 100px; background-color: #c4c3c3; background-image: none; height: 150px; } header .content { top: 50%; margin-top: 0px; position: relative; transform: translateY(-50%); } header .burger_button { position: absolute; display: none; cursor: pointer; right: 20px; top: 50%; transform: translateY(-50%); } header .burger_button .bar1, header .burger_button .bar2, header .burger_button .bar3 { width: 35px; height: 5px; background-color: black; margin: 6px 0; transition: 0.4s; } header .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } header .change .bar2 { opacity: 0; } header .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } } @media screen and (min-width: 0px) and (max-width: 945px) { header { overflow: visible; position: relative; } header .burger_button { display: block; } header .content nav { z-index: 40000; display: none; position: absolute; background-color: #989898; top: 100px; right: 0px; margin-right: 0px; width: 100%; } header .content nav .bar { display: none; } header .content nav .social { margin-right: 20px; text-align: right; margin-top: 20px; order: 1; display: block; } header .content nav .social a { margin: 0px 5px; display: inline-block; } header .content nav .social a img { position: static; top: 0px; transform: none; } header .content nav .order:nth-of-type(1) { order: 2; } header .content nav .order:nth-of-type(2) { order: 3; } header .content nav .order:nth-of-type(3) { order: 4; margin-bottom: 30px; } header .content nav .order { text-align: center; line-height: 50px; color: white; } header .content nav a { display: block; } } footer { font-family: lato; font-size: 20px; background: url("/img/?cat=site&file=footer.png") no-repeat; background-size: 648px 505px; background-position: right bottom; height: 505px; overflow: hidden; } footer a { text-decoration: none; color: black; } footer a:hover { text-decoration: underline; } footer span:first-of-type { margin-top: 400px; } footer span { display: block; text-align: center; } .main #mainblock { font-family: lato; text-align: center; } .main #mainblock a { text-decoration: none; } .main #mainblock .block { margin: 10px; display: inline-block; } .main #mainblock .block img { height: 460px; width: 300px; object-fit: cover; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); z-index: -1; position: relative; } .main #mainblock .block h3 { color: #434242; text-align: left; font-size: 25px; margin-bottom: 22px; } .main #mainblock .block h4 { color: #434242; font-size: 18px; } .main #mainblock .block:hover img { filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; } @media screen and (min-width: 0px) and (max-width: 1374px) { .main #mainblock .block { margin: 20px; } } @media screen and (min-width: 0px) and (max-width: 560px) { .main #mainblock .block img { width: 300px; height: 400px; } .main #mainblock a:nth-of-type(2) .block img { width: 300px; } .main #mainblock .block { width: 300px; } } .about h1 { font-family: Lato; font-size: 32px; display: inline-block; vertical-align: top; } .about .content { z-index: -1; width: 1500px; margin: 0px auto; } .about #elemgraph { position: absolute; left: 0px; height: 1025px; } .about .block { display: inline-block; border-left: 1px solid #707070; margin-left: 30px; padding-left: 100px; } .about .block h4 { display: block; font-family: Lato; font-size: 34px; color: #6c6a6a; background-color: white; margin-top: -20px; line-height: 90px; margin-bottom: 15px; } .about .block img { display: block; height: 410px; width: 410px; object-fit: cover; object-position: 70% 50%; border-radius: 50%; position: relative; z-index: -1; } .about .block p { width: 1090px; color: #939191; font-family: Lato; font-size: 22px; text-align: justify; } @media screen and (min-width: 0px) and (max-width: 1600px) { .about .content { width: 1100px; } .about #elemgraph { top: 400px; height: 800px; } .about .block img { width: 300px; height: 300px; } .about .block h4 { font-size: 24px; } .about .block p { font-size: 16px; width: 800px; } } @media screen and (min-width: 0px) and (max-width: 1190px) { .about .content { width: 100%; } .about .content h1 { margin-left: 50px; } .about .content .block { width: calc(100% - 400px); } .about .content .block p { width: 100%; } } @media screen and (min-width: 0px) and (max-width: 1050px) { .about #elemgraph { display: none; } } @media screen and (min-width: 0px) and (max-width: 700px) { .about .content { position: relative; padding-top: 60px; } .about .content h1 { z-index: -1; margin-left: 15px; padding: 10px; padding-top: 0px; position: absolute; top: -50px; display: block; border-right: 1px solid #707070; border-bottom: 1px solid #707070; } .about .content .block { border: 0px; width: calc(100% - 50px); display: block; margin: 0px auto; padding-left: 0px; } } .contact h1 { font-family: Lato; font-size: 32px; display: inline-block; vertical-align: top; } .contact .content { width: 1500px; margin: 0px auto; } .contact #elemgraph { position: absolute; left: 0px; height: 1025px; } .contact .block { display: inline-block; border-left: 1px solid #707070; margin-left: 30px; padding-left: 100px; } .contact .block img { display: block; height: 410px; width: 410px; object-fit: cover; object-position: 70% 50%; border-radius: 50%; position: relative; z-index: -1; } .contact .block .form { background-color: white; padding-top: 80px; margin-top: -20px; } .contact .block .form .infos_block { vertical-align: top; display: inline-block; text-align: right; border-right: 2px solid #707070; padding-right: 70px; } .contact .block .form .infos_block span { color: #6c6a6a; font-family: Lato; font-size: 22px; display: block; line-height: 60px; } .contact .block .form form { margin-left: 70px; width: 700px; display: inline-block; } .contact .block .form form .form_success { color: #065237; margin-bottom: 10px; display: block; } .contact .block .form form .form_error { color: #d11414; margin-bottom: 10px; display: block; } .contact .block .form form .error { border-top: 1px solid #d11414; } .contact .block .form form input { width: 310px; height: 43px; display: block; margin-bottom: 40px; } .contact .block .form form input:nth-of-type(1) { display: inline-block; } .contact .block .form form input:nth-of-type(2) { display: inline-block; float: right; } .contact .block .form form input, .contact .block .form form textarea { background-color: #fdfafa; border: 0px; border-top: 1px solid #707070; font-family: Lato; font-size: 22px; } .contact .block .form form textarea { width: 100%; height: 80px; } .contact .block .form form ::-webkit-input-placeholder { padding-left: 15px; padding-top: 10px; } .contact .block .form form :-ms-input-placeholder { padding-left: 15px; padding-top: 10px; } .contact .block .form form ::placeholder { padding-left: 15px; padding-top: 10px; } .contact .block .form form button { float: right; margin-top: 30px; background-color: white; border: 1px solid #707070; border-radius: 20px; padding: 5px 0px; width: 250px; font-family: Lato; font-size: 22px; cursor: pointer; } .contact .block .form form button:hover { border: 1px solid #3b3b3b; } @media screen and (min-width: 0px) and (max-width: 1600px) { .contact .content { width: 1100px; } .contact #elemgraph { display: none; } .contact .block img { width: 300px; height: 300px; } .contact .block h4 { font-size: 24px; } .contact .block p { font-size: 16px; width: 800px; } } @media screen and (min-width: 0px) and (max-width: 1700px) { .contact .content { position: relative; padding-top: 60px; } .contact .content h1 { z-index: -1; margin-left: 15px; padding: 10px; padding-top: 0px; position: absolute; top: -50px; display: block; border-right: 1px solid #707070; border-bottom: 1px solid #707070; } .contact .content .block { border: 0px; width: 1080px; display: block; margin: 0px auto; padding-left: 0px; } .contact .content .block .form form { overflow: hidden; } } @media screen and (min-width: 0px) and (max-width: 1180px) { .contact .block img { margin-left: 15px; } .contact .block .form .infos_block { display: block; border-bottom: 2px solid #707070; border-right: 0px; margin-bottom: 40px; text-align: center; padding-right: 0px; } .contact .block .form form { display: block; margin-left: 0px; margin: 0px auto; } .contact .content { width: 100%; } .contact .content .block { width: 100%; } } @media screen and (min-width: 0px) and (max-width: 765px) { .contact .block .form form { width: calc(100% - 20px); } .contact .block .form form input:nth-of-type(1) { display: block; } .contact .block .form form input:nth-of-type(2) { display: block; float: none; } .contact .block .form form input { width: 100%; } } .portfolio { max-width: 2000px; margin: 0px auto; } .portfolio nav { display: inline-block; overflow: hidden; width: 200px; margin-left: 70px; text-align: right; min-height: 700px; border-right: 1px solid #707070; padding-right: 40px; } .portfolio nav h4 { font-family: Lato; font-size: 22px; font-weight: bold; color: #434242; margin-bottom: 20px; margin-top: 30px; } .portfolio nav a { display: block; line-height: 24px; font-family: Lato; font-size: 18px; color: #939191; text-decoration: none; margin-bottom: 15px; } .portfolio nav a:last-of-type { margin-bottom: 40px; } .portfolio nav a.select { color: #4b4b4b; } .portfolio .page_view { display: inline-block; vertical-align: top; width: calc(100% - 320px); } .portfolio .page_view p { margin: 0px auto; margin-top: 100px; text-align: justify; font-family: Lato; font-size: 22px; color: #939191; width: 810px; } .portfolio .page_view .project_desc { width: 1250px; margin-bottom: 40px; } .portfolio .page_view .img_block { position: relative; margin: 0px auto; width: 1270px; } .portfolio .page_view .img_block img { display: block; width: 300px; height: auto; object-fit: cover; margin-bottom: 10px; vertical-align: top; float: left; } .portfolio .page_view .navigable img { cursor: pointer; } .portfolio .page_view .navigable #img_shower { z-index: 30000; display: none; position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.9); } .portfolio .page_view .navigable #img_shower .prev, .portfolio .page_view .navigable #img_shower .next { cursor: pointer; position: fixed; top: 50%; transform: translateY(-50%); width: auto; padding: 16px; color: white; font-weight: bold; font-size: 50px; transition: 0.6s ease; } .portfolio .page_view .navigable #img_shower .prev:hover, .portfolio .page_view .navigable #img_shower .next:hover { color: rgba(0, 0, 0, 0.7); } .portfolio .page_view .navigable #img_shower .next { right: 30px; } .portfolio .page_view .navigable #img_shower .prev { left: 30px; } .portfolio .page_view .navigable #img_shower img { width: auto; height: auto; max-width: calc(100% - 220px); max-height: calc(100% - 50px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .portfolio .page_view #plus { width: 52px; height: 52px; display: block; margin: 0px auto; margin-top: 20px; cursor: pointer; transition-duration: 0.5s; } .portfolio .page_view #plus:hover { transform: rotate(90deg); } @media screen and (min-width: 0px) and (max-width: 1360px) { .portfolio nav { margin-left: 0px; width: 180px; } .portfolio .page_view { width: calc(100% - 250px); margin-left: 10px; } } @media screen and (min-width: 0px) and (max-width: 1070px) { .portfolio .slider { width: 100%; } .portfolio .page_view p { width: 100%; } } @media screen and (min-width: 0px) and (max-width: 600px) { .portfolio nav { display: block; min-height: 0px; border: 0px; margin-bottom: 30px; } .portfolio .page_view { display: block; width: calc(100% - 25px); margin: 0px auto; } } @media screen and (min-width: 0px) and (max-width: 1730px) { .portfolio .page_view .img_block { width: 100%; } .portfolio .page_view .project_desc { width: calc(100% - 50px); margin-top: -20px; } } .event_connection { width: 200px; margin-left: 40px; } .event_connection input { width: calc(100% - 2px); height: 30px; display: block; } .event_connection button { padding: 7px 10px; background-color: #757575; color: white; border: 0px; margin-top: 10px; cursor: pointer; transition-duration: 0.3s; } .event_connection button:hover { background-color: #545454; } .slider { width: 810px; position: relative; margin: 0 auto; } .slider .img_container img { width: 100%; display: none; } .slider .img_container img:first-of-type { display: inline-block; } .slider .prev, .slider .next { cursor: pointer; position: absolute; top: calc(50% - 33.5px); width: auto; margin-top: -25px; padding: 16px; color: rgba(0, 0, 0, 0.5); font-weight: bold; font-size: 50px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .slider .prev:hover, .next:hover { color: rgba(0, 0, 0, 0.7); } .slider .next { right: -60px; border-radius: 3px 0 0 3px; } .slider .prev { left: -60px; border-radius: 0 3px 3px 0; } .slider .slider-bar { text-align: center; margin-top: 10px; } .slider .slider-bar .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: white; border: 1px solid #707070; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .slider .slider-bar .active, .dot:hover { background-color: #707070; border: 1px solid #707070; } .slider img.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }