@media screen {
    #block1 {
        background-image: url("/wp-content/themes/simple/img/sized/XGA_1024x768/The SQRL/1.jpg") !important;
    }

    #block2 {
        background-image: url("/wp-content/themes/simple/img/sized/XGA_1024x768/The SQRL/2.jpg");
    }

    #block3 {
        background-image: url("/wp-content/themes/simple/img/sized/XGA_1024x768/The SQRL/3.jpg");
    }

    #block4 {
        background-image: url("/wp-content/themes/simple/img/sized/XGA_1024x768/The SQRL/4.jpg");
        padding: 0;
    }
    #footer {
        background-image: url("/wp-content/themes/simple/img/sized/XGA_1024x768/The SQRL/5.jpg") !important;
        background-size: cover !important;
    }
    /****************************************************************************************************/
}

@media (min-width: 1025px) , (min-height: 769px) {
    #block1 {
        background-image: url("/wp-content/themes/simple/img/sized/QXGA_2048x1536/The SQRL/1.jpg") !important;
    }

    #block2 {
        background-image: url("/wp-content/themes/simple/img/sized/QXGA_2048x1536/The SQRL/2.jpg");
    }

    #block3 {
        background-image: url("/wp-content/themes/simple/img/sized/QXGA_2048x1536/The SQRL/3.jpg");
    }

    #block4 {
        background-image: url("/wp-content/themes/simple/img/sized/QXGA_2048x1536/The SQRL/4.jpg");
        padding: 0;
    }
    #footer {
        background-image: url("/wp-content/themes/simple/img/sized/QXGA_2048x1536/The SQRL/5.jpg") !important;
        background-size: cover !important;
    }
    /****************************************************************************************************/
}

@media (min-width: 2049px) , (min-height: 1537px) {
    #block1 {
        background-image: url("/wp-content/themes/simple/img/sized/Retina_2560x1920/The SQRL/1.jpg") !important;
    }

    #block2 {
        background-image: url("/wp-content/themes/simple/img/sized/Retina_2560x1920/The SQRL/2.jpg");
    }

    #block3 {
        background-image: url("/wp-content/themes/simple/img/sized/Retina_2560x1920/The SQRL/3.jpg");
    }

    #block4 {
        background-image: url("/wp-content/themes/simple/img/sized/Retina_2560x1920/The SQRL/4.jpg");
        padding: 0;
    }
    #footer {
        background-image: url("/wp-content/themes/simple/img/sized/Retina_2560x1920/The SQRL/5.jpg") !important;
        background-size: cover !important;
    }
    /****************************************************************************************************/
}

@media (min-width: 2561px) , (min-height: 1921px) {
    #block1 {
        background-image: url("/wp-content/themes/simple/img/sized/HXGA_4096x3072/The SQRL/1.jpg") !important;
    }

    #block2 {
        background-image: url("/wp-content/themes/simple/img/sized/HXGA_4096x3072/The SQRL/2.jpg");
    }

    #block3 {
        background-image: url("/wp-content/themes/simple/img/sized/HXGA_4096x3072/The SQRL/3.jpg");
    }

    #block4 {
        background-image: url("/wp-content/themes/simple/img/sized/HXGA_4096x3072/The SQRL/4.jpg");
        padding: 0;
    }
    #footer {
        background-image: url("/wp-content/themes/simple/img/sized/HXGA_4096x3072/The SQRL/5.jpg") !important;
        background-size: cover !important;
    }
    /****************************************************************************************************/
}

#footer {
	background: url("/wp-content/themes/simple/single/img/372/footer.jpg") !important;
}

/****************************************************************************************************/

.case-to-top .central-button {
    border: 1px solid #FFFFFF !important;
}

.link-to-video {
	cursor: pointer;
	margin: 20px auto;
}

@media screen {
    .video-container {
        left: 50%;
        position: absolute;
        top: 50%;
            -ms-transform: translateY(-50%) translateX(-50%);
            -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        visibility: hidden;
        opacity: 0;
        transition-timing-function: linear;
        transition-duration: 0.7s;
            -webkit-transition-duration: 0.7s;
            -moz-transition-duration: 0.7s;
            -o-transition-duration: 0.7s;
            -ms-transition-duration: 0.7s;
    }
}

@media (min-aspect-ratio: 16/9){
    .video-container {
        width: 143vh;
        height: 80vh;
    }
}

@media (max-aspect-ratio: 16/9){
    .video-container {
        width: 90vw;
        height: 51vw;
    }
}

.close-video {
	position: absolute;
	right: -25px;
	top: -25px;
	width: 50px;
	cursor: pointer;
}

video {
	height: 100%;
    width: 100%;
}

.case-to-top.sub-block h2.bottom {
	bottom: 9vh;
    font-size: 20px;
    position: absolute;
}

.case-to-top.sub-block .overlay {
	background: rgba(0, 0, 0, 0.7);
}

.case-to-top.sub-block .overlay.onvideo {
    visibility: hidden;
    opacity: 0;
    transition-timing-function: linear;
    transition-duration: 0.7s;
        -webkit-transition-duration: 0.7s;
        -moz-transition-duration: 0.7s;
        -o-transition-duration: 0.7s;
        -ms-transition-duration: 0.7s;
}

.video-container.video-on,
.case-to-top.sub-block .overlay.onvideo.video-on {
    visibility: visible;
    opacity: 1;
}

body.video-on #fp-nav,
body.video-on .menu-toggle{
    visibility: hidden;
    opacity: 0;
}

#block2 h2,
#block2 .svg-title {
	text-align: center;
}

#block2 .svg-title {
	margin-top: 0;
}

#block3 h2.bottom,
#block4 h2.bottom {
	position: relative;
	bottom: auto;
    padding-top: 10px;
}

#block4 h2.bottom {
	right: 10px;
}

@media (max-width: 870px) {
	.case-to-top.sub-block .svg-title {
		float: none;
	}

    #block3 rect,
    #block3 .title,
    #block3 .svg-title,
    #block3 .svg-title text,
    #block3 .case-to-top rect,
    #block3 .case-to-top h1 {
        font-size: 57px !important;
        height: 55px;
        line-height: 58px;
    }
}

@media (max-width: 768px) {
	#block3 rect,
	#block3 .title,
	#block3 .svg-title,
	#block3 .svg-title text {
		font-size: 45px;
		/*height: 38px;*/
		line-height: 38px;
	}

	#block4 h2.bottom {
		right: 10px;
	}
}

@media (max-width: 640px) {
	#block3 rect,
	#block3 .title,
	#block3 .svg-title,
	#block3 .svg-title text {
		font-size: 40px;
		height: 33px;
		line-height: 33px;
	}
}

@media (max-width: 600px) {
	#block2 h2,
	#block4 h2 {
		right: 10px;
	}

	.case-to-top .central-button {
		background: #FFFFFF !important;
		color: #000000 !important;
	}
}

@media (max-width: 560px) {
	#block3 rect,
	#block3 .title,
	#block3 .svg-title,
	#block3 .svg-title text {
		font-size: 30px;
		height: 27px;
		line-height: 30px;
	}
}

@media (max-width: 500px) {
	#block3 rect,
	#block3 .title,
	#block3 .svg-title,
	#block3 .svg-title text,
    #block4 .title {
		font-size: 30px;
		height: 32px;
		line-height: 25px;
	}
}

@media (max-width: 430px) and (max-height: 420px) {
	#block3 .title,
	#block3 .svg-title,
	#block3 .svg-title text {
		font-size: 25px;
	}
}

@media (max-width: 400px) {
    #block3 .title,
    #block3 .svg-title,
    #block3 text,
    #block3 h1 {
        font-size: 27px !important;
        height: 24px !important;
    }
}

#block3 .svg-title {
	margin-top: 10px;
}

#block2 .title-container {
    top: 50%;
    left: 25%;
    width: 40%;
    transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 1/1){
    #block1 {
        background-position: 0 50%;
    }
    #block2 {
        background-position: 90% 50%;
    }
    #footer {
        background-position: 50% 50%;
    }
    #block2 .title-container {
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
}

.title-container .svg-title {
    margin-left: 0;
}

@media (max-height: 420px) {
    #block2 h2,
    #block3 h2,
    #block4 h2{
        font-size: 16px;
    }

    #block2 .svg-title,
    #block3 .svg-title,
    #block4 .svg-title,
    #block3 rect {
        font-size: 30px;
    }
}

#block2 .title-container {
    top: 35% !important;
    width: 50%;
    margin: 0 25%;
}