@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.eot?9355132');
    src: url('../fonts/fontello.eot?9355132#iefix') format('embedded-opentype'), url('../fonts/fontello.woff2?9355132') format('woff2'), url('../fonts/fontello.woff?9355132') format('woff'), url('../fonts/fontello.ttf?9355132') format('truetype'), url('../fonts/fontello.svg?9355132#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before,
.return > a:before,
.remove-iframe > a:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: auto;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-desktop:before {
    content: '\e800'
}

.icon-tablet:before {
    content: '\e801'
}

.icon-laptop:before {
    content: '\e802'
}

.icon-mobile:before {
    content: '\e803'
}

.remove-iframe > a:before {
    content: '\2716';
    padding-right: 10px;
}

.return > a:before {
	content: '\21b5';

}



html {
    box-sizing: border-box
}

*,
*:before,
*:after {
    box-sizing: inherit
}

body,
html {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 100%;
    padding: 0;
    margin: 0;
    min-height: 100%;
	background-image: url(../images/marble-bg.jpg);
}


html.desktop, html.desktop body {
	height: 100%;
}

body {
    padding: 0 0 90px;
}


.iframe-container,
.switcher-bar {
    display: none
}

.notice {
    text-align: center;
    padding: 5%;
}

@media (min-width: 700px) { 
	.notice {
	    display: none
	}

	.iframe-container {
	    position: relative;
	    display: block;
	    height: 100%;
	    margin: 75px auto;
	    width: 100%;
	    -webkit-box-shadow: 0px 0px 19px -4px rgba(0,0,0,0.5);
	    -moz-box-shadow: 0px 0px 19px -4px rgba(0,0,0,0.5);
	    box-shadow: 0px 0px 19px -4px rgba(0,0,0,0.5);
	}
	
	.iframe-container:after {
		font-size: 25px;
		text-transform: uppercase;
		display: block;
		position: absolute;
		bottom: -50px;
		left: 0;
		right: 0;
		text-align: center;
	}
	
	.iframe-container.alternate {
		display: none;
	}
	
	html.desktop .iframe-container {
	    width: 100%;
	    margin: 0;
	}

	html.tablet .iframe-container {
	    width: 768px;
	    height: 1024px;
	}

	html.tablet .iframe-container:after {
		content: 'iPad 3, 4, Air, Air2 & Mini';
	}

	html.laptop .iframe-container {
	    width: 1366px;
	    height: 768px;
	}

	html.laptop .iframe-container:after {
		content: '1366px X 786px Laptop';
	}


	html.smart-phone .iframe-container {
	    width: 390px;
	    height: 667px;
	}

	html.smart-phone .iframe-container:after {
		content: 'iPhone 6 or 7';
	}
	
	html.smart-phone .iframe-container.alternate {
	    width: 677px;
	    height: 375px;
	    display: block;
	    margin-top: 100px;
	}
	

	.iframe-container iframe {
	    position: absolute;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	    border: 0;
	    background: #fff url(../images/ajax-loader.gif) 50% 50% no-repeat;
	}

	.switcher-bar {
	    display: block;
	    position: fixed;
	    padding: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    height: 90px;
	    color: #fff;
	    font-size: 0px;
	    background: #444 url(../images/dark-marble-bg.jpg);
	    -webkit-box-shadow: -1px -3px 5px 0px rgba(0,0,0,0.4);
	    -moz-box-shadow: -1px -3px 5px 0px rgba(0,0,0,0.4);
	    box-shadow: -1px -3px 5px 0px rgba(0,0,0,0.4);
	}

	.switcher-menu {
	    list-style: none;
	    text-align: center;
	    padding: 0;
	    margin: 0;
	}

	.switcher-menu li {
	    font-size: 20px;
	    display: inline-block;
	    line-height: 90px;
	}

	.switcher-menu a {
	    color: #fff;
	    text-decoration: none;
	    display: inline-block;
	    line-height: 90px;
	    padding: 0 10px;
	    margin: 0 2px;
	    text-align: center;
	}

	.switcher-menu a:hover,
	.switcher-menu .current > a {
	    color: #d1f442
	}

	.return em {
	    font-style: normal;
	    font-size: 12px;
	    position: relative;
	    top: -3px;
	    left: 5px;
	}

	.switcher-menu .title,
	.switcher-menu .remove-iframe {
	    font-size: 14px;
	}

}

@media (min-width: 1000px) { 

	.switcher-menu .title {
	    padding-left: 20px;
	    position: absolute;
	    left: 0;
	}

	.switcher-menu .return {
	    position: absolute;
	    right: 0;
	    padding-right: 20px;
	}


}