﻿.is-topbar {/*display:table;*/display:none;width:100%;position:fixed;top:0;z-index:101;box-sizing:border-box;			
	-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.is-topbar-container {display:table;width:100%;height:100%;margin:0 auto;max-width:100%;}
.is-topbar-logo {display:table-cell;}
.is-topbar-menu {display:table-cell;}
.is-logo-link {display:inline-block;margin: 10px 0 10px 15px;}
.is-photo-profile {max-height:60px;vertical-align: middle;
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;opacity:0.8;}
.is-sitename {display:inline-block;margin:0 15px;
            font-weight:600;letter-spacing:2px;font-size:15px;text-decoration:none;color:#000;
            -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}          
.is-logo-setting {display: inline-block;margin-left:10px;font-size:12px;cursor:pointer;
            -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.is-menu {float:right;width:80%;height: 100%;} 
 @media all and (min-width: 1025px) {
	.is-menu {width:auto;height:auto;}
}
#is-menu-toggle {float:right}

.is-topbar.shrink { height: 60px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); }
.is-topbar.shrink .is-photo-profile { max-height:50px; }		
.is-topbar.shrink .is-sitename { font-size:14px;}
.is-topbar.shrink .is-topbar-menu {vertical-align:middle;}


/* Option 1 (Default) */
.is-topbar {height:70px;}
.is-topbar-container {max-width:100%;}
.is-topbar-logo {vertical-align:middle;}
.is-topbar-menu {vertical-align:middle;}
.is-photo-profile {max-height:60px}
.is-menu {text-align: left;}

/* Option 2 (Logo on top) 
.is-topbar-container {max-width:100%;background: inherit;}
.is-topbar-logo {display:block;text-align:center;margin-top:20px}
.is-topbar-menu {display:block;text-align:center;line-height:1;background:inherit; position:relative; width: auto;}
.is-photo-profile {height:80px}
@media all and (max-width: 1024px) {
    .is-photo-profile { height:50px; }		
}
.is-menu {float:none;text-align: left;}
.is-topbar.shrink .is-photo-profile { height:75px; }
.is-topbar-menu.is-fixed { position: fixed; top: 0; left: 0; width: 100%; }
@media all and (max-width: 1024px) {
    .is-topbar-menu.is-fixed { position:relative; }
    .is-topbar.shrink .is-photo-profile { height:50px; } 
}
@media all and (min-width: 1025px) {
    .is-topbar { position:absolute; } 
    .is-topbar-menu.is-fixed {-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); }
}
@media all and (max-width: 1024px) {
    .is-topbar {display:table; height : 70px;}
    .is-topbar-logo {display:table-cell;vertical-align:middle;text-align:left;  z-index: 1; position: fixed; margin-top: 0;}
    .is-topbar-menu {display:table-cell;vertical-align:middle;text-align:right;}

    .is-menu {height:100%;float:none;text-align:left;}
}*/

@media all and (max-width: 640px) {
    .is-photo-profile { max-height:50px; }		
    .is-sitename { font-size:14px;letter-spacing:1px }
} 
	
.is-menu {padding:0;box-sizing:border-box;position:fixed;top:0;right:-1000px;z-index:100000;overflow-y:auto;
    -webkit-box-shadow:0 0 5em rgba(0, 0, 0, 0.2);-moz-box-shadow:0 0 5em rgba(0, 0, 0, 0.2);box-shadow:0 0 5em rgba(0, 0, 0, 0.2);}	
.is-menu ul {list-style: none; padding: 0;margin: 0;animation-duration:0.3s;-webkit-animation-duration:0.3s;}
.is-menu ul li {float:none;}

.is-menu > ul > li ul {display:none;}

.is-menu ul li a {display:block;font-weight:600;letter-spacing:1px;font-size:15px;text-decoration:none;white-space:nowrap;color:#000;padding:12px 20px 10px 20px;line-height:50px;
    -webkit-transition: all 0.3s;-moz-transition:all 0.3s;transition: all 0.3s;}
@media all and (max-width: 1024px) {
    .is-menu > ul {padding: 0px 40px;margin-top: 50px;}
    .is-menu ul li a {padding: 5px}
}    
.is-menu ul li a i {font-size: 15px;}
.is-menu ul li a i.ion-android-arrow-dropdown {font-size: 14px;margin-left:5px;} /* icon */
/*.is-menu ul li a i.ion-android-arrow-dropdown.menutap {
    font-size: 20px;
    padding: 3px 10px 0;
    border-radius: 4px;
    margin-left: 10px;
    background: rgba(218, 218, 218, 0.45);
}*/
@media all and (max-width: 1024px) {
   .is-menu ul li a i.ion-android-arrow-dropdown {
        font-size: 20px;
        margin: 10px 0 0 10px;
        padding: 0px 15px;
        float: right;
        line-height: 30px;
        background: rgba(218, 218, 218, 0.45);
   } 
}    
.is-menu ul li a:hover {/*background:rgba(0,0,0,1);color:#fff;*/-webkit-transition: all 0.3s;-moz-transition:all 0.3s;transition: all 0.3s;} 
       
.is-menu li ul a {font-weight:400;padding-left:2.5em}
.is-menu li ul li ul a {padding-left:4em}
.is-menu li ul li ul li ul a {padding-left:6.5em}

/*.is-menu > ul > li {border-bottom:#ddd 1px solid;}
.is-menus li > ul > li { border-top:#ddd 1px solid;}
*/
@media all and (min-width: 1025px) {
	.is-menu {background:none;height:auto}
	.is-menu > ul {}
	.is-menu > ul > li {border-bottom:none;}
    .is-menu {padding-top:0px;display:inline-block;position:relative;left:0;overflow:inherit;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}            
    .is-menu ul li {display:block;position:relative;float:left;}
    .is-menu li ul {display:none;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);box-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);}
    .is-menu ul li a {padding: 15px 20px 15px 20px !important;}
    .is-menu ul li a:hover {}
    .is-menu li:hover > ul {display:block;position:absolute;}
    .is-menu li:hover li {float:none;}
    .is-menu li:hover a {/*background:rgba(0,0,0,0.9);color:#ddd;*/ }
    .is-menu li:hover li a:hover {/*background:rgba(0,0,0,1);color:#fff;*/}
    .is-menu li ul li {border-top:0;}
    .is-menu ul ul ul {right:100%;top:0;}
}	
ul:before,ul:after {content: " "; display: table; }
ul:after {clear: both;}		
#is-menu-toggle {display:table-cell;/*vertical-align:middle;width:55px;height:55px;border:none;background:rgba(0, 0, 0, 0);padding:0 1em;outline:none;cursor:pointer;
	position: relative; margin:0 15px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;*/z-index:1000000}
@media all and (min-width: 1025px) {
	#is-menu-toggle {display:none}
	.is-topbar .menu-links {display:inline-block;}
	.is-topbar .custom-links {display:inline-block;}
}		



/*#is-menu-toggle span {position:absolute;left:14px;top:27px;display:inline-block;width:25px;height:2px;background-color:rgba(0,0,0,1);}
#is-menu-toggle span::before, body #is-menu-toggle span:after {content:'';width:100%;height:100%;position:absolute;background-color:inherit;left:0;}
#is-menu-toggle span::before { bottom: 7px; }
#is-menu-toggle span::after {	top: 7px; }	*/
#is-menu-toggle {
  width: 25px;
  height: 14px;
  position: relative;
  margin: 14px 30px;
}
#is-menu-toggle .line {
  display: block;
  background: #000000;
  width: 25px;
  height: 2px;
  position: absolute;
  left: 0;
  border-radius: 1px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
}
#is-menu-toggle .line.line-1 {
  top: 0;
}
#is-menu-toggle .line.line-2 {
  top: 50%;
}
#is-menu-toggle .line.line-3 {
  top: 100%;
}
#is-menu-toggle:hover .line-1, #is-menu-toggle:focus .line-1 {
  transform: translateY(-1px);
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
}
#is-menu-toggle:hover .line-3, #is-menu-toggle:focus .line-3 {
  transform: translateY(1px);
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
}
#is-menu-toggle.active .line-1 {
  transform: translateY(7px) translateX(0) rotate(45deg);
  -webkit-transform: translateY(7px) translateX(0) rotate(45deg);
  -moz-transform: translateY(7px) translateX(0) rotate(45deg);
}
#is-menu-toggle.active .line-2 {
  opacity: 0;
}
#is-menu-toggle.active .line-3 {
  transform: translateY(-7px) translateX(0) rotate(-45deg);
  -webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-7px) translateX(0) rotate(-45deg);
}




@media all and (min-width: 1025px) {		    
	.is-topbar.shrink .is-menu ul li a {padding:10px 20px 10px 20px !important;line-height:50px;-webkit-transition: all 0.3s;-moz-transition:all 0.3s;transition: all 0.3s;}
	.is-topbar.shrink .is-menu ul li a .material-icons {line-height: 50px;}
}


.is-menu-close {
	width:50px;
	height:50px;
	border-radius:500px;
	position:fixed;
	top:13px;right:25px;
	cursor:pointer;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	display:none;
}
.is-menu-close:hover { 
	transform: rotate(90deg);
}
.is-menu-close span {
	position: absolute;
	display: inline-block;
	width: 25px;height: 2px;	  
	top: 22px; left: 12px;
}
.is-menu-close span::before, .is-menu-close span:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(71, 71, 71, 1);left: 0;
	transition: transform 0.2s;
	/* Force hardware acceleration */
	-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
}
.is-menu-close span::before {
	-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);
	transition: transform 0.2s;
}
.is-menu-close span::after {
	-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);
	transition: transform 0.2s;
}

/* ok - #4 Transparent (dark text), light topbar on scroll */
.is-topbar {background-color:rgba(255, 255, 255, 0);color:rgba(0, 0, 0, 0.9)}	
.is-topbar .is-sitename {color:rgba(0, 0, 0, 0.9)}	
.is-topbar .is-menu > ul > li > a {color:rgba(0, 0, 0, 0.9)}	

.is-topbar.shrink {background-color:rgba(255, 255, 255, 1);color:rgba(0, 0, 0, 0.9)} /*background-color:rgba(255, 255, 255, 0.85);*/	
.is-topbar.shrink .is-sitename {color:rgba(0, 0, 0, 0.9)}	
.is-topbar.shrink .is-menu > ul > li > a {color:rgba(0, 0, 0, 0.9)}	

@media all and (max-width: 1024px) {
    .is-topbar .is-menu  { background:rgba(255, 255, 255, 1) }
    .is-topbar .is-menu ul li a {color:rgba(0, 0, 0, 0.9)}	
    /*.is-topbar .is-menu > ul > li { border-bottom: rgba(245,245,245,.3) 1px solid }*/
    
    .is-topbar #is-menu-toggle span {background-color:rgba(0, 0, 0, 0.9)}
    .is-topbar.shrink #is-menu-toggle span {background-color:rgba(0, 0, 0, 0.9)}
}


/* dark:ok - #6 Transparent (dark text), dark topbar on scroll */
.is-topbar.dark {background-color:rgba(0, 0, 0, 0, 0);color:rgba(0, 0, 0, 0.9)}	
.is-topbar.dark .is-sitename {color:rgba(0, 0, 0, 0.9)}	
.is-topbar.dark .is-menu > ul > li > a {color:rgba(0, 0, 0, 0.9)}

.is-topbar.dark.shrink {background-color:rgba(0, 0, 0, 0.9);color:rgba(255, 255, 255, 0.8)}	
.is-topbar.dark.shrink .is-sitename {color:rgba(255, 255, 255, 0.8)}	
.is-topbar.dark.shrink .is-menu > ul > li > a {color:rgba(255, 255, 255, 0.8)}

@media all and (max-width: 1024px) {
    .is-topbar.dark .is-menu  { background:rgba(0,0,0,0.85) }
    .is-topbar.dark .is-menu ul li a {color:rgba(255, 255, 255, 0.8)}	
    /*.is-topbar.dark .is-menu > ul > li { border-bottom: rgba(245,245,245,.3) 1px solid }*/
    
    .is-topbar.dark #is-menu-toggle span {background-color:rgba(0, 0, 0, 0.9)}
    .is-topbar.dark.shrink #is-menu-toggle span {background-color:rgba(255, 255, 255, 0.8)}   
    .is-topbar.dark #is-menu-toggle.active span {background-color:rgba(255, 255, 255, 0.8)} /* active */
}


/* lighttext:ok - #3 Transparent (light text), light topbar on scroll */
.is-topbar.lighttext {background-color:rgba(255, 255, 255, 0);color:rgba(255, 255, 255, 0.8)}	
.is-topbar.lighttext .is-sitename {color:rgba(255, 255, 255, 0.8)}	
.is-topbar.lighttext .is-menu > ul > li > a {color:rgba(255, 255, 255, 0.8)}	

.is-topbar.lighttext.shrink {background-color:rgba(255, 255, 255, 1);color:rgba(0, 0, 0, 0.9)}	/*background-color:rgba(255, 255, 255, 0.85);*/
.is-topbar.lighttext.shrink .is-sitename {color:rgba(0, 0, 0, 0.9)}	
.is-topbar.lighttext.shrink .is-menu > ul > li > a {color:rgba(0, 0, 0, 0.9)}	

@media all and (max-width: 1024px) {
    .is-topbar.lighttext .is-menu  { background:rgba(255, 255, 255, 1) }
    .is-topbar.lighttext .is-menu ul li a {color:rgba(0, 0, 0, 0.9)}	
    /*.is-topbar.lighttext .is-menu > ul > li { border-bottom: rgba(245,245,245,.3) 1px solid }*/
    
    .is-topbar.lighttext #is-menu-toggle span {background-color:rgba(255, 255, 255, 0.8)}
    .is-topbar.lighttext.shrink #is-menu-toggle span {background-color:rgba(0, 0, 0, 0.9)}    
    .is-topbar.lighttext #is-menu-toggle.active span {background-color:rgba(0, 0, 0, 0.9)} /* active */
}


/* dark.lighttext - #5 Transparent (light text), dark topbar on scroll */
.is-topbar.dark.lighttext {background-color:rgba(0, 0, 0, 0);color:rgba(255, 255, 255, 0.8)}	
.is-topbar.dark.lighttext .is-sitename {color:rgba(255, 255, 255, 0.8)}	
.is-topbar.dark.lighttext .is-menu > ul > li > a {color:rgba(255, 255, 255, 0.8)}	

.is-topbar.dark.lighttext.shrink  {background-color:rgba(0, 0, 0, 0.9);color:rgba(255, 255, 255, 0.8)}	
.is-topbar.dark.lighttext.shrink .is-sitename {color:rgba(255, 255, 255, 0.8)}
.is-topbar.dark.lighttext.shrink .is-menu > ul > li > a {color:rgba(255, 255, 255, 0.8)}

@media all and (max-width: 1024px) {
    .is-topbar.dark .is-menu  { background:rgba(0,0,0,0.85) }
    .is-topbar.dark .is-menu ul li a {color:rgba(255, 255, 255, 0.8)}	
    /*.is-topbar.dark .is-menu > ul > li { border-bottom: rgba(245,245,245,.3) 1px solid }*/
    
    .is-topbar.dark.lighttext #is-menu-toggle span {background-color:rgba(255, 255, 255, 0.8);}
    .is-topbar.dark.lighttext.shrink #is-menu-toggle span {background-color:rgba(255, 255, 255, 0.8);}
}

/* fixed - #1 Fixed light topbar */
.is-topbar.fixed {background-color:rgba(255, 255, 255, 1)/* !important*/;color:rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); 
    
} 

/* dark.fixed - #2 Fixed dark topbar */
.is-topbar.dark.fixed  {background-color:rgba(0, 0, 0, 1)/* !important*/;color:rgba(255, 255, 255, 0.8)}	
.is-topbar.dark.fixed .is-sitename {color:rgba(255, 255, 255, 0.8)}
.is-topbar.dark.fixed .is-menu > ul > li > a {color:rgba(255, 255, 255, 0.8)}
@media all and (max-width: 1024px) {   
    .is-topbar.dark.fixed #is-menu-toggle span {background-color:rgba(255, 255, 255, 0.8);}
    .is-topbar.dark.fixed.shrink #is-menu-toggle span {background-color:rgba(255, 255, 255, 0.8);}
}

/* fixed - #9 Static light topbar */
.is-topbar.fixed.static {position:absolute;background-color:rgba(255, 255, 255, 1)/* !important*/;} 
@media all and (max-width: 1024px) {
    .is-topbar.fixed.static.shrink { position:fixed; }
}

/* dark.fixed - #10 Static dark topbar */
.is-topbar.dark.fixed.static  {position:absolute;background-color:rgba(0, 0, 0, 1)/* !important*/;} 
.is-topbar.dark.fixed.static.shrink .is-sitename {color:rgba(255, 255, 255, 0.8)}
@media all and (max-width: 1024px) {
    .is-topbar.dark.fixed.static.shrink { position:fixed; }
}

/* static - #8 Static Transparent (dark text) */
.is-topbar.static {position:absolute}
.is-topbar.static.shrink { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow:none; }

.is-topbar.static {background-color:rgba(0, 0, 0, 0);color:rgba(0, 0, 0, 0.9)}	
.is-topbar.static .is-sitename {color:rgba(0, 0, 0, 0.9)}	
.is-topbar.static .is-menu > ul > li > a {color:rgba(0, 0, 0, 0.9)}	

.is-topbar.static.shrink {background-color:rgba(0, 0, 0, 0);color:rgba(0, 0, 0, 0.9)} 
.is-topbar.static.shrink .is-sitename {color:rgba(0, 0, 0, 0.9)}	
.is-topbar.static.shrink .is-menu > ul > li > a {color:rgba(0, 0, 0, 0.9)}	

@media all and (max-width: 1024px) {
    .is-topbar.static.shrink { position:fixed; background-color:rgba(255, 255, 255, 1) }
    .is-topbar.static .is-menu  { background:rgba(255, 255, 255, 1) }
    .is-topbar.static .is-menu ul li a {color:rgba(0, 0, 0, 0.9)}	
    /*.is-topbar .is-menu > ul > li { border-bottom: rgba(245,245,245,.3) 1px solid }*/
    
    .is-topbar.static #is-menu-toggle span {background-color:rgba(0, 0, 0, 0.9)}
    .is-topbar.static.shrink #is-menu-toggle span {background-color:rgba(0, 0, 0, 0.9)}
}

/* static.lighttext - #7 Static Transparent (light text) */
.is-topbar.static {position:absolute}
.is-topbar.static.lighttext.shrink { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow:none; }

.is-topbar.static.lighttext {background-color:rgba(0, 0, 0, 0);color:rgba(255, 255, 255, 0.8)}	
.is-topbar.static.lighttext .is-sitename {color:rgba(255, 255, 255, 0.8)}	
.is-topbar.static.lighttext .is-menu > ul > li > a {color:rgba(255, 255, 255, 0.8)}	

/*.is-topbar.static.lighttext.shrink {background-color:rgba(0, 0, 0, 0);color:rgba(255, 255, 255, 0.8)} 
.is-topbar.static.lighttext.shrink .is-sitename {color:rgba(255, 255, 255, 0.8)}	
.is-topbar.static.lighttext.shrink .is-menu > ul > li > a {color:rgba(255, 255, 255, 0.8)}	*/

@media all and (max-width: 1024px) {
    .is-topbar.static.lighttext.shrink { position:fixed; background-color:rgba(0, 0, 0, 0.9); }
    .is-topbar.static.lighttext .is-menu  { background:rgba(255, 255, 255, 1) }
    .is-topbar.static.lighttext .is-menu ul li a {color:rgba(0, 0, 0, 0.9) !important;}		
    /*.is-topbar .is-menu > ul > li { border-bottom: rgba(245,245,245,.3) 1px solid }*/
    
    .is-topbar.static.lighttext #is-menu-toggle span {background-color:rgba(0, 0, 0, 0.9)}
    
    .is-topbar.static.lighttext.shrink {background-color:rgba(255, 255, 255, 1);color:rgba(0, 0, 0, 0.9)}
    .is-topbar.static.lighttext.shrink .is-sitename {color:rgba(0, 0, 0, 0.9)}	
    .is-topbar.static.lighttext.shrink .is-menu > ul > li > a {color:rgba(0, 0, 0, 0.9)}
}

/* Modified Menu */
@media all and (min-width: 1025px) {
    /*.is-menu ul ul li:first-child {border-top-left-radius:4px;border-top-right-radius:4px}
    .is-menu ul ul li:last-child {border-bottom-left-radius:4px;border-bottom-right-radius:4px}*/
    .is-topbar .is-menu ul ul li a {padding: 0px 20px 0px 20px !important;}
    .is-topbar.shrink .is-menu ul ul li a {padding: 0px 20px 0px 20px !important;}
    
    .is-menu li:hover li { background:rgba(247,247,247,0.95); }
    .is-menu li:hover li a { color:rgba(0, 0, 0, 0.9); }
    .is-menu li:hover li a:hover { background:rgba(0,0,0,0.05);color:rgba(0, 0, 0, 1)}
    
    .is-topbar.dark .is-menu li:hover li { background:rgba(0, 0, 0, 0.9); }
    .is-topbar.dark .is-menu li:hover li a { color:rgba(255,255,255,0.65); }
    .is-topbar.dark .is-menu li:hover li a:hover { color:rgba(255,255,255,0.85); }
}	

/* Adjustment due to topbar height 

type 1      Logo on left
type 2      Logo on top (centered)

style 1-2   sClass = "fixed" 'Fixed light topbar
            sClass = "fixed dark" 'Fixed dark topbar
style 3-6   sClass = "lighttext" 'Transparent (light text), light topbar on scroll
            sClass = "" 'Transparent (dark text), light topbar on scroll
            sClass = "lighttext dark" 'Transparent (light text), dark topbar on scroll
            sClass = "dark" 'Transparent (dark text), dark topbar on scroll
style 7-8   sClass = "static" 'Static Transparent (dark text)
            sClass = "static lighttext" 'Static Transparent (light text) 
style 9-10  sClass = "fixed static" 'Static light topbar
            sClass = "fixed dark static" 'Static dark topbar

*/
        
/* Type 1: style 1-2 (Fixed, always -60px) */
.is-wide-layout.topstyle-1 .is-wrapper { padding-top:60px; }

/* Type 1, style 3-6 (Fixed, transparent, always -60px, but scroll at +60px */
.is-wide-layout.topstyle-2 .is-wrapper { padding-top:60px; margin-top:-60px; }
.is-wide-layout.topstyle-2 .is-wrapper > div.is-section-100:first-child {height: -moz-calc(100% + 60px); height: -webkit-calc(100% + 60px); height: -o-calc(100% + 60px); height:calc(100% + 60px);} 
.is-wide-layout.topstyle-2 .is-wrapper > div.is-section-75:first-child {height: -moz-calc(75% + 60px); height: -webkit-calc(75% + 60px); height: -o-calc(75% + 60px); height:calc(75% + 60px);} 
.is-wide-layout.topstyle-2 .is-wrapper > div.is-section-60:first-child {height: -moz-calc(60% + 60px); height: -webkit-calc(60% + 60px); height: -o-calc(60% + 60px); height:calc(60% + 60px);} 
.is-wide-layout.topstyle-2 .is-wrapper > div.is-section-50:first-child {height: -moz-calc(50% + 60px); height: -webkit-calc(50% + 60px); height: -o-calc(50% + 60px); height:calc(50% + 60px);} 
.is-wide-layout.topstyle-2 .is-wrapper > div.is-section-40:first-child {height: -moz-calc(40% + 60px); height: -webkit-calc(40% + 60px); height: -o-calc(40% + 60px); height:calc(40% + 60px);} 
.is-wide-layout.topstyle-2 .is-wrapper > div.is-section-30:first-child {height: -moz-calc(30% + 60px); height: -webkit-calc(30% + 60px); height: -o-calc(30% + 60px); height:calc(30% + 60px);} 
.is-wide-layout.topstyle-2 .is-wrapper > div.is-section-20:first-child {height: -moz-calc(20% + 60px); height: -webkit-calc(20% + 60px); height: -o-calc(20% + 60px); height:calc(20% + 60px);} 

@media all and (max-width: 1024px) {
    .is-wide-layout.topstyle-1 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:0; } 
    
    .is-wide-layout.topstyle-2 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:40px; } /*div.is-box*/
}

/* Type 1, style 7-8 (Static, transparent, only add padding-top for content, not wrapper) */
.is-wide-layout.topstyle-3 .is-wrapper > div:first-child .is-box-centered { padding-top:40px; }

/* Type 1, style 9-10 */
.is-wide-layout.topstyle-4 .is-wrapper > div:first-child .is-box-centered { padding-top:40px; } 

/* Type 2 (logo on top): style 1-2 */
.is-wide-layout.topstyle-5 .is-wrapper { padding-top:60px; }

.is-wide-layout.topstyle-5 .is-wrapper > div:first-child .is-box-centered { padding-top:140px; }

/* Type 2 (logo on top), style 3-6 */
.is-wide-layout.topstyle-6 .is-wrapper { padding-top:60px; margin-top:-60px; }
.is-wide-layout.topstyle-6 .is-wrapper > div.is-section-100:first-child {height: -moz-calc(100% + 60px); height: -webkit-calc(100% + 60px); height: -o-calc(100% + 60px); height:calc(100% + 60px);} 
.is-wide-layout.topstyle-6 .is-wrapper > div.is-section-75:first-child {height: -moz-calc(75% + 60px); height: -webkit-calc(75% + 60px); height: -o-calc(75% + 60px); height:calc(75% + 60px);} 
.is-wide-layout.topstyle-6 .is-wrapper > div.is-section-60:first-child {height: -moz-calc(60% + 60px); height: -webkit-calc(60% + 60px); height: -o-calc(60% + 60px); height:calc(60% + 60px);} 
.is-wide-layout.topstyle-6 .is-wrapper > div.is-section-50:first-child {height: -moz-calc(50% + 60px); height: -webkit-calc(50% + 60px); height: -o-calc(50% + 60px); height:calc(50% + 60px);} 
.is-wide-layout.topstyle-6 .is-wrapper > div.is-section-40:first-child {height: -moz-calc(40% + 60px); height: -webkit-calc(40% + 60px); height: -o-calc(40% + 60px); height:calc(40% + 60px);} 
.is-wide-layout.topstyle-6 .is-wrapper > div.is-section-30:first-child {height: -moz-calc(30% + 60px); height: -webkit-calc(30% + 60px); height: -o-calc(30% + 60px); height:calc(30% + 60px);} 
.is-wide-layout.topstyle-6 .is-wrapper > div.is-section-20:first-child {height: -moz-calc(20% + 60px); height: -webkit-calc(20% + 60px); height: -o-calc(20% + 60px); height:calc(20% + 60px);} 

.is-wide-layout.topstyle-6 .is-wrapper > div:first-child .is-box-centered { padding-top:140px; }


/* Type 2 (logo on top), style 7-8 */
.is-wide-layout.topstyle-7 .is-wrapper > div:first-child .is-box-centered { padding-top:140px; }

/* Type 2 (logo on top), style 9-10 */
.is-wide-layout.topstyle-8 .is-wrapper > div:first-child .is-box-centered { padding-top:140px; } 

@media all and (max-width: 1024px) {
    .is-wide-layout.topstyle-5 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:0px; }
    
    .is-wide-layout.topstyle-6 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; }

    .is-wide-layout.topstyle-7 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; }

    .is-wide-layout.topstyle-8 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; }
}

/* For Boxed Layout, Type 2 */
.is-boxed-layout.topstyle-5 .is-wrapper { margin-top:275px !important; }
.is-boxed-layout.topstyle-6 .is-wrapper { margin-top:245px !important; }
.is-boxed-layout.topstyle-7 .is-wrapper { margin-top:245px !important; }
.is-boxed-layout.topstyle-8 .is-wrapper { margin-top:275px !important; }
@media all and (max-width: 1024px) {
    .is-boxed-layout.topstyle-5 .is-wrapper { margin-top:0 !important; }
    .is-boxed-layout.topstyle-6 .is-wrapper { margin-top:0 !important; }
    .is-boxed-layout.topstyle-7 .is-wrapper { margin-top:0 !important; }
    .is-boxed-layout.topstyle-8 .is-wrapper { margin-top:0 !important; }

    .is-boxed-layout.topstyle-1 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; } 
    
    .is-boxed-layout.topstyle-2 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; }
    
    .is-boxed-layout.topstyle-3 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; }
    
    .is-boxed-layout.topstyle-4 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; }
    
    .is-boxed-layout.topstyle-5 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; }
         
    .is-boxed-layout.topstyle-6 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; }
       
    .is-boxed-layout.topstyle-7 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; } 
    
    .is-boxed-layout.topstyle-8 .is-wrapper > div.is-box:first-child .is-box-centered { padding-top:80px; } 
}
