/*************************************************************/
/*   Design:  loungeprivee.com				     	 	 	 */
/*   File:    screen.css					                 */
/*-----------------------------------------------------------*/
/*   Autor:   Thomas Dürig, www.nuun.ch 	                 */
/*   Datum:   Dezember 2017					                 */
/*   Site: 	  www.loungeprivee.com        					 */
/*************************************************************/
/*  LAYOUT													 */
/*************************************************************/

/*FARBEN*/
/*	
#58595B = Schriftfarbe
#987041 = Gold
#A5A3A4 = Hellgrau (BG Navigation)
*/

/*Cookiebar*/
.contao-cookiebar .cc-inner {max-width: 500px; font-size: 1.5rem; line-height: 1.8rem;}
.contao-cookiebar .cc-inner h3 {font-size: 2.7rem; line-height: 3.7rem;}
.contao-cookiebar .cc-inner label {line-height: 1.9rem;}
.contao-cookiebar .cc-cookies .cc-cookie p {font-size: 1.5rem; line-height: 1.8rem;}
.contao-cookiebar .cc-info > p {font-size: 1.2rem; line-height: 1.6rem;}
.contao-cookiebar p a {color:#987041; text-decoration: underline;}
.contao-cookiebar .highlight .cc-btn.success {background: #987041; border-color: #987041;}
.contao-cookiebar .highlight .cc-btn.success:hover {background: #987041; border-color: #987041;}
.contao-cookiebar input:checked + label:before {background: #f8f0e6; border-color: #987041;}
.contao-cookiebar input:checked + label:after {background: #987041;}

/*  GLOBAL													 */
/*************************************************************/

body.landing .mod_changelanguage {display: none;}

html, body {position: relative; height: 100%; width:100%; font: 62.5% "robotolight", Arial, Verdana, Helvetica, sans-serif; letter-spacing:0em;}
body {font-size:17px; font-size:1.7rem; color: #58595B; background-color: #fff;}

.invisible {display: none !important;}

.schmal50 {width: 50% !important; margin: 0 auto;}
.schmal75 {width: 75% !important; margin: 0 auto;}

#wrapper {transition: filter 0.3s ease;}

#container {padding: 75px 0 200px 0; background: #e3dbce url(../graphics/bg-content.png) center top repeat-x;}
#container #main {width: 100%; background: #fff; padding: 40px 0; position: relative;}
#container #main .inside {width: 1130px;margin: 0 auto;}
#container #main .swirl {position: absolute; right: 50px; bottom: -52px;}

h1 {font-size: 4.5rem; line-height: 5rem; margin-bottom: 30px; color: #987041; font-family: 'playfair_displayregular'; text-transform: uppercase; text-align: center;}

strong {font-family: 'robotomedium';}
em {font-family: 'robotoitalic';}

/*  HEADER / NAVIGATION									     */
/*************************************************************/
#header {width: 100%; height: auto; margin-bottom: 0;}
#header .topheader {background-color: #A5A3A4; margin-bottom: 10px;}
#header .topheader .inside {width: 1130px; height: 45px; margin: 0 auto;}
#header .topheader .mod_changelanguage ul {width: auto; float: right;}
#header .topheader .mod_changelanguage ul li {display: inline-block; margin-left: 10px; padding-top: 11px;}
#header .topheader .mod_changelanguage ul li a {color: #58595B; text-decoration: none; font-family: 'robotoregular'; transition: color 0.3s ease;}
#header .topheader .mod_changelanguage ul li a:hover,
#header .topheader .mod_changelanguage ul li.active a {color: #987041;}

#header .logoarea {width: 100%; height: 250px; margin: 0 auto; background: url(../graphics/bg-header.png); border-top: 10px solid #987041;}
#header .logoarea .inside {width: 1130px; /*height: 250px;*/ margin: 0 auto; text-align: center;}
#header .logoarea .logo {width: 500px; margin: 40px auto 0 auto;}

#header .botheader {background-color: #A5A3A4;}
#header .botheader .inside {width: 1130px; height: auto; margin: 0 auto;}
#header .botheader .logo {margin-top: 20px;}
#header .botheader .navigation {width: 100%}
#header .botheader .navigation ul {text-align: center; width: 100%; margin-bottom: 0;}
#header .botheader .navigation li {display: inline-block; margin: 0;}
#header .botheader .navigation li a {font-size: 3rem; line-height:1em; font-family: 'playfair_displayregular'; color: #fff; height: 40px; padding: 20px 30px 10px 30px; text-decoration: none; display: block; text-transform: uppercase; transition: color 0.3s ease;}
#header .botheader .navigation li:hover a,
#header .botheader .navigation li a.trail,
#header .botheader .navigation li a.active,
#header .botheader .navigation li strong {color: #58595B;}

/*  SLIDER                                                   */
/*************************************************************/
#sliderart {background-color: #A5A3A4; height: 450px; overflow: hidden;}
#sliderart .inside {width: 1430px; height: auto; margin: 0 auto;}
#sliderart .slick-container {height: 450px;}
#sliderart .slick-dots {position: absolute; bottom: 0; width: 100%; text-align: center;}
#sliderart .slick-dots li {display: inline-block; margin: 0 5px; width: 15px; height: 15px; background: url(../graphics/ico-bullet-white.svg) center no-repeat; cursor: pointer; transition: background 0.3s ease;}
#sliderart .slick-dots li.slick-active,
#sliderart .slick-dots li:hover {background: url(../graphics/ico-bullet-red.svg) center no-repeat;}
#sliderart .slick-dots li button {display: none;}

/*  LANDING                                                  */
/*************************************************************/
body.landing #header .logoarea,
body.landing #header .botheader {display: none;}
body.landing #header .topheader,
body.landing #header .topheader .inside {width: 94%; padding-left: 3%; padding-right: 3%;}
body.landing #container {position: relative; padding:0; background: url(../graphics/home.jpg) center no-repeat; background-size: cover; border-top: 10px solid #987041;}
body.landing #container #main {padding:0; background: none; height: 80%;}
body.landing #container #main .inside {width: 94%; padding-left: 3%; padding-right: 3%;}
body.landing #container #main .swirl {display: none;}
body.landing #container #main .logohome {margin-top: 40px;}
body.landing #container #main .logohome .caption {font-size: 2.5rem; line-height: 2.8rem; margin-bottom: 30px; color: #987041; font-family: 'playfair_displayregular'; text-transform: uppercase;}
body.landing #container #main .abfrage {width: 240px; height: 170px; position: absolute; right: 3%; bottom: 0; background: url(../graphics/18-si-no.svg) center no-repeat; background-size: cover;}
body.landing #container #main .abfrage.de {background: url(../graphics/18-si-no-de.svg) center no-repeat;}
body.landing #container #main .abfrage.fr {background: url(../graphics/18-si-no-fr.svg) center no-repeat;}
body.landing #container #main .abfrage.en {background: url(../graphics/18-si-no-en.svg) center no-repeat;}
body.landing #container #main .abfrage .agreed {display: block; position: absolute; right: 25px; top: 46px; height: 35px; width: 60px;}
body.landing #container #main .abfrage .denied {display: block; position: absolute; right: 25px; bottom: 46px; height: 35px; width: 60px;}
body.landing #footer .inside {width: 94%; padding-left: 3%; padding-right: 3%;}

/*  INHALTSELEMENTE                                          */
/*************************************************************/

/*Text*/
.image_container img {max-width: 100%; height: auto;}
a { color: #987041; text-decoration: none; }

#container .ce_text {margin-bottom: 30px;}
#container .ce_text .image_container.float_left {width: 48.5%; float: left; margin-right: 3%;}
#container .ce_text .image_container.float_right {width: 48.5%; float: right; margin-left: 3%;}

/*Hyperlink*/
#main .ce_hyperlink {padding: 30px 0; clear: both; text-align: center;}
#main .ce_hyperlink a {display: inline-block; width: auto; padding: 15px 40px; border: 2px solid #987041; border-radius: 4px; background-color: #fff; margin: 0 auto; transition: color 0.3s ease, background 0.3s ease; color:#987041; text-decoration: none;}
#main .ce_hyperlink a:hover {background: #987041; color: #fff;}

/*Gallery*/
#container #main .ce_gallery ul li {width: 22.75%; margin-right: 3%; margin-bottom: 30px; display: inline-block; float: left; line-height: 1;}
#container #main .ce_gallery ul li.col_last {margin-right: 0;}
#container #main .ce_gallery ul li figure {width: 100%; overflow: hidden; line-height: 0;}
#container #main .ce_gallery ul li figure img {width: 100%; height: auto; -webkit-transition: all .5s ease; transition: all .5s ease;}
#container #main .ce_gallery ul li figure:hover img {-webkit-transform: scale(1.1); transform: scale(1.1);}
#colorbox #cboxTitle {display: none !important;}
#colorbox #cboxCurrent {font-size: 1.5rem;}
 
/*List*/
#main .ce_text ul {display: table; margin-bottom: 25px;}

#main .ce_text ul li {vertical-align: middle; list-style: none; padding-left: 18px; background: url(../graphics/list-bullet.svg) no-repeat top 8px left; margin-bottom:10px;}

#main .ce_text ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
#main .ce_text ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 0 20px; /* Give each list item a left margin to make room for the numbers */
    list-style:none; /* Disable the normal item numbering */
}
#main .ce_text ol > li:before {
    content:counter(li)"."; /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    left: -18px;
    top: 1px;
    font-size: 1.8rem;
    font-family: 'Myriad W01 Bd', sans-serif;
    color: #0088C9;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

/*Downloads*/
.ce_download.sc.last, .ce_downloads.sc.last {padding-right: 0;}
.ce_download, .ce_downloads {position:relative; width:100%; margin:0; padding:0;}
.ce_download ul, .ce_downloads ul {position:relative; float:left; width:100%; margin:0; padding:0 0 0 0;}
.ce_download ul li, .ce_downloads ul li {position:relative; width:100%; line-height:21px; padding:0 0 0 0; margin:0 0 5px 0; background:#0088C9;}

.ce_download img, .ce_downloads img {position:absolute; left:10px; top:7px; z-index:400;}
body #container .ce_downloads a, body #container .ce_downloads a:link, body #container .ce_downloads a:visited, body #container .ce_download a, body #container .ce_download a:visited, body #container .ce_download a:link, body #container .enclosure a:link, body #container .enclosure a:visited {
    position:relative;
    z-index:300;
    text-decoration: none;
    font-size: 1.4rem;
    font-family: "robotoregular", Arial, Verdana, Helvetica, sans-serif;
    color: #fff;
    display:block;
    padding:8px 30px 8px 40px;
    margin:0 0 0 0;
    transition: background-color 0.5s ease; -webkit-transition: background-color 0.5s ease; 
    }   
        
body #container .ce_downloads a:hover, 
body #container .ce_downloads a:active, 
body #container .ce_download a:hover, 
body #container .ce_download a:active {background-color:#777;}   

/*Form*/
#container .formbody input {-webkit-appearance:none;} 
#container .formbody button {-webkit-appearance:none;}

#container .ce_form {margin-top: 40px; width: 50%; margin-right: auto; margin-left: auto;}
#container .formbody label {width: 100%; padding-top: 10px; margin-bottom: 5px; font-size: 1.6rem; display: inline-block; float: left;}
#container .formbody input {width: 96%; padding:2%; font-size: 1.6rem; margin-bottom: 5px; border:none; background-color: rgba(225,225,225,0.9);}
#container .formbody textarea {width: 96%; padding:2%; font-size: 1.6rem; border: none; margin-bottom: 4px; background-color: rgba(225,225,225,0.9);}
#container .formbody .submit {background-color: #987041; margin-top: 7px; padding: 5px 0; color: #fff; margin-left: 0; width: 200px;}
#container .formbody select {width: 100%; padding:1%; font-size: 1.6rem; margin-bottom: 15px; border:none; background-color: rgba(225,225,225,0.9);}
#container .formbody fieldset {margin-bottom: 10px;}
#container .formbody fieldset legend {font-size: 1.6rem; margin-bottom: 5px;} 
#container .formbody fieldset span {width:100%; float: left;}
#container .formbody fieldset span input {float: left; width: 5%; height: 26px;}
#container .formbody fieldset span label {padding-top: 0; width: 95%;}
#container .formbody .explanation p {font-size: 1.6rem; line-height: 1.4em;}
#container .formbody .widget-captcha {margin-bottom: 40px;}
#container .formbody .widget-captcha input {margin-bottom: 5px;}
#container .formbody .widget-captcha span {width: 100%; float: left; font-size: 1.6rem;}
#container .formbody .widget-captcha label span.mandatory {width: auto; float: none;}
#container .formbody .dropzone {clear: both;}

#container .formbody .widget-radio input {-webkit-appearance:radio;}

/*Columns*/
#container .rs-column.-large-col-2-1 {width: 48.5%; margin-right: 3%;}
#container .rs-column.-large-col-2-1.-large-last {margin-right: 0;}
#container .rs-column.-large-col-3-1 {width: 31.3%; margin-right: 3%;}
#container .rs-column.-large-col-3-1.-large-last {margin-right: 0;}
#container .rs-column.-large-col-4-1 {width: 22.75%; margin-right: 3%; margin-top: 0;}
#container .rs-column.-large-col-4-1.-large-last {margin-right: 0;}

/*YouTube*/
#container .ce_youtube {clear: both;}
#container .ce_youtube embed {width: 100%;}
#container .ce_youtube video {width: 100%;}

#container .ce_youtube .me-plugin {width: 100%;}
#container .ce_youtube .mejs-overlay {width: 100% !important;}

/*Google Map*/
.dlh_googlemap {width: 100% !important;}

/*Isotope*/
body.senoritas #header {margin-bottom: 0;}
body.senoritas #header nav ul {margin-bottom: 0;}
body.senoritas #container #main {background: none;}

.product_list .product {box-sizing: border-box; padding:10px; width: 32%; margin-right: 2%; margin-bottom: 30px; display: inline-block; background: #fff; vertical-align: top; float: left; -webkit-box-shadow: 6px 6px 11px 0px rgba(163,163,163,1); -moz-box-shadow: 6px 6px 11px 0px rgba(163,163,163,1); box-shadow: 6px 6px 11px 0px rgba(163,163,163,1);}
.product_list .product:nth-of-type(3n) {margin-right: 0;}
.product_list .product:nth-of-type(3n+1) {clear: left;}
.product_list .product .image_container {border: 5px solid #987041; height: 360px; overflow: hidden;}
.product_list .product .image_container img {width: 100%; height: auto;}
.product_list .product h3 {margin-top: 10px; text-align: center;}
.product_list .product h3 a {color: #987041; font-family: 'robotomedium'; text-decoration: none;}
.product_list .product .tdub {text-align: center; font-size: 1.9rem;}
.product_list .product .tdub a {color: #987041; text-decoration: none;}
.product_list .product .tdub div {display: inline-block;}
.product_list .product .tdub div.left {margin-right: 5px;}
.product_list .product .verfuegbar {text-align: center; font-size: 19px; height: 40px; margin-top: 15px;}
.product_list .product .verfuegbar div {display: inline-block; vertical-align: middle;}
.product_list .product .verfuegbar div.left {margin-right: 5px;}
.product_list .product .verfuegbar div.right {height: 40px;}
.product_list .product .verfuegbar div.right img {width: 40px; height: auto;}

.mod_iso_productreader .product .detailleft {width: 55%; margin-right: 5%; display: inline-block; background: #fff; padding:15px; -webkit-box-shadow: 6px 6px 11px 0px rgba(163,163,163,1); -moz-box-shadow: 6px 6px 11px 0px rgba(163,163,163,1); box-shadow: 6px 6px 11px 0px rgba(163,163,163,1);}
.mod_iso_productreader .product .image_container {box-sizing: border-box; margin-bottom: 10px; float: left; border: 5px solid #987041; display: inline-block; overflow: hidden; width: 23.5%; margin-right: 2%; height: 170px;}
.mod_iso_productreader .product .image_container:first-of-type {width: 100%; height: 500px; margin-right: 0;}
.mod_iso_productreader .product .image_container:nth-of-type(4n+1) {margin-right: 0;}
.mod_iso_productreader .product .image_container img {width: 100%; height: auto;}
.mod_iso_productreader .product .detailright {width: 37%; display: inline-block; float: right;} 
.mod_iso_productreader .product .detailright h2 {color: #987041; font-family: 'robotomedium'; font-size: 4rem;}
.mod_iso_productreader .product .detailright h3 {color: #987041; font-family: 'robotoregular';}
.mod_iso_productreader .product .detailright a {color: #987041; text-decoration: none;}
.mod_iso_productreader .product .detailright .tdub {font-size: 2.3rem; margin-bottom: 5px;}
.mod_iso_productreader .product .detailright .tdub .left {width: 35%; display: inline-block; margin-right: 5%; vertical-align: top;}
.mod_iso_productreader .product .detailright .tdub .right {width: 60%; display: inline-block;}
.mod_iso_productreader .product .verfuegbar {text-align: left; height: 50px; margin-top: 15px;}
.mod_iso_productreader .product .verfuegbar div {display: inline-block; vertical-align: middle;}
.mod_iso_productreader .product .verfuegbar div.left {margin-right: 15px; font-size: 2.3rem; min-width: 35%;}
.mod_iso_productreader .product .verfuegbar div.right {height: 50px;}
.mod_iso_productreader .product .verfuegbar div.right img {width: 50px; height: auto;}
.mod_iso_productreader .back a {padding: 5px 15px; background-color: #987041; color: #fff; text-decoration: none;}

/*Filter*/
#container .mod_iso_productfilter {display: inline-block; padding:10px 30px; background: rgba(255,255,255,0.9); margin-bottom: 20px; width: 1070px; box-shadow: 6px 6px 11px 0px rgba(163,163,163,1);}
#container .mod_iso_productfilter .filters {display: inline-block;}
#container .mod_iso_productfilter form {margin-bottom: 0;}
#container .mod_iso_productfilter .filters label {display: inline-block; width: auto; margin-right: 15px; line-height: 2.1em;}
#container .mod_iso_productfilter .filtercontainer {float: left; display: inline-block; margin-top: 8px; min-width: 200px;}
#container .mod_iso_productfilter .filtercontainer select {width: 168px; display: inline-block; float: left; background: #987041; margin-right: 15px; margin-bottom: 0; height: 35px; color:#fff;}
#container .mod_iso_productfilter .filtercontainer select:focus {outline: none; color:#fff;}
#container .mod_iso_productfilter .filtercontainer .clear_filters {display: inline-block; width: auto; text-align: right; float: left; margin-top: 8px;}

/*  FOOTER                                                   */
/*************************************************************/
.endcontent {height: 282px; width: 100%; display: block; position: relative;}

#footer {height: 40px;  display: block; clear: both; position: fixed; bottom: 0px; font-size: 1.6rem; width:100%; background-color: #A5A3A4;}
#footer .inside {width: 1130px; margin: 0 auto;}
#footer p {padding-top: 9px; font-family: 'robotoregular'; text-transform: uppercase;}
#footer .ce_hyperlink {margin-top: 9px; display: inline-block; margin-right: 20px;}
#footer .ce_hyperlink a {font-family: 'robotoregular'; text-transform: uppercase; text-decoration: none; color: #58595B;}

/*  LIGHTBOX	                                             */
/*************************************************************/
#cboxTitle {display: none !important;} 
#cboxLoadedContent {border: none;} 
#cboxNext {background: url("../graphics/lightbox-next.svg"); width: 35px; position: absolute; right: 15px; height: 45px; top: 53%; background-position: center; background-repeat: no-repeat; background-size: contain;} 
#cboxPrevious {background: url("../graphics/lightbox-prev.svg"); width: 35px; position: absolute; left: 15px; height: 45px; top: 53%; background-position: center; background-repeat: no-repeat; background-size: contain;} 
#cboxClose {background: url("../graphics/lightbox-close.svg"); width: 35px; position: absolute; right: 15px; top: 15px; height: 35px; background-position: center; background-repeat: no-repeat; background-size: contain;} 
#cboxCurrent {font-size: 14px;} 
#cboxOverlay {background: #987041;}

#cboxLoadedContent #container #main .inside {width: 90%;}
#cboxLoadedContent #container #main .inside a {color: #987041; text-decoration: none;}
/*body.landing #cboxLoadedContent #container {background: #fff;}*/
body.landing #cboxLoadedContent #container {padding: 75px 0 200px 0; height: 100% !important; background: #e3dbce url(../graphics/bg-content.png) center top repeat-x;}
body.landing #cboxLoadedContent #container #main {width: 100%; background: #fff; padding: 40px 0; position: relative;}
body.landing #cboxLoadedContent #container #main .inside {width: 90%;}
body.landing #cboxLoadedContent #container #main .swirl {position: absolute; display: block; right: 50px; bottom: -52px;}

/*  FIXES		                                             */
/*************************************************************/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:0px;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*  MEDIA QUERIES                                            */
/*************************************************************/
@media screen and (max-width: 1450px) {
    #container .mod_iso_productfilter {width: 100%; box-sizing:border-box;}
    #sliderart {height: 355px;}
    #sliderart .inside {width: 1130px;}
    #sliderart .slick-container {height: 355px;}
    #container .mod_iso_productfilter .filters {width: 100%}
}

@media screen and (max-width: 1370px) {
    #sliderart {height: 30vw;}
    #sliderart .inside {width: 100%;}
    #sliderart .slick-container {height: 30vw;}
    #container #main .inside {width: 94%; padding-right: 3%; padding-left: 3%;}
    #header .topheader .inside {width: 94%; padding-right: 3%; padding-left: 3%;}
    #header .logoarea .inside {width: 94%; padding-right: 3%; padding-left: 3%;}
	#header .botheader .inside {width: 94%; padding-right: 3%; padding-left: 3%;}
	#footer .inside {width: 94%; padding-right: 3%; padding-left: 3%;}
	.product_list .product .image_container {height: 29vw;}
    .mod_iso_productreader .product .detailleft {width: 47%; margin-right: 0;}
    .mod_iso_productreader .product .detailright {width: 47%;}
	.mod_iso_productreader .product .image_container:first-of-type {height: 36vw;}
	.mod_iso_productreader .product .image_container {height: 11vw;}
}

@media screen and (max-width: 960px) {
    #container .rs-column.-large-col-4-1 {width: 48.5%; margin-right: 3%; margin-top: 0;}
    #container .rs-column.-large-col-4-1:nth-of-type(2n) {margin-right: 0;}
    #container .ce_form {width: 100%;}
}

@media screen and (max-width: 850px) {
    .mod_iso_productreader .product .detailleft {width: 100%; box-sizing: border-box;}
    .mod_iso_productreader .product .detailright {width: 100%; margin-bottom: 20px;}
    .mod_iso_productreader .product .image_container:first-of-type {height: 75vw;}
    .mod_iso_productreader .product .image_container {height: 22vw;}
}

@media screen and (max-width: 700px) {
    #header .botheader .navigation li {width: 100%; display: block;}
    #header .botheader .navigation li a {padding: 1px; height: 35px; line-height: initial; letter-spacing: 1px;}
    #header .botheader {padding: 10px 0 5px 0;}
    .product_list .product {width: 100%; margin-right: 0;}
    .product_list .product .image_container {height: 90vw;}
}

@media screen and (max-width: 600px) {
    #container .rs-column.-large-col-2-1 {width: 100%; margin-right: 0; margin-top: 0;}
    #container .rs-column.-large-col-3-1 {width: 100%; margin-right: 0; margin-top: 0;}
    #container .rs-column.-large-col-4-1 {width: 100%; margin-right: 0; margin-top: 0;}
    .schmal75 {width: 100% !important; margin: 0 auto;}
    .schmal50 {width: 100% !important; margin: 0 auto;}
    #header .logoarea .logo {width: auto; margin: 20px auto 0 auto;}
    #header .logoarea {height: 40vw;}
    #container #main .swirl {width: 100%; right: 0; text-align: center;}
    #container .mod_iso_productfilter .filtercontainer select {width: 80%;}
    #container .mod_iso_productfilter .filtercontainer .clear_filters {width: 10%;}
}


/*  FONTS                                                    */
/*************************************************************/

/*  FONTS  													 */
/*************************************************************/
@font-face {
    font-family: 'playfair_displaybold';
    src: url('playfairdisplay-bold-webfont.woff2') format('woff2'),
         url('PlayfairDisplay-Bold.ttf') format('truetype'),
         url('playfairdisplay-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'playfair_displayregular';
    src: url('playfairdisplay-regular-webfont.woff2') format('woff2'),
         url('PlayfairDisplay-Regular.ttf') format('truetype'),
         url('playfairdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotolight';
    src: url('roboto-light-webfont.woff2') format('woff2'),
         url('roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoitalic';
    src: url('roboto-italic-webfont.woff2') format('woff2'),
         url('roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotomedium';
    src: url('roboto-medium-webfont.woff2') format('woff2'),
         url('roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}